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

Sense UI components library

// @flow strict

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

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

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


if (
  !!highChartsMore &&
  !!Highcharts &&
  typeof highChartsMore === 'function' &&
  typeof Highcharts === 'object'
) {
  highChartsMore(Highcharts);
}

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

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

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

export const SpiderChart = ({
  isLoading,
  classNames,
  cardTitle,
  customExportOptions,
  headerActions,
  series,
  hasEmptyData,
  emptyText,
  ...userOptions
}: SpiderChartProps): React.Node => {
  const chartRef = React.useRef(null);

  const spiderSeries = series.map((seriesItem, index) => ({
    ...seriesItem,
    name: seriesItem.name,
    data: seriesItem.data,
    pointPlacement: 'on',
    color: getDataVizColor(index),
  }));

  const defaultSpiderChartOptions = getSpiderChartOptions();

  //$FlowFixMe[cannot-spread-inexact]
  const chartOptions = mergeChartUserOptions(defaultSpiderChartOptions, {
    series: spiderSeries,
    ...userOptions,
  });

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

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