railbird-gql/component/charts/use-graph-data.ts

import { useMemo } from "react";

import { chartDefaults } from "./graph-config";
import { GraphData, GraphProps, XValue, YAxisData } from "./graph-types";
import { convertToGraphData } from "./graph-utils";

interface useGraphDataInterface {
	xValues: Array<XValue>;
	yData: {
		data: {
			value: number;
		}[];
		svg: {
			fill: string;
		};
	}[];
	yAxisLeftLabels: YAxisData;
	yAxisRightLabels: YAxisData;
	defaultProps: Partial<GraphProps>;
}

// this version assumes string values for X, this isn't necessarily the case
// convertToGraphData is specifically tailored to bar/group bar graphs
// ultimately this component could be used by any x & y axis graph types (line/bar/scatter)
export const useGraphData = (
	graphData: GraphData,
	props: Partial<GraphProps>,
): useGraphDataInterface => {
	const { yAxisProps = {}, ...otherProps } = props;
	const defaultProps = {
		...chartDefaults,
		...otherProps,
		// assign default values for yAxisProps + spread to override with values coming from props
		yAxisProps: {
			maxLeftYAxisValue: Math.max(...(graphData.yValues[0]?.values ?? [0])),
			maxRightYAxisValue:
				graphData.yValues.length > 1
					? Math.max(...graphData.yValues[1]?.values)
					: undefined,
			formatRightYAxisLabel: yAxisProps.formatRightYAxisLabel,
			formatLeftYAxisLabel: yAxisProps.formatLeftYAxisLabel,
			selectedLeftYAxisLabel: graphData.yValues[0]?.key,
			selectedRightYAxisLabel: graphData.yValues[1]?.key,
			...yAxisProps,
		},
	};

	const { yData, yAxisLeftLabels, yAxisRightLabels, xValues } = useMemo(
		() =>
			convertToGraphData(graphData, {
				...defaultProps.yAxisProps,
				includeColors: defaultProps.includeColors,
				barColors: defaultProps.barColors,
			}),
		[
			graphData,
			defaultProps.yAxisProps,
			defaultProps.includeColors,
			defaultProps.barColors,
		],
	);

	return {
		xValues,
		yData,
		yAxisLeftLabels,
		yAxisRightLabels,
		defaultProps,
	};
};