From ab2ef25615380b85e9f2d558cdea3c24c515e3ee Mon Sep 17 00:00:00 2001 From: thschleicher Date: Thu, 25 Jan 2024 17:20:56 +0100 Subject: [PATCH] first attempt at graph --- app/(tabs)/(stats)/index.tsx | 18 ++-- components/index.tsx | 33 +++---- components/stats/Graph.tsx | 65 ++++++++++++++ components/stats/PieChart.tsx | 1 - package-lock.json | 164 +++++++++++++++++++++++++++++++++- package.json | 5 +- 6 files changed, 250 insertions(+), 36 deletions(-) create mode 100644 components/stats/Graph.tsx delete mode 100644 components/stats/PieChart.tsx diff --git a/app/(tabs)/(stats)/index.tsx b/app/(tabs)/(stats)/index.tsx index cac1e04..d92ebf4 100644 --- a/app/(tabs)/(stats)/index.tsx +++ b/app/(tabs)/(stats)/index.tsx @@ -1,13 +1,7 @@ import React from 'react'; -import { StyleSheet, View, ScrollView } from 'react-native'; -import BudgetOverview from '../../../components/stats/BudgetOverview'; +import { ScrollView, StyleSheet, View } from 'react-native'; +import { Graph } from '../../../components'; import { useTheme } from '../../contexts/ThemeContext'; -import Widget from '../../../components/stats/Widget'; -import CategoryProgressBarList from '../../../components/stats/CategoryProgressBarList'; -import BudgetRemaining from '../../../components/stats/BudgetRemaining'; -import DebugMenu from '../../../services/DebugMenu'; -import SavingsOverview from '../../../components/stats/SavingsOverview'; -import FinancialAdvice from '../../../components/stats/FinancialAdvice'; export default function Page() { const { colors } = useTheme(); @@ -32,7 +26,11 @@ export default function Page() { return ( - + + + + + {/* @@ -46,7 +44,7 @@ export default function Page() { - + */} ); diff --git a/components/index.tsx b/components/index.tsx index 29167eb..a2b1a50 100644 --- a/components/index.tsx +++ b/components/index.tsx @@ -9,13 +9,13 @@ import CategorySelectorModal from "./expense/CategorySelectorModal" import DateSelectorButton from "./expense/DateSelectorButton" //common +import AutoDecimalInput from "./common/AutoDecimalInput" import CustomCard from "./common/CustomCard" +import RoundedButton from "./common/RoundedButton" +import TextInputBar from "./common/TextInputBar" import NavigationButton from "./common/button" import LoadingSymbol from "./common/loadingSymbol" import Plus from "./common/plus" -import TextInputBar from "./common/TextInputBar" -import AutoDecimalInput from "./common/AutoDecimalInput" -import RoundedButton from "./common/RoundedButton" //login import BudgetHeader from "./budget/budgetHeader" @@ -26,25 +26,14 @@ import TypeSelectorSwitch from "./budget/typeSelectorSwitch" //login import Input from "./login/input" +//stats +import Graph from "./stats/Graph" + export { - BudgetHeader, - ButtonSetting, - CustomCard, - ExpenseItem, - Input, - LoadingSymbol, - Plus, - TextInputBar, - ToggleSetting, - Welcome, - AutoDecimalInput, - CategorySelector, - CategorySelectorModal, - DateSelectorButton, - RoundedButton, - CategoryItem, - TypeSelectorSwitch, - NavigationButton, - CustomColorPicker + AutoDecimalInput, BudgetHeader, + ButtonSetting, CategoryItem, CategorySelector, + CategorySelectorModal, CustomCard, CustomColorPicker, DateSelectorButton, ExpenseItem, Graph, Input, + LoadingSymbol, NavigationButton, Plus, RoundedButton, TextInputBar, + ToggleSetting, TypeSelectorSwitch, Welcome } diff --git a/components/stats/Graph.tsx b/components/stats/Graph.tsx new file mode 100644 index 0000000..42e083f --- /dev/null +++ b/components/stats/Graph.tsx @@ -0,0 +1,65 @@ +import { View } from "react-native"; +import { PieChart } from "react-native-chart-kit"; + +const Graph = () => { + + // const {data, isLoading, reFetch} = useFetch({sql: "SELECT c.name AS name, c.color AS color, SUM(e.amount) as total FROM category c LEFT JOIN expense e ON e.category_guid = c.guid GROUP BY c.guid", args: []}); + + // useEffect(() => { + // console.log(data); + // }, [data]) + + const data = [ + { + name: "Seoul", + population: 21500000, + color: "rgba(131, 167, 234, 1)", + legendFontColor: "#7F7F7F", + legendFontSize: 15 + }, + { + name: "Toronto", + population: 2800000, + color: "#F00", + legendFontColor: "#7F7F7F", + legendFontSize: 15 + }, + { + name: "Beijing", + population: 527612, + color: "red", + legendFontColor: "#7F7F7F", + legendFontSize: 15 + }, + { + name: "New York", + population: 8538000, + color: "#ffffff", + legendFontColor: "#7F7F7F", + legendFontSize: 15 + }, + { + name: "Moscow", + population: 11920000, + color: "rgb(0, 0, 255)", + legendFontColor: "#7F7F7F", + legendFontSize: 15 + } + ]; + + + return ( + + + + ); +} + +export default Graph; \ No newline at end of file diff --git a/components/stats/PieChart.tsx b/components/stats/PieChart.tsx deleted file mode 100644 index f3fe67e..0000000 --- a/components/stats/PieChart.tsx +++ /dev/null @@ -1 +0,0 @@ -//honestly just fuck graphs \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index aab706f..b72a41b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -26,6 +26,7 @@ "react-dom": "18.2.0", "react-native": "0.72.6", "react-native-calendars": "^1.1303.0", + "react-native-chart-kit": "^6.12.0", "react-native-gesture-handler": "~2.12.0", "react-native-reanimated": "^3.3.0", "react-native-safe-area-context": "4.6.3", @@ -7410,6 +7411,12 @@ "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==" }, + "node_modules/boolbase": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", + "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==", + "peer": true + }, "node_modules/bplist-creator": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/bplist-creator/-/bplist-creator-0.1.0.tgz", @@ -8233,6 +8240,47 @@ "hyphenate-style-name": "^1.0.3" } }, + "node_modules/css-select": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz", + "integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==", + "peer": true, + "dependencies": { + "boolbase": "^1.0.0", + "css-what": "^6.1.0", + "domhandler": "^5.0.2", + "domutils": "^3.0.1", + "nth-check": "^2.0.1" + }, + "funding": { + "url": "https://github.com/sponsors/fb55" + } + }, + "node_modules/css-tree": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz", + "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==", + "peer": true, + "dependencies": { + "mdn-data": "2.0.14", + "source-map": "^0.6.1" + }, + "engines": { + "node": ">=8.0.0" + } + }, + "node_modules/css-what": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz", + "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==", + "peer": true, + "engines": { + "node": ">= 6" + }, + "funding": { + "url": "https://github.com/sponsors/fb55" + } + }, "node_modules/cssom": { "version": "0.5.0", "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.5.0.tgz", @@ -8522,6 +8570,32 @@ "node": ">=8" } }, + "node_modules/dom-serializer": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz", + "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==", + "peer": true, + "dependencies": { + "domelementtype": "^2.3.0", + "domhandler": "^5.0.2", + "entities": "^4.2.0" + }, + "funding": { + "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1" + } + }, + "node_modules/domelementtype": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz", + "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/fb55" + } + ], + "peer": true + }, "node_modules/domexception": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/domexception/-/domexception-4.0.0.tgz", @@ -8535,6 +8609,35 @@ "node": ">=12" } }, + "node_modules/domhandler": { + "version": "5.0.3", + "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz", + "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==", + "peer": true, + "dependencies": { + "domelementtype": "^2.3.0" + }, + "engines": { + "node": ">= 4" + }, + "funding": { + "url": "https://github.com/fb55/domhandler?sponsor=1" + } + }, + "node_modules/domutils": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz", + "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==", + "peer": true, + "dependencies": { + "dom-serializer": "^2.0.0", + "domelementtype": "^2.3.0", + "domhandler": "^5.0.3" + }, + "funding": { + "url": "https://github.com/fb55/domutils?sponsor=1" + } + }, "node_modules/dotenv": { "version": "16.0.3", "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.0.3.tgz", @@ -8598,7 +8701,6 @@ "version": "4.5.0", "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz", "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==", - "dev": true, "engines": { "node": ">=0.12" }, @@ -13484,6 +13586,12 @@ "resolved": "https://registry.npmjs.org/md5hex/-/md5hex-1.0.0.tgz", "integrity": "sha512-c2YOUbp33+6thdCUi34xIyOU/a7bvGKj/3DB1iaPMTuPHf/Q2d5s4sn1FaCOO43XkXggnb08y5W2PU8UNYNLKQ==" }, + "node_modules/mdn-data": { + "version": "2.0.14", + "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz", + "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==", + "peer": true + }, "node_modules/media-typer": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", @@ -14687,6 +14795,18 @@ "node": ">=4" } }, + "node_modules/nth-check": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz", + "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==", + "peer": true, + "dependencies": { + "boolbase": "^1.0.0" + }, + "funding": { + "url": "https://github.com/fb55/nth-check?sponsor=1" + } + }, "node_modules/nullthrows": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/nullthrows/-/nullthrows-1.1.1.tgz", @@ -15048,6 +15168,14 @@ "node": ">=8" } }, + "node_modules/paths-js": { + "version": "0.4.11", + "resolved": "https://registry.npmjs.org/paths-js/-/paths-js-0.4.11.tgz", + "integrity": "sha512-3mqcLomDBXOo7Fo+UlaenG6f71bk1ZezPQy2JCmYHy2W2k5VKpP+Jbin9H0bjXynelTbglCqdFhSEkeIkKTYUA==", + "engines": { + "node": ">=0.11.0" + } + }, "node_modules/picocolors": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", @@ -15248,6 +15376,11 @@ "node": ">=4.0.0" } }, + "node_modules/point-in-polygon": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/point-in-polygon/-/point-in-polygon-1.1.0.tgz", + "integrity": "sha512-3ojrFwjnnw8Q9242TzgXuTD+eKiutbzyslcq1ydfu82Db2y+Ogbmyrkpv0Hgj31qwT3lbS9+QAAO/pIQM35XRw==" + }, "node_modules/postcss": { "version": "8.4.32", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.32.tgz", @@ -15770,6 +15903,21 @@ "moment": "^2.29.4" } }, + "node_modules/react-native-chart-kit": { + "version": "6.12.0", + "resolved": "https://registry.npmjs.org/react-native-chart-kit/-/react-native-chart-kit-6.12.0.tgz", + "integrity": "sha512-nZLGyCFzZ7zmX0KjYeeSV1HKuPhl1wOMlTAqa0JhlyW62qV/1ZPXHgT8o9s8mkFaGxdqbspOeuaa6I9jUQDgnA==", + "dependencies": { + "lodash": "^4.17.13", + "paths-js": "^0.4.10", + "point-in-polygon": "^1.0.1" + }, + "peerDependencies": { + "react": "> 16.7.0", + "react-native": ">= 0.50.0", + "react-native-svg": "> 6.4.1" + } + }, "node_modules/react-native-gesture-handler": { "version": "2.12.1", "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.12.1.tgz", @@ -15829,6 +15977,20 @@ "react-native": "*" } }, + "node_modules/react-native-svg": { + "version": "14.1.0", + "resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-14.1.0.tgz", + "integrity": "sha512-HeseElmEk+AXGwFZl3h56s0LtYD9HyGdrpg8yd9QM26X+d7kjETrRQ9vCjtxuT5dCZEIQ5uggU1dQhzasnsCWA==", + "peer": true, + "dependencies": { + "css-select": "^5.1.0", + "css-tree": "^1.1.3" + }, + "peerDependencies": { + "react": "*", + "react-native": "*" + } + }, "node_modules/react-native-swipe-gestures": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/react-native-swipe-gestures/-/react-native-swipe-gestures-1.0.5.tgz", diff --git a/package.json b/package.json index 2e627b2..6203ad9 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "dependencies": { "@expo/vector-icons": "^13.0.0", "@react-native-async-storage/async-storage": "1.18.2", + "@react-native-community/datetimepicker": "7.2.0", "@react-navigation/native": "^6.0.2", "expo": "~49.0.15", "expo-font": "~11.4.0", @@ -35,14 +36,14 @@ "react-dom": "18.2.0", "react-native": "0.72.6", "react-native-calendars": "^1.1303.0", + "react-native-chart-kit": "^6.12.0", "react-native-gesture-handler": "~2.12.0", "react-native-reanimated": "^3.3.0", "react-native-safe-area-context": "4.6.3", "react-native-screens": "~3.22.0", "react-native-uuid": "^2.0.1", "react-native-web": "~0.19.6", - "reanimated-color-picker": "^2.4.2", - "@react-native-community/datetimepicker": "7.2.0" + "reanimated-color-picker": "^2.4.2" }, "devDependencies": { "@babel/core": "^7.20.0",