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

Sense UI components library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.getFunnelChartOptions = exports.addColorsToFunnelSeries = exports.addColorsToFunnelDrilldownSeries = void 0;
var _color = require("../../styles/variables/_color.js");
var _charts = require("./charts");
var _helpers = require("./helpers");
var _typography = require("./typography");
/**
 * This function modifies the the common chart behavior to funnel chart default behavior.
 * It will not take userPassed option into account.
 */
const getFunnelChartOptions = () => ({
  ..._charts.commonChartOptions,
  chart: {
    type: 'funnel'
  },
  legend: {
    ..._charts.commonChartOptions.legend,
    ..._helpers.bottomLegendRow,
    symbolWidth: 18
  },
  xAxis: {
    ..._charts.commonChartOptions.xAxis,
    labels: {
      style: _typography.formLabelSmall
    },
    title: {
      margin: 12,
      style: _helpers.xAxisTitleStyle
    },
    lineColor: _color.colorBorderPrimary
  },
  yAxis: {
    labels: {
      align: 'right',
      distance: 12,
      style: _helpers.yAxisLabelStyle
    },
    title: {
      margin: 12,
      style: _helpers.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'
        }
      }
    }
  }
});
exports.getFunnelChartOptions = getFunnelChartOptions;
const addColorsToFunnelSeries = function (series) {
  let showInLegend = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
  return series.map(item => ({
    ...item,
    data: item.data.map((seriesItem, index) => ({
      ...seriesItem,
      color: (0, _charts.getDataVizColor)(index) // Apply color based on index
    })),
    showInLegend // Ensure legend visibility
  }));
};
exports.addColorsToFunnelSeries = addColorsToFunnelSeries;
const addColorsToFunnelDrilldownSeries = function (drilldownSeries) {
  let showInLegend = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
  return {
    series: drilldownSeries.series?.map(series => ({
      ...series,
      data: series.data.map((dataPoint, index) => ({
        ...dataPoint,
        color: (0, _charts.getDataVizColor)(index) // Assign a color dynamically based on index
      })),
      showInLegend // Ensure legend is displayed
    }))
  };
};
exports.addColorsToFunnelDrilldownSeries = addColorsToFunnelDrilldownSeries;