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

import { GraphData } from "./graph-types";

export const convertToGraphData = (
	graphData: GraphData,
	options: {
		selectedLeftYAxisLabel?: string;
		selectedRightYAxisLabel?: string;
		maxRightYAxisValue: number;
		maxLeftYAxisValue: number;
		includeColors: boolean;
		barColors: Array<string>;
	},
) => {
	const xValues = graphData.xValues;
	const leftAxisIndex = graphData.yValues.findIndex(
		(y) => y.key === options.selectedLeftYAxisLabel,
	);
	const rightAxisIndex = graphData.yValues.findIndex(
		(y) => y.key === options.selectedRightYAxisLabel,
	);

	// scale data points according to max value
	const yData = graphData.yValues.map((yAxis, index) => {
		const maxValue =
			index === rightAxisIndex
				? options.maxRightYAxisValue
				: options.maxLeftYAxisValue;

		// scale values as a percentage of the max value
		const scaledValues = yAxis.values.map((value) => (value / maxValue) * 100);

		const strokeColor =
			options.includeColors && options.barColors
				? options.barColors[index % options.barColors.length]
				: "transparent";

		const mappedData = scaledValues.map((scaledValue) => ({
			value: scaledValue,
		}));

		return {
			data: mappedData,
			svg: { fill: "transparent", stroke: strokeColor }, // Apply the stroke color here
		};
	});
	const yAxisLeftLabels =
		leftAxisIndex !== -1 ? graphData.yValues[leftAxisIndex] : null;
	const yAxisRightLabels =
		rightAxisIndex !== -1 ? graphData.yValues[rightAxisIndex] : undefined;

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