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 };
};