Move from react-native-gifted-charts to react-native-svg-charts

ViewBest.tsx

@@ -1,9 +1,10 @@
 import React, {useContext, useEffect, useState} from 'react';
-import {useColorScheme} from 'react-native';
-import {LineChart} from 'react-native-gifted-charts';
+import {useColorScheme, View} from 'react-native';
 import {Button, Dialog, Portal} from 'react-native-paper';
 import {DatabaseContext} from './App';
 import Best from './best';
+import {AreaChart, Grid, LineChart, YAxis} from 'react-native-svg-charts';
+import * as shape from 'd3-shape';
 
 export default function ViewBest({
   best,
@@ -12,52 +13,56 @@ export default function ViewBest({
   best?: Best;
   setBest: (best?: Best) => void;
 }) {
-  const [data, setData] = useState<
-    {value: number; label: string; labelComponent: any}[]
-  >([]);
+  const [data, setData] = useState<number[]>([]);
   const [labels, setLabels] = useState<string[]>([]);
+  const [unit, setUnit] = useState<string>();
   const db = useContext(DatabaseContext);
   const dark = useColorScheme() === 'dark';
 
-  const selectBest = `
-    SELECT max(weight) AS weight, STRFTIME('%Y-%m-%d', created) as created
-    FROM sets
-    WHERE name = ?
-    GROUP BY name, STRFTIME('%Y-%m-%d', created)
-  `;
-
-  const refresh = async () => {
-    const [result] = await db.executeSql(selectBest, [best?.name]);
-    if (result.rows.length === 0) return;
-    console.log('ViewBest.refresh', result.rows.raw());
-    setData(
-      result.rows.raw().map(row => ({
-        value: row.weight,
-        label: row.created,
-        labelComponent: () => null,
-      })),
-    );
-  };
-
   useEffect(() => {
+    const selectBest = `
+      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 refresh = async () => {
+      const [result] = await db.executeSql(selectBest, [best?.name]);
+      if (result.rows.length === 0) return;
+      console.log(`${ViewBest.name}.${refresh.name}:`, result.rows.raw());
+      setData(result.rows.raw().map(row => row.weight));
+      setUnit(result.rows.item(0).unit);
+    };
     refresh();
   }, [best]);
 
+  const contentInset = {top: 20, bottom: 20};
+
   return (
     <Portal>
       <Dialog visible={!!best} onDismiss={() => setBest(undefined)}>
         <Dialog.Title>{best?.name}</Dialog.Title>
         <Dialog.Content>
-          <LineChart
-            data={data}
-            curved
-            isAnimated
-            yAxisLabelSuffix="kg"
-            color={dark ? '#3498db' : 'black'}
-            dataPointsColor={dark ? '#f1c40f' : 'black'}
-            thickness={5}
-            width={240}
-          />
+          <View style={{height: 200, flexDirection: 'row'}}>
+            <YAxis
+              data={data}
+              contentInset={contentInset}
+              svg={{
+                fill: 'grey',
+                fontSize: 10,
+              }}
+              numberOfTicks={10}
+              formatLabel={value => `${value}${unit}`}
+            />
+            <LineChart
+              style={{flex: 1, marginLeft: 16}}
+              data={data}
+              svg={{stroke: 'rgb(134, 65, 244)'}}
+              curve={shape.curveNatural}
+              contentInset={contentInset}>
+              <Grid />
+            </LineChart>
+          </View>
         </Dialog.Content>
         <Dialog.Actions>
           <Button icon="close" onPress={() => setBest(undefined)}>

package.json

@@ -15,7 +15,9 @@
     "@react-navigation/material-top-tabs": "^6.2.1",
     "@react-navigation/native": "^6.0.10",
     "@react-navigation/native-stack": "^6.6.2",
+    "@types/d3-shape": "^3.1.0",
     "@types/react-native-sqlite-storage": "^5.0.2",
+    "@types/react-native-svg-charts": "^5.0.12",
     "@types/react-native-vector-icons": "^6.4.11",
     "babel-plugin-transform-remove-console": "^6.9.4",
     "date-fns": "^2.28.0",
@@ -23,7 +25,6 @@
     "react-devtools": "^4.24.7",
     "react-native": "0.69.1",
     "react-native-gesture-handler": "^2.5.0",
-    "react-native-gifted-charts": "^1.2.41",
     "react-native-linear-gradient": "^2.6.2",
     "react-native-pager-view": "^5.4.24",
     "react-native-paper": "^4.12.2",
@@ -32,6 +33,7 @@
     "react-native-screens": "^3.14.0",
     "react-native-sqlite-storage": "^6.0.1",
     "react-native-svg": "^12.3.0",
+    "react-native-svg-charts": "^5.4.0",
     "react-native-tab-view": "^3.1.1",
     "react-native-vector-icons": "^9.2.0"
   },