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