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

Sense UI components library

// @flow strict

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

import type {
  ChartOptions,
  DataOptionsType,
  Drilldown,
} from '../../../types/charts';
import {mergeChartUserOptions} from '../../../utils/charts';
import {
  addColorsToFunnelDrilldownSeries,
  addColorsToFunnelSeries,
  getFunnelChartOptions,
} from '../../../utils/charts/funnelChart';
import classify from '../../../utils/classify';
import {
  type ChartWrapperClassNames,
  type ExportOptionType,
  ChartWrapper,
} from '../ChartWrapper';

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


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

export type FunnelSeriesItem = {
  name?: string,
  showInLegend?: boolean,
  data: Array<DataOptionsType>,
};

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

export const FunnelChart = ({
  isLoading,
  classNames,
  cardTitle,
  customExportOptions,
  series,
  headerActions,
  drilldown,
  showLegend = true,
  hasEmptyData,
  emptyText,
  ...userOptions
}: FunnelChartProps): React.Node => {
  Funnel(Highcharts);
  const chartRef = React.createRef();

  const funnelChartSeries = addColorsToFunnelSeries(series, showLegend);

  const defaultFunnelChartOptions = getFunnelChartOptions();

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

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