railbird-gql/component/charts/line-graph/line-graph.tsx

import * as shape from "d3-shape";
import React from "react";
import { View } from "react-native";
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> = ({
	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;