@spaced-out/ui-design-system/lib/components/Charts/ColumnChart/ColumnChart.js.flow

Sense UI components library

// @flow strict

import * as React from 'react';
//$FlowFixMe[untyped-import]
import Highcharts from 'highcharts';
//$FlowFixMe[untyped-import]
import HighchartsReact from 'highcharts-react-official';

import type {
  ChartOptions,
  DataOptionsType,
  Drilldown,
} from '../../../types/charts';
import {
  columnPlotWidth,
  getColumnChartOptions,
  getDataVizColor,
  mergeChartUserOptions,
} from '../../../utils/charts';
import classify from '../../../utils/classify';
import {
  type ChartWrapperClassNames,
  type ExportOptionType,
  ChartWrapper,
} from '../ChartWrapper';

import css from './ColumnChart.module.css';


export type ClassNames = $ReadOnly<{
  ...ChartWrapperClassNames,
  highChart?: string,
}>;

export type ColumnSeries = {
  name: string,
  data: DataOptionsType[],
};

export type ColumnChartProps = {
  ...ChartOptions,
  isLoading?: boolean,
  classNames?: ClassNames,
  cardTitle?: React.Node,
  customExportOptions?: Array<ExportOptionType> | null,
  series: Array<ColumnSeries>,
  drilldown?: Drilldown,
  headerActions?: React.Node,
  hasEmptyData?: boolean,
  emptyText?: React.Node,
  ...
};

export const ColumnChart = ({
  isLoading,
  classNames,
  cardTitle,
  customExportOptions,
  series,
  drilldown,
  headerActions,
  hasEmptyData,
  emptyText,
  ...userOptions
}: ColumnChartProps): React.Node => {
  const chartRef = React.createRef();

  const columnChartSeries = series.map((seriesItem, index) => ({
    ...seriesItem,
    name: seriesItem.name,
    data: seriesItem.data,
    color: getDataVizColor(index),
    pointWidth: columnPlotWidth,
  }));

  const addColorToDrilldownSeries = (series) =>
    series?.map((seriesItem) => ({
      ...seriesItem,
      data: seriesItem.data.map((dataItem, index) => ({
        ...dataItem,
        color: getDataVizColor(index),
        pointWidth: columnPlotWidth,
      })),
    }));

  const columnDrilldown = drilldown
    ? {
      ...drilldown,
      series: addColorToDrilldownSeries(drilldown.series),
      breadcrumbs: {floating: false},
    }
    : {};

  const defaultColumnChartOptions = getColumnChartOptions();

  //$FlowFixMe[cannot-spread-inexact]
  const chartOptions = mergeChartUserOptions(defaultColumnChartOptions, {
    series: columnChartSeries,
    drilldown: columnDrilldown,
    ...userOptions,
  });

  const {highChart, ...wrapperClassNames} = classNames || {};

  return (
    <ChartWrapper
      isLoading={isLoading}
      title={cardTitle}
      ref={chartRef}
      classNames={wrapperClassNames}
      customExportOptions={customExportOptions}
      headerActions={headerActions}
      hasEmptyData={hasEmptyData}
      emptyText={emptyText}
    >
      <HighchartsReact
        highcharts={Highcharts}
        containerProps={{
          className: classify(css.columnChartContainer, highChart),
        }}
        ref={chartRef}
        options={chartOptions}
      />
    </ChartWrapper>
  );
};