Add volume per day to graphs
This commit is contained in:
parent
4831a830c6
commit
5f85e11daf
86
ViewBest.tsx
86
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<RouteProp<BestPageParams, 'ViewBest'>>();
|
||||
const [sets, setSets] = useState<Set[]>([]);
|
||||
const [weights, setWeights] = useState<Set[]>([]);
|
||||
const [volumes, setVolumes] = useState<Volume[]>([]);
|
||||
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() {
|
|||
<Text>Best weight per day</Text>
|
||||
<View style={{height: 300, padding: 20, flexDirection: 'row'}}>
|
||||
<YAxis
|
||||
data={sets.map(set => 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}`}
|
||||
/>
|
||||
<View style={{flex: 1, marginLeft: 10}}>
|
||||
<LineChart
|
||||
style={{flex: 1}}
|
||||
data={sets.map(set => set.weight)}
|
||||
data={weights.map(set => set.weight)}
|
||||
contentInset={verticalContentInset}
|
||||
curve={shape.curveBasis}
|
||||
svg={{
|
||||
|
@ -82,8 +105,47 @@ export default function ViewBest() {
|
|||
</LineChart>
|
||||
<XAxis
|
||||
style={{marginHorizontal: -10, height: xAxisHeight}}
|
||||
data={sets}
|
||||
formatLabel={(_value, index) => formatMonth(sets[index].created!)}
|
||||
data={weights}
|
||||
formatLabel={(_value, index) =>
|
||||
formatMonth(weights[index].created!)
|
||||
}
|
||||
contentInset={{left: 10, right: 10}}
|
||||
svg={axesSvg}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
<Text>Volume per day</Text>
|
||||
<View style={{height: 300, padding: 20, flexDirection: 'row'}}>
|
||||
<YAxis
|
||||
data={volumes.map(volume => volume.value)}
|
||||
style={{marginBottom: xAxisHeight}}
|
||||
contentInset={verticalContentInset}
|
||||
svg={axesSvg}
|
||||
formatLabel={(value: number) =>
|
||||
`${value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')}${
|
||||
volumes[0].unit
|
||||
}`
|
||||
}
|
||||
/>
|
||||
<View style={{flex: 1, marginLeft: 10}}>
|
||||
<LineChart
|
||||
style={{flex: 1}}
|
||||
data={volumes.map(volume => volume.value)}
|
||||
contentInset={verticalContentInset}
|
||||
curve={shape.curveBasis}
|
||||
svg={{
|
||||
stroke: dark
|
||||
? DarkTheme.colors.primary
|
||||
: DefaultTheme.colors.primary,
|
||||
}}>
|
||||
<Grid />
|
||||
</LineChart>
|
||||
<XAxis
|
||||
style={{marginHorizontal: -10, height: xAxisHeight}}
|
||||
data={weights}
|
||||
formatLabel={(_value, index) =>
|
||||
formatMonth(volumes[index]?.created)
|
||||
}
|
||||
contentInset={{left: 10, right: 10}}
|
||||
svg={axesSvg}
|
||||
/>
|
||||
|
|
Loading…
Reference in New Issue
Block a user