Add graphs

This commit is contained in:
Brandon Presley 2022-07-09 00:11:10 +12:00
parent e417897bb7
commit c80c65e171
5 changed files with 211 additions and 24 deletions

View File

@ -2,12 +2,14 @@ import React, {useContext, useEffect, useState} from 'react';
import {FlatList, StyleSheet, View} from 'react-native';
import {List, Searchbar} from 'react-native-paper';
import {DatabaseContext} from './App';
import Exercise from './exercise';
import Best from './best';
import ViewBest from './ViewBest';
export default function BestPage() {
const [exercises, setExercises] = useState<Exercise[]>([]);
const [bests, setBests] = useState<Best[]>([]);
const [search, setSearch] = useState('');
const [refreshing, setRefresing] = useState(false);
const [best, setBest] = useState<Best>();
const db = useContext(DatabaseContext);
const bestWeight = `
@ -27,27 +29,28 @@ export default function BestPage() {
const refresh = async () => {
const [weight] = await db.executeSql(bestWeight, [`%${search}%`]);
if (!weight) return setExercises([]);
let newExercises: Exercise[] = [];
if (!weight) return setBests([]);
let newBest: Best[] = [];
for (let i = 0; i < weight.rows.length; i++) {
const [reps] = await db.executeSql(bestReps, [
weight.rows.item(i).name,
weight.rows.item(i).weight,
]);
newExercises = newExercises.concat(reps.rows.raw());
newBest = newBest.concat(reps.rows.raw());
}
setExercises(newExercises);
setBests(newBest);
};
useEffect(() => {
refresh();
}, [search]);
const renderItem = ({item}: {item: Exercise}) => (
const renderItem = ({item}: {item: Best}) => (
<List.Item
key={item.name}
title={item.name}
description={`${item.reps} x ${item.weight}${item.unit}`}
onPress={() => setBest(item)}
/>
);
@ -68,8 +71,10 @@ export default function BestPage() {
setRefresing(false);
}}
renderItem={renderItem}
data={exercises}
data={bests}
/>
<ViewBest setBest={setBest} best={best} />
</View>
);
}

70
ViewBest.tsx Normal file
View File

@ -0,0 +1,70 @@
import React, {useContext, useEffect, useState} from 'react';
import {useColorScheme} from 'react-native';
import {LineChart} from 'react-native-gifted-charts';
import {Button, Dialog, Portal} from 'react-native-paper';
import {DatabaseContext} from './App';
import Best from './best';
export default function ViewBest({
best,
setBest,
}: {
best?: Best;
setBest: (best?: Best) => void;
}) {
const [data, setData] = useState<
{value: number; label: string; labelComponent: any}[]
>([]);
const [labels, setLabels] = useState<string[]>([]);
const db = useContext(DatabaseContext);
const dark = useColorScheme() === 'dark';
const selectBest = `
SELECT max(weight) AS weight, STRFTIME('%Y-%m-%d', created) as created
FROM sets
WHERE name = ?
GROUP BY name, STRFTIME('%Y-%m-%d', created)
`;
const refresh = async () => {
const [result] = await db.executeSql(selectBest, [best?.name]);
if (result.rows.length === 0) return;
console.log('ViewBest.refresh', result.rows.raw());
setData(
result.rows.raw().map(row => ({
value: row.weight,
label: row.created,
labelComponent: () => null,
})),
);
};
useEffect(() => {
refresh();
}, [best]);
return (
<Portal>
<Dialog visible={!!best} onDismiss={() => setBest(undefined)}>
<Dialog.Title>{best?.name}</Dialog.Title>
<Dialog.Content>
<LineChart
data={data}
curved
isAnimated
yAxisLabelSuffix="kg"
color={dark ? '#3498db' : 'black'}
dataPointsColor={dark ? '#f1c40f' : 'black'}
thickness={5}
width={240}
/>
</Dialog.Content>
<Dialog.Actions>
<Button icon="close" onPress={() => setBest(undefined)}>
Close
</Button>
</Dialog.Actions>
</Dialog>
</Portal>
);
}

View File

@ -1,4 +1,4 @@
export default interface Exercise {
export default interface Best {
name: string;
reps: number;
weight: number;

View File

@ -22,12 +22,15 @@
"react-devtools": "^4.24.7",
"react-native": "0.69.1",
"react-native-gesture-handler": "^2.5.0",
"react-native-gifted-charts": "^1.2.41",
"react-native-linear-gradient": "^2.6.2",
"react-native-pager-view": "^5.4.24",
"react-native-paper": "^4.12.2",
"react-native-reanimated": "^2.9.0",
"react-native-safe-area-context": "^4.3.1",
"react-native-screens": "^3.14.0",
"react-native-sqlite-storage": "^6.0.1",
"react-native-svg": "^12.3.0",
"react-native-tab-view": "^3.1.1",
"react-native-vector-icons": "^9.2.0"
},
@ -62,4 +65,3 @@
]
}
}

138
yarn.lock
View File

@ -1603,11 +1603,6 @@
resolved "https://registry.yarnpkg.com/@react-native-community/eslint-plugin/-/eslint-plugin-1.2.0.tgz#7d6d789ae8edf73dc9bed1246cd48277edea8066"
integrity sha512-o6aam+0Ug1xGK3ABYmBm0B1YuEKfM/5kaoZO0eHbZwSpw9UzDX4G5y4Nx/K20FHqUmJHkZmLvOUFYwN4N+HqKA==
"@react-native-picker/picker@^2.4.2":
version "2.4.2"
resolved "https://registry.yarnpkg.com/@react-native-picker/picker/-/picker-2.4.2.tgz#2925eb8e76ff6b584c80529adc251df963be9141"
integrity sha512-0nY8638h1J3wKz6P3IJMpOoxJDdOj7Dk/K2hP/xpqP3KnIY0lmoqYlhyNihuyVPocDGajf6SA7LFFsFepQ56ag==
"@react-native/assets@1.0.0":
version "1.0.0"
resolved "https://registry.yarnpkg.com/@react-native/assets/-/assets-1.0.0.tgz#c6f9bf63d274bafc8e970628de24986b30a55c8e"
@ -1817,6 +1812,11 @@
resolved "https://registry.yarnpkg.com/@types/node/-/node-12.20.55.tgz#c329cbd434c42164f846b909bd6f85b5537f6240"
integrity sha512-J8xLz7q2OFulZ2cyGTLE1TbbZcjpno7FaN6zdJNrgAdrJ+DZzh/uFR6YrTb4C+nXakvud8Q4+rbhoIWlYQbUFQ==
"@types/node@^15.0.2":
version "15.14.9"
resolved "https://registry.yarnpkg.com/@types/node/-/node-15.14.9.tgz#bc43c990c3c9be7281868bbc7b8fdd6e2b57adfa"
integrity sha512-qjd88DrCxupx/kJD5yQgZdcYKZKSIGBVDIBE1/LTGcNm3d2Np/jxojkdePDdfnBHJc5W7vSMpbJ1aB7p/Py69A==
"@types/normalize-package-data@^2.4.0":
version "2.4.1"
resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz#d3357479a0fdfdd5907fe67e17e0a85c906e1301"
@ -1832,6 +1832,13 @@
resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf"
integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==
"@types/react-dom@^17.0.3":
version "17.0.17"
resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.17.tgz#2e3743277a793a96a99f1bf87614598289da68a1"
integrity sha512-VjnqEmqGnasQKV0CWLevqMTXBYG9GbwuE6x3VetERLh0cq2LTptFE73MrQi2S7GkKXCf2GgwItB/melLnxfnsg==
dependencies:
"@types/react" "^17"
"@types/react-native-sqlite-storage@^5.0.2":
version "5.0.2"
resolved "https://registry.yarnpkg.com/@types/react-native-sqlite-storage/-/react-native-sqlite-storage-5.0.2.tgz#eefcc9ea6ff73043bb2945023fa8ee721683b61b"
@ -1852,6 +1859,13 @@
dependencies:
"@types/react" "*"
"@types/react-native@^0.64.5":
version "0.64.25"
resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.64.25.tgz#ad6f215f339f7737f33da53f246642b3adbdf5c6"
integrity sha512-Cq7Pi6T9pbETl3M1McdERA/9C7Y2x2yWt97NXsdnklGxt3LMPcS4mtIJNlpZgyGUVV0VWMUOLQZxjXmV04toPA==
dependencies:
"@types/react" "*"
"@types/react-test-renderer@^18.0.0":
version "18.0.0"
resolved "https://registry.yarnpkg.com/@types/react-test-renderer/-/react-test-renderer-18.0.0.tgz#7b7f69ca98821ea5501b21ba24ea7b6139da2243"
@ -1859,7 +1873,7 @@
dependencies:
"@types/react" "*"
"@types/react@*", "@types/react@^18":
"@types/react@*", "@types/react@^17", "@types/react@^17.0.5", "@types/react@^18":
version "18.0.14"
resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.14.tgz#e016616ffff51dba01b04945610fe3671fdbe06d"
integrity sha512-x4gGuASSiWmo0xjDLpm5mPb52syZHJx02VKbqUKdLmKtAwIh63XClGsiTI1K6DO5q7ox4xAsQrU+Gl3+gGXF9Q==
@ -2479,6 +2493,11 @@ bl@^4.1.0:
inherits "^2.0.4"
readable-stream "^3.4.0"
boolbase@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
integrity sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==
boolean@^3.0.1:
version "3.2.0"
resolved "https://registry.yarnpkg.com/boolean/-/boolean-3.2.0.tgz#9e5294af4e98314494cbb17979fa54ca159f116b"
@ -3009,6 +3028,30 @@ crypto-random-string@^1.0.0:
resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-1.0.0.tgz#a230f64f568310e1498009940790ec99545bca7e"
integrity sha512-GsVpkFPlycH7/fRR7Dhcmnoii54gV1nz7y4CWyeFS14N+JVBBhY+r8amRHE4BwSYal7BPTDp8isvAlCxyFt3Hg==
css-select@^4.2.1:
version "4.3.0"
resolved "https://registry.yarnpkg.com/css-select/-/css-select-4.3.0.tgz#db7129b2846662fd8628cfc496abb2b59e41529b"
integrity sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==
dependencies:
boolbase "^1.0.0"
css-what "^6.0.1"
domhandler "^4.3.1"
domutils "^2.8.0"
nth-check "^2.0.1"
css-tree@^1.0.0-alpha.39:
version "1.1.3"
resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.1.3.tgz#eb4870fb6fd7707327ec95c2ff2ab09b5e8db91d"
integrity sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==
dependencies:
mdn-data "2.0.14"
source-map "^0.6.1"
css-what@^6.0.1:
version "6.1.0"
resolved "https://registry.yarnpkg.com/css-what/-/css-what-6.1.0.tgz#fb5effcf76f1ddea2c81bdfaa4de44e79bac70f4"
integrity sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==
cssom@^0.4.4:
version "0.4.4"
resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.4.4.tgz#5a66cf93d2d0b661d80bf6a44fb65f5c2e4e0a10"
@ -3204,6 +3247,20 @@ doctrine@^3.0.0:
dependencies:
esutils "^2.0.2"
dom-serializer@^1.0.1:
version "1.4.1"
resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-1.4.1.tgz#de5d41b1aea290215dc45a6dae8adcf1d32e2d30"
integrity sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==
dependencies:
domelementtype "^2.0.1"
domhandler "^4.2.0"
entities "^2.0.0"
domelementtype@^2.0.1, domelementtype@^2.2.0:
version "2.3.0"
resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.3.0.tgz#5c45e8e869952626331d7aab326d01daf65d589d"
integrity sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==
domexception@^2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/domexception/-/domexception-2.0.1.tgz#fb44aefba793e1574b0af6aed2801d057529f304"
@ -3211,6 +3268,22 @@ domexception@^2.0.1:
dependencies:
webidl-conversions "^5.0.0"
domhandler@^4.2.0, domhandler@^4.3.1:
version "4.3.1"
resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-4.3.1.tgz#8d792033416f59d68bc03a5aa7b018c1ca89279c"
integrity sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==
dependencies:
domelementtype "^2.2.0"
domutils@^2.8.0:
version "2.8.0"
resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.8.0.tgz#4437def5db6e2d1f5d6ee859bd95ca7d02048135"
integrity sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==
dependencies:
dom-serializer "^1.0.1"
domelementtype "^2.2.0"
domhandler "^4.2.0"
dot-prop@^4.2.1:
version "4.2.1"
resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-4.2.1.tgz#45884194a71fc2cda71cbb4bceb3a4dd2f433ba4"
@ -3271,6 +3344,11 @@ enquirer@^2.3.5:
dependencies:
ansi-colors "^4.1.1"
entities@^2.0.0:
version "2.2.0"
resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==
env-paths@^2.2.0:
version "2.2.1"
resolved "https://registry.yarnpkg.com/env-paths/-/env-paths-2.2.1.tgz#420399d416ce1fbe9bc0a07c62fa68d67fd0f8f2"
@ -5570,6 +5648,11 @@ matcher@^3.0.0:
dependencies:
escape-string-regexp "^4.0.0"
mdn-data@2.0.14:
version "2.0.14"
resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50"
integrity sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==
memoize-one@^5.0.0:
version "5.2.1"
resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
@ -6080,6 +6163,13 @@ npm-run-path@^4.0.0:
dependencies:
path-key "^3.0.0"
nth-check@^2.0.1:
version "2.1.1"
resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-2.1.1.tgz#c9eab428effce36cd6b92c924bdb000ef1f1ed1d"
integrity sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==
dependencies:
boolbase "^1.0.0"
nullthrows@^1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/nullthrows/-/nullthrows-1.1.1.tgz#7818258843856ae971eae4208ad7d7eb19a431b1"
@ -6642,13 +6732,6 @@ react-native-codegen@^0.69.1:
jscodeshift "^0.13.1"
nullthrows "^1.1.1"
react-native-document-picker@^8.1.1:
version "8.1.1"
resolved "https://registry.yarnpkg.com/react-native-document-picker/-/react-native-document-picker-8.1.1.tgz#642bbe25752cc428b96416318f8dc07cef29ee10"
integrity sha512-mH0oghd7ndgU9/1meVJdqts1sAkOfUQW1qbrqTTsvR5f2K9r0BAj/X02dve5IBMOMZvlGd7qWrNVuIFg5AUXWg==
dependencies:
invariant "^2.2.4"
react-native-gesture-handler@^2.5.0:
version "2.5.0"
resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-2.5.0.tgz#61385583570ed0a45a9ed142425e35f8fe8274fb"
@ -6660,6 +6743,20 @@ react-native-gesture-handler@^2.5.0:
lodash "^4.17.21"
prop-types "^15.7.2"
react-native-gifted-charts@^1.2.41:
version "1.2.41"
resolved "https://registry.yarnpkg.com/react-native-gifted-charts/-/react-native-gifted-charts-1.2.41.tgz#e1b95d0baedcd51a36c07329d09c6668f91a6a04"
integrity sha512-ML+sCPDlzmA/bEAtCr13NGPR1l5F7uAQ46hr9FBnyhrZQXvjC+xidPJGo1U2J+jKJjgt5hcT37joveh7l2bTFw==
dependencies:
"@types/jest" "^26.0.23"
"@types/node" "^15.0.2"
"@types/react" "^17.0.5"
"@types/react-dom" "^17.0.3"
"@types/react-native" "^0.64.5"
react-native-linear-gradient "^2.5.6"
react-native-svg "^12.1.0"
typescript "^4.2.4"
react-native-gradle-plugin@^0.0.7:
version "0.0.7"
resolved "https://registry.yarnpkg.com/react-native-gradle-plugin/-/react-native-gradle-plugin-0.0.7.tgz#96602f909745239deab7b589443f14fce5da2056"
@ -6670,6 +6767,11 @@ react-native-iphone-x-helper@^1.3.1:
resolved "https://registry.yarnpkg.com/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.3.1.tgz#20c603e9a0e765fd6f97396638bdeb0e5a60b010"
integrity sha512-HOf0jzRnq2/aFUcdCJ9w9JGzN3gdEg0zFE4FyYlp4jtidqU03D5X7ZegGKfT1EWteR0gPBGp9ye5T5FvSWi9Yg==
react-native-linear-gradient@^2.5.6, react-native-linear-gradient@^2.6.2:
version "2.6.2"
resolved "https://registry.yarnpkg.com/react-native-linear-gradient/-/react-native-linear-gradient-2.6.2.tgz#56598a76832724b2afa7889747635b5c80948f38"
integrity sha512-Z8Xxvupsex+9BBFoSYS87bilNPWcRfRsGC0cpJk72Nxb5p2nEkGSBv73xZbEHnW2mUFvP+huYxrVvjZkr/gRjQ==
react-native-pager-view@^5.4.24:
version "5.4.24"
resolved "https://registry.yarnpkg.com/react-native-pager-view/-/react-native-pager-view-5.4.24.tgz#8626e757ddc55e41eca66d2f8a8a75aec54591ee"
@ -6716,6 +6818,14 @@ react-native-sqlite-storage@^6.0.1:
resolved "https://registry.yarnpkg.com/react-native-sqlite-storage/-/react-native-sqlite-storage-6.0.1.tgz#ce6a6b852f07abbea68658d5363818c8bef45dfb"
integrity sha512-1tDFjrint6X6qSYKf3gDyz+XB+X79jfiL6xTugKHPRtF0WvqMtVgdLuNqZunIXjNEvNtNVEbXaeZ6MsguFu00A==
react-native-svg@^12.1.0, react-native-svg@^12.3.0:
version "12.3.0"
resolved "https://registry.yarnpkg.com/react-native-svg/-/react-native-svg-12.3.0.tgz#40f657c5d1ee366df23f3ec8dae76fd276b86248"
integrity sha512-ESG1g1j7/WLD7X3XRFTQHVv0r6DpbHNNcdusngAODIxG88wpTWUZkhcM3A2HJTb+BbXTFDamHv7FwtRKWQ/ALg==
dependencies:
css-select "^4.2.1"
css-tree "^1.0.0-alpha.39"
react-native-tab-view@^3.1.1:
version "3.1.1"
resolved "https://registry.yarnpkg.com/react-native-tab-view/-/react-native-tab-view-3.1.1.tgz#1f8d7a835ab4f5b1b1407ec8dddc1053b53fa3c6"
@ -7898,7 +8008,7 @@ typedarray@^0.0.6:
resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
integrity sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==
typescript@^4.4.4:
typescript@^4.2.4, typescript@^4.4.4:
version "4.7.4"
resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.7.4.tgz#1a88596d1cf47d59507a1bcdfb5b9dfe4d488235"
integrity sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==