add line graph, associated changes to utils/config/styles & test

2024-01-18 16:21:01 -08:00
parent d9a4247b8e
commit b80b05fbd8
9 changed files with 185 additions and 13 deletions
--- a/component/charts/line-graph/line-graph.tsx
+++ b/component/charts/line-graph/line-graph.tsx
@@ -0,0 +1,90 @@
+import React from 'react';
+import * as shape from 'd3-shape';
+import { View } from 'react-native';
+import { LineChart, XAxis, YAxis } from 'react-native-svg-charts';
+
+import { useGraphData } from '../use-graph-data';
+import { CustomGrid } from '../custom-grid';
+import { graphStyles } from '../chart-styles';
+import ChartView from '../chart-view';
+import { CommonProps } from '../graph-types';
+
+// TODO: separate PR will update useGraphData to take into account useCommonScale
+// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
+const LineGraph: React.FC<CommonProps> = ({ data, useCommonScale = false, testID, ...props }) => {
+  if (!data || typeof data !== 'object') {
+    return null
+  }; // TODO:#38
+  const {
+    xValues,
+    yData,
+    yAxisLeftLabels,
+    yAxisRightLabels,
+    defaultProps: {
+      height,
+      contentInset,
+      min,
+      numberOfTicks,
+      lineStrokeWidth,
+      yAxisProps: {
+        maxLeftYAxisValue,
+        maxRightYAxisValue,
+        formatLeftYAxisLabel,
+        formatRightYAxisLabel
+      }
+    }
+  // Proper error/loading handling from useQueryHandler can work with this rule #38
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  } = useGraphData(data, props);
+
+  return (
+    <ChartView>
+      <View style={[graphStyles.rowContainer, { height: height }]} testID={`line-graph-${testID}`}>
+        <YAxis
+          data={yAxisLeftLabels.values}
+          contentInset={contentInset}
+          svg={graphStyles.yAxisFontStyle}
+          style={graphStyles.yAxisLeftPadding}
+          min={min}
+          max={maxLeftYAxisValue}
+          numberOfTicks={numberOfTicks}
+          formatLabel={formatLeftYAxisLabel}
+        />
+        <View style={graphStyles.flex}>
+          <LineChart
+            style={graphStyles.flex}
+            data={yData}
+            curve={shape.curveNatural}
+            svg={{ strokeWidth: lineStrokeWidth}}
+            yAccessor={({ item }) => (item as unknown as { value: number }).value}
+            xAccessor={({ index }) => xValues[index] as number}
+            gridMin={min}
+            contentInset={contentInset}
+            numberOfTicks={numberOfTicks}
+          >
+            <CustomGrid />
+          </LineChart>
+          <XAxis
+            data={xValues.map((_, index: number) => index)} // TODO: update when useGraphHook returns explicit display values
+            style={[graphStyles.xAxisMarginTop]}
+            svg={graphStyles.xAxisFontStyle}
+            numberOfTicks={numberOfTicks}
+            contentInset={graphStyles.horizontalInset}
+          />
+        </View>
+        <YAxis
+          data={yAxisRightLabels?.values ?? yAxisLeftLabels.values}
+          contentInset={contentInset}
+          svg={graphStyles.yAxisFontStyle}
+          style={[graphStyles.yAxisRightPadding, { height: useCommonScale ? 0 : 'auto' }]}
+          min={min}
+          max={maxRightYAxisValue}
+          numberOfTicks={numberOfTicks}
+          formatLabel={formatRightYAxisLabel} // formatRightYAxisLabel formatting could come from yAxisRightLabels object
+        />
+      </View>
+    </ChartView>
+  );
+};
+
+export default LineGraph;