Compare commits
1 Commits
master
...
chart-prev
Author | SHA1 | Date | |
---|---|---|---|
7b874d27cc |
33
BestList.tsx
33
BestList.tsx
|
@ -4,25 +4,26 @@ import {
|
|||
useNavigation,
|
||||
} from '@react-navigation/native';
|
||||
import React, {useCallback, useEffect, useState} from 'react';
|
||||
import {FlatList, Image} from 'react-native';
|
||||
import {FlatList} from 'react-native';
|
||||
import {List} from 'react-native-paper';
|
||||
import {getBestReps, getBestWeights} from './best.service';
|
||||
import {getBestReps, getBestWeights, getMaxWeights} from './best.service';
|
||||
import {BestPageParams} from './BestPage';
|
||||
import Chart from './Chart';
|
||||
import Page from './Page';
|
||||
import Set from './set';
|
||||
import {useSettings} from './use-settings';
|
||||
|
||||
export default function BestList() {
|
||||
const [bests, setBests] = useState<Set[]>();
|
||||
const [maxWeights, setMaxWeights] = useState<Set[]>();
|
||||
const [search, setSearch] = useState('');
|
||||
const navigation = useNavigation<NavigationProp<BestPageParams>>();
|
||||
const {settings} = useSettings();
|
||||
|
||||
const refresh = useCallback(async () => {
|
||||
const weights = await getBestWeights(search);
|
||||
console.log(`${BestList.name}.refresh:`, {length: weights.length});
|
||||
getMaxWeights().then(setMaxWeights);
|
||||
const bestWeights = await getBestWeights(search);
|
||||
console.log(`${BestList.name}.refresh:`, {length: bestWeights.length});
|
||||
let newBest: Set[] = [];
|
||||
for (const set of weights) {
|
||||
for (const set of bestWeights) {
|
||||
const reps = await getBestReps(set.name, set.weight);
|
||||
newBest.push(...reps);
|
||||
}
|
||||
|
@ -42,18 +43,24 @@ export default function BestList() {
|
|||
refresh();
|
||||
}, [search, refresh]);
|
||||
|
||||
const left = useCallback(
|
||||
(name: string) => {
|
||||
const xData = maxWeights?.filter(set => set.name === name) || [];
|
||||
console.log(`${BestList.name}:`, {xData});
|
||||
const yData = xData.map(set => set.weight);
|
||||
console.log(`${BestList.name}:`, {yData});
|
||||
return <Chart xData={xData} yData={yData} height={50} />;
|
||||
},
|
||||
[maxWeights],
|
||||
);
|
||||
|
||||
const renderItem = ({item}: {item: Set}) => (
|
||||
<List.Item
|
||||
key={item.name}
|
||||
title={item.name}
|
||||
description={`${item.reps} x ${item.weight}${item.unit || 'kg'}`}
|
||||
onPress={() => navigation.navigate('ViewBest', {best: item})}
|
||||
left={() =>
|
||||
(settings.images && item.image && (
|
||||
<Image source={{uri: item.image}} style={{height: 75, width: 75}} />
|
||||
)) ||
|
||||
null
|
||||
}
|
||||
right={() => left(item.name)}
|
||||
/>
|
||||
);
|
||||
|
||||
|
|
41
Chart.tsx
41
Chart.tsx
|
@ -11,11 +11,13 @@ export default function Chart({
|
|||
xFormat,
|
||||
xData,
|
||||
yFormat,
|
||||
height,
|
||||
}: {
|
||||
yData: number[];
|
||||
xData: Set[];
|
||||
xFormat: (value: any, index: number) => string;
|
||||
yFormat: (value: any) => string;
|
||||
xFormat?: (value: any, index: number) => string;
|
||||
yFormat?: (value: any) => string;
|
||||
height?: number;
|
||||
}) {
|
||||
const {color} = useContext(CustomTheme);
|
||||
const axesSvg = {fontSize: 10, fill: 'grey'};
|
||||
|
@ -24,14 +26,17 @@ export default function Chart({
|
|||
|
||||
return (
|
||||
<>
|
||||
<View style={{height: 300, padding: PADDING, flexDirection: 'row'}}>
|
||||
<YAxis
|
||||
data={yData}
|
||||
style={{marginBottom: xAxisHeight}}
|
||||
contentInset={verticalContentInset}
|
||||
svg={axesSvg}
|
||||
formatLabel={yFormat}
|
||||
/>
|
||||
<View
|
||||
style={{height: height || 300, padding: PADDING, flexDirection: 'row'}}>
|
||||
{yFormat && (
|
||||
<YAxis
|
||||
data={yData}
|
||||
style={{marginBottom: xAxisHeight}}
|
||||
contentInset={verticalContentInset}
|
||||
svg={axesSvg}
|
||||
formatLabel={yFormat}
|
||||
/>
|
||||
)}
|
||||
<View style={{flex: 1, marginLeft: MARGIN}}>
|
||||
<LineChart
|
||||
style={{flex: 1}}
|
||||
|
@ -43,13 +48,15 @@ export default function Chart({
|
|||
}}>
|
||||
<Grid />
|
||||
</LineChart>
|
||||
<XAxis
|
||||
style={{marginHorizontal: -10, height: xAxisHeight}}
|
||||
data={xData}
|
||||
formatLabel={xFormat}
|
||||
contentInset={{left: 10, right: 10}}
|
||||
svg={axesSvg}
|
||||
/>
|
||||
{xFormat && (
|
||||
<XAxis
|
||||
style={{marginHorizontal: -10, height: xAxisHeight}}
|
||||
data={xData}
|
||||
formatLabel={xFormat}
|
||||
contentInset={{left: 10, right: 10}}
|
||||
svg={axesSvg}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
</>
|
||||
|
|
|
@ -4,6 +4,15 @@ import Set from './set';
|
|||
import {defaultSet} from './set.service';
|
||||
import Volume from './volume';
|
||||
|
||||
export const getMaxWeights = async (): Promise<Set[]> => {
|
||||
const select = `
|
||||
SELECT MAX(weight) AS weight, name, STRFTIME('%Y-%m', created) AS created
|
||||
FROM sets GROUP BY name, STRFTIME('%Y-%m', created);
|
||||
`;
|
||||
const [result] = await db.executeSql(select, []);
|
||||
return result.rows.raw();
|
||||
};
|
||||
|
||||
export const getBestSet = async (name: string): Promise<Set> => {
|
||||
const bestWeight = `
|
||||
SELECT name, reps, unit, MAX(weight) AS weight
|
||||
|
|
Loading…
Reference in New Issue
Block a user