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

import { useMemo } from 'react';

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



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