Stop attempt at adding chart previews

The line graphs would dissapear on the flat list,
and would escape small view containers.

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);
+    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[] = [];
-    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={() =>
+      right={() => left(item.name)}
-        (settings.images && item.image && (
-          <Image source={{uri: item.image}} style={{height: 75, width: 75}} />
-        )) ||
-        null
-      }
     />
   );
 

Chart.tsx

@@ -11,11 +11,13 @@ export default function Chart({
   xFormat,
   xData,
   yFormat,
+  height,
 }: {
   yData: number[];
   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 axesSvg = {fontSize: 10, fill: 'grey'};
@@ -24,14 +26,17 @@ export default function Chart({
 
   return (
     <>
-      <View style={{height: 300, padding: PADDING, flexDirection: 'row'}}>
+      <View
-        <YAxis
+        style={{height: height || 300, padding: PADDING, flexDirection: 'row'}}>
-          data={yData}
+        {yFormat && (
-          style={{marginBottom: xAxisHeight}}
+          <YAxis
-          contentInset={verticalContentInset}
+            data={yData}
-          svg={axesSvg}
+            style={{marginBottom: xAxisHeight}}
-          formatLabel={yFormat}
+            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
+          {xFormat && (
-            style={{marginHorizontal: -10, height: xAxisHeight}}
+            <XAxis
-            data={xData}
+              style={{marginHorizontal: -10, height: xAxisHeight}}
-            formatLabel={xFormat}
+              data={xData}
-            contentInset={{left: 10, right: 10}}
+              formatLabel={xFormat}
-            svg={axesSvg}
+              contentInset={{left: 10, right: 10}}
-          />
+              svg={axesSvg}
+            />
+          )}
         </View>
       </View>
     </>

best.service.ts

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