wip: minor changes

src/component/charts/container/chart-container.tsx

@@ -0,0 +1,91 @@
+import React from "react";
+import { View } from "react-native";
+import { YAxis } from "react-native-svg-charts";
+
+import { graphStyles } from "../chart-styles";
+import ChartView from "../chart-view";
+import { ChartContainerProps } from "../graph-types";
+import { useGraphData } from "../use-graph-data";
+
+// TODO: separate PR will update useGraphData to take into account useCommonScale
+// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
+const ChartContainer: React.FC<ChartContainerProps> = ({
+	ChartComponent,
+	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);
+
+	// TODO: This could be done by the hook since it already handles spreading props.
+	// Depending on if we want a context provider for Charts, that could be another way to handle it
+	const chartComponentProps = {
+		yData,
+		xValues,
+		lineStrokeWidth,
+		min,
+		contentInset,
+		numberOfTicks,
+	};
+	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}>
+					<ChartComponent {...chartComponentProps} />
+				</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}
+				/>
+			</View>
+		</ChartView>
+	);
+};
+
+export default ChartContainer;

src/component/charts/graph-types.ts

@@ -76,3 +76,12 @@ export interface CommonProps {
 	yAxisProps?: YAxisProps;
 	testID?: string;
 }
+/**
+ * Common properties for graph render components.
+ *
+ * @interface ChartContainerProps
+ * @property {React.FC} ChartComponent - The graph component to render
+ */
+export interface ChartContainerProps extends CommonProps {
+	ChartComponent?: React.FC;
+}

src/component/charts/line-graph/line-graph.tsx

@@ -1,102 +1,38 @@
 import * as shape from "d3-shape";
 import React from "react";
-import { View } from "react-native";
+import { LineChart, XAxis } from "react-native-svg-charts";
-import { LineChart, XAxis, YAxis } from "react-native-svg-charts";
-
 import { graphStyles } from "../chart-styles";
-import ChartView from "../chart-view";
 import { CustomGrid } from "../custom-grid";
 import { CommonProps } from "../graph-types";
-import { useGraphData } from "../use-graph-data";
 
 // 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> = ({
+const LineGraph: React.FC<CommonProps> = ({ ...chartComponentProps }) => {
-	data,
+	const { yData, xValues, lineStrokeWidth, min, contentInset, numberOfTicks } =
-	useCommonScale = false,
+		chartComponentProps;
-	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
+			<LineChart
-				style={[graphStyles.rowContainer, { height: height }]}
+				style={graphStyles.flex}
-				testID={`line-graph-${testID}`}
+				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}
 			>
-				<YAxis
+				<CustomGrid />
-					data={yAxisLeftLabels.values}
+			</LineChart>
-					contentInset={contentInset}
+			<XAxis
-					svg={graphStyles.yAxisFontStyle}
+				data={xValues.map((_, index: number) => index)} // TODO: update when useGraphHook returns explicit display values
-					style={graphStyles.yAxisLeftPadding}
+				style={[graphStyles.xAxisMarginTop]}
-					min={min}
+				svg={graphStyles.xAxisFontStyle}
-					max={maxLeftYAxisValue}
+				numberOfTicks={numberOfTicks}
-					numberOfTicks={numberOfTicks}
+				contentInset={graphStyles.horizontalInset}
-					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>
 	);
 };
 

src/screens/session.tsx

@@ -1,14 +1,15 @@
 import React from "react";
 import { StyleSheet, View } from "react-native";
-import { graph_data_two_measures } from "../../test/mock/charts/mock-data";
+import { line_chart_two_y_data } from "../../test/mock/charts/mock-data";
-import BarGraph from "../component/charts/bar-graph/bar-graph";
+import ChartContainer from "../component/charts/container/chart-container";
+import LineGraph from "../component/charts/line-graph/line-graph";
 
 // Session Mock - can be used for session summary screen using a query handler component
 // BarGraph component using mocked data currently
 export default function SessionScreen() {
 	return (
 		<View style={StyleSheet.absoluteFill}>
-			<BarGraph data={graph_data_two_measures} />
+			<ChartContainer data={line_chart_two_y_data} ChartComponent={LineGraph} />
 		</View>
 	);
 }