@spaced-out/ui-design-system/lib/utils/charts/funnelChart.js.flow

Sense UI components library

// @flow strict
import type {FunnelSeriesItem} from '../../components/Charts/FunnelChart/FunnelChart.js';
import {colorBorderPrimary} from '../../styles/variables/_color.js';
import type {
  ChartOptions,
  DataOptionsType,
  Drilldown,
} from '../../types/charts';

import {commonChartOptions, getDataVizColor} from './charts';
import {
  bottomLegendRow,
  xAxisTitleStyle,
  yAxisLabelStyle,
  yAxisTitleStyle,
} from './helpers';
import {formLabelSmall} from './typography';

/**
 * This function modifies the the common chart behavior to funnel chart default behavior.
 * It will not take userPassed option into account.
 */

export const getFunnelChartOptions = (): ChartOptions => ({
  ...commonChartOptions,
  chart: {
    type: 'funnel',
  },
  legend: {
    ...commonChartOptions.legend,
    ...bottomLegendRow,
    symbolWidth: 18,
  },
  xAxis: {
    ...commonChartOptions.xAxis,
    labels: {
      style: formLabelSmall,
    },
    title: {
      margin: 12,
      style: xAxisTitleStyle,
    },
    lineColor: colorBorderPrimary,
  },
  yAxis: {
    labels: {
      align: 'right',
      distance: 12,
      style: yAxisLabelStyle,
    },
    title: {
      margin: 12,
      style: yAxisTitleStyle,
    },
  },
  plotOptions: {
    funnel: {
      neckWidth: '15%',
      neckHeight: '10%',
      minSize: '50%',
      width: '55%',
      dataLabels: {
        enabled: true,
        useHTML: true, // Allows custom HTML formatting
        format: `<div style="text-align: center">
          <span>{point.name}</span><br>
          <span>{point.y}</span>
          </div>`,
        style: {
          fontWeight: 'bold',
        },
      },
    },
  },
});

export const addColorsToFunnelSeries = (
  series: Array<FunnelSeriesItem>,
  showInLegend?: boolean = true,
): Array<FunnelSeriesItem> =>
  series.map((item: FunnelSeriesItem) => ({
    ...item,
    data: item.data.map((seriesItem: DataOptionsType, index: number) => ({
      ...seriesItem,
      color: getDataVizColor(index), // Apply color based on index
    })),
    showInLegend, // Ensure legend visibility
  }));

export const addColorsToFunnelDrilldownSeries = (
  drilldownSeries: Drilldown,
  showInLegend?: boolean = true,
): Drilldown => ({
  series: drilldownSeries.series?.map((series) => ({
    ...series,
    data: series.data.map((dataPoint, index) => ({
      ...dataPoint,
      color: getDataVizColor(index), // Assign a color dynamically based on index
    })),
    showInLegend, // Ensure legend is displayed
  })),
});