Add volume per day to graphs

ViewBest.tsx

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