diff --git a/ViewBest.tsx b/ViewBest.tsx index 7585b96..52965d2 100644 --- a/ViewBest.tsx +++ b/ViewBest.tsx @@ -16,9 +16,17 @@ import {BestPageParams} from './BestPage'; import Set from './set'; import {formatMonth} from './time'; +interface Volume { + name: string; + created: string; + value: number; + unit: string; +} + export default function ViewBest() { const {params} = useRoute>(); - const [sets, setSets] = useState([]); + const [weights, setWeights] = useState([]); + const [volumes, setVolumes] = useState([]); const db = useContext(DatabaseContext); const navigation = useNavigation(); const dark = useColorScheme() === 'dark'; @@ -37,17 +45,32 @@ export default function ViewBest() { useEffect(() => { console.log(`${ViewBest.name}.useEffect`); - const selectBest = ` - SELECT max(weight) AS weight, STRFTIME('%Y-%m-%d', created) as created, unit + const selectWeights = ` + SELECT max(weight) AS weight, + STRFTIME('%Y-%m-%d', created) as created, unit + FROM sets + WHERE name = ? + GROUP BY name, STRFTIME('%Y-%m-%d', created) + `; + const selectVolumes = ` + SELECT sum(weight * reps) AS value, + STRFTIME('%Y-%m-%d', created) as created, unit FROM sets WHERE name = ? GROUP BY name, STRFTIME('%Y-%m-%d', created) `; const refresh = async () => { - const [result] = await db.executeSql(selectBest, [params.best.name]); - if (result.rows.length === 0) return; - console.log(`${ViewBest.name}.${refresh.name}:`, result.rows.raw()); - setSets(result.rows.raw()); + const [weightsResult] = await db.executeSql(selectWeights, [ + params.best.name, + ]); + if (weightsResult.rows.length === 0) return; + setWeights(weightsResult.rows.raw()); + const [volumesResult] = await db.executeSql(selectVolumes, [ + params.best.name, + ]); + console.log(volumesResult.rows.raw()); + if (volumesResult.rows.length === 0) return; + setVolumes(volumesResult.rows.raw()); }; refresh(); }, [params.best.name, db]); @@ -61,16 +84,16 @@ export default function ViewBest() { Best weight per day set.weight)} + data={weights.map(set => set.weight)} style={{marginBottom: xAxisHeight}} contentInset={verticalContentInset} svg={axesSvg} - formatLabel={value => `${value}${sets[0].unit}`} + formatLabel={value => `${value}${weights[0].unit}`} /> set.weight)} + data={weights.map(set => set.weight)} contentInset={verticalContentInset} curve={shape.curveBasis} svg={{ @@ -82,8 +105,47 @@ export default function ViewBest() { formatMonth(sets[index].created!)} + data={weights} + formatLabel={(_value, index) => + formatMonth(weights[index].created!) + } + contentInset={{left: 10, right: 10}} + svg={axesSvg} + /> + + + Volume per day + + volume.value)} + style={{marginBottom: xAxisHeight}} + contentInset={verticalContentInset} + svg={axesSvg} + formatLabel={(value: number) => + `${value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')}${ + volumes[0].unit + }` + } + /> + + volume.value)} + contentInset={verticalContentInset} + curve={shape.curveBasis} + svg={{ + stroke: dark + ? DarkTheme.colors.primary + : DefaultTheme.colors.primary, + }}> + + + + formatMonth(volumes[index]?.created) + } contentInset={{left: 10, right: 10}} svg={axesSvg} />