Stop attempt at adding chart previews

The line graphs would dissapear on the flat list,
and would escape small view containers.
This commit is contained in:
Brandon Presley 2022-10-13 16:55:26 +13:00
parent a65274c2d6
commit 7b874d27cc
3 changed files with 53 additions and 30 deletions

View File

@ -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)}
/>
);

View File

@ -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>
</>

View File

@ -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