@spaced-out/ui-design-system/lib/components/Charts/LineChart/LineChart.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 {
  getDataVizColor,
  getLineChartOptions,
  mergeChartUserOptions,
} from '../../../utils/charts';
import classify from '../../../utils/classify';
import {
  type ChartWrapperClassNames,
  type ExportOptionType,
  ChartWrapper,
} from '../ChartWrapper';

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


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

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

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

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

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

  const defaultLineChartOptions = getLineChartOptions();

  const columnDrilldown = drilldown
    ? {
      ...drilldown,
      breadcrumbs: {floating: false},
    }
    : {};

  //$FlowFixMe[cannot-spread-inexact]
  const chartOptions = mergeChartUserOptions(defaultLineChartOptions, {
    series: lineChartSeries,
    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.lineChartContainer, highChart),
        }}
        ref={chartRef}
        options={chartOptions}
      />
    </ChartWrapper>
  );
};