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 Set from './set';
|
||||||
import {formatMonth} from './time';
|
import {formatMonth} from './time';
|
||||||
|
|
||||||
|
interface Volume {
|
||||||
|
name: string;
|
||||||
|
created: string;
|
||||||
|
value: number;
|
||||||
|
unit: string;
|
||||||
|
}
|
||||||
|
|
||||||
export default function ViewBest() {
|
export default function ViewBest() {
|
||||||
const {params} = useRoute<RouteProp<BestPageParams, '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 db = useContext(DatabaseContext);
|
||||||
const navigation = useNavigation();
|
const navigation = useNavigation();
|
||||||
const dark = useColorScheme() === 'dark';
|
const dark = useColorScheme() === 'dark';
|
||||||
|
@ -37,17 +45,32 @@ export default function ViewBest() {
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
console.log(`${ViewBest.name}.useEffect`);
|
console.log(`${ViewBest.name}.useEffect`);
|
||||||
const selectBest = `
|
const selectWeights = `
|
||||||
SELECT max(weight) AS weight, STRFTIME('%Y-%m-%d', created) as created, unit
|
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
|
FROM sets
|
||||||
WHERE name = ?
|
WHERE name = ?
|
||||||
GROUP BY name, STRFTIME('%Y-%m-%d', created)
|
GROUP BY name, STRFTIME('%Y-%m-%d', created)
|
||||||
`;
|
`;
|
||||||
const refresh = async () => {
|
const refresh = async () => {
|
||||||
const [result] = await db.executeSql(selectBest, [params.best.name]);
|
const [weightsResult] = await db.executeSql(selectWeights, [
|
||||||
if (result.rows.length === 0) return;
|
params.best.name,
|
||||||
console.log(`${ViewBest.name}.${refresh.name}:`, result.rows.raw());
|
]);
|
||||||
setSets(result.rows.raw());
|
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();
|
refresh();
|
||||||
}, [params.best.name, db]);
|
}, [params.best.name, db]);
|
||||||
|
@ -61,16 +84,16 @@ export default function ViewBest() {
|
||||||
<Text>Best weight per day</Text>
|
<Text>Best weight per day</Text>
|
||||||
<View style={{height: 300, padding: 20, flexDirection: 'row'}}>
|
<View style={{height: 300, padding: 20, flexDirection: 'row'}}>
|
||||||
<YAxis
|
<YAxis
|
||||||
data={sets.map(set => set.weight)}
|
data={weights.map(set => set.weight)}
|
||||||
style={{marginBottom: xAxisHeight}}
|
style={{marginBottom: xAxisHeight}}
|
||||||
contentInset={verticalContentInset}
|
contentInset={verticalContentInset}
|
||||||
svg={axesSvg}
|
svg={axesSvg}
|
||||||
formatLabel={value => `${value}${sets[0].unit}`}
|
formatLabel={value => `${value}${weights[0].unit}`}
|
||||||
/>
|
/>
|
||||||
<View style={{flex: 1, marginLeft: 10}}>
|
<View style={{flex: 1, marginLeft: 10}}>
|
||||||
<LineChart
|
<LineChart
|
||||||
style={{flex: 1}}
|
style={{flex: 1}}
|
||||||
data={sets.map(set => set.weight)}
|
data={weights.map(set => set.weight)}
|
||||||
contentInset={verticalContentInset}
|
contentInset={verticalContentInset}
|
||||||
curve={shape.curveBasis}
|
curve={shape.curveBasis}
|
||||||
svg={{
|
svg={{
|
||||||
|
@ -82,8 +105,47 @@ export default function ViewBest() {
|
||||||
</LineChart>
|
</LineChart>
|
||||||
<XAxis
|
<XAxis
|
||||||
style={{marginHorizontal: -10, height: xAxisHeight}}
|
style={{marginHorizontal: -10, height: xAxisHeight}}
|
||||||
data={sets}
|
data={weights}
|
||||||
formatLabel={(_value, index) => formatMonth(sets[index].created!)}
|
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}}
|
contentInset={{left: 10, right: 10}}
|
||||||
svg={axesSvg}
|
svg={axesSvg}
|
||||||
/>
|
/>
|
||||||
|
|
Loading…
Reference in New Issue
Block a user