diff --git a/ViewBest.tsx b/ViewBest.tsx index 99942d0..1a6b7fe 100644 --- a/ViewBest.tsx +++ b/ViewBest.tsx @@ -1,9 +1,10 @@ import React, {useContext, useEffect, useState} from 'react'; -import {useColorScheme} from 'react-native'; -import {LineChart} from 'react-native-gifted-charts'; +import {useColorScheme, View} from 'react-native'; import {Button, Dialog, Portal} from 'react-native-paper'; import {DatabaseContext} from './App'; import Best from './best'; +import {AreaChart, Grid, LineChart, YAxis} from 'react-native-svg-charts'; +import * as shape from 'd3-shape'; export default function ViewBest({ best, @@ -12,52 +13,56 @@ export default function ViewBest({ best?: Best; setBest: (best?: Best) => void; }) { - const [data, setData] = useState< - {value: number; label: string; labelComponent: any}[] - >([]); + const [data, setData] = useState([]); const [labels, setLabels] = useState([]); + const [unit, setUnit] = useState(); 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(() => { + const selectBest = ` + 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 refresh = async () => { + const [result] = await db.executeSql(selectBest, [best?.name]); + if (result.rows.length === 0) return; + console.log(`${ViewBest.name}.${refresh.name}:`, result.rows.raw()); + setData(result.rows.raw().map(row => row.weight)); + setUnit(result.rows.item(0).unit); + }; refresh(); }, [best]); + const contentInset = {top: 20, bottom: 20}; + return ( setBest(undefined)}> {best?.name} - + + `${value}${unit}`} + /> + + + +