@spaced-out/ui-design-system 0.3.17 → 0.3.18

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.3.18](https://github.com/spaced-out/ui-design-system/compare/v0.3.17...v0.3.18) (2025-01-23)
+
+
+### Features
+
+* funnel chart ([#311](https://github.com/spaced-out/ui-design-system/issues/311)) ([7a19cb8](https://github.com/spaced-out/ui-design-system/commit/7a19cb820393249579a54929e968ce4a3afa2337))
+
 ### [0.3.17](https://github.com/spaced-out/ui-design-system/compare/v0.3.16...v0.3.17) (2025-01-16)
 
 

package/CONTRIBUTING.md

@@ -174,7 +174,7 @@ For every change in `ui_design_system` that you want to propagate to `consumer`
 > in `consumer`
 
 ```bash
-  yarn upgrade @spaced-out/ui-design-system@file:../../ui-design-system
+  yarn upgrade @spaced-out/ui-design-system@file:../ui-design-system
 ```
 
 ## Troubleshooting local development

package/lib/components/Charts/FunnelChart/FunnelChart.js

@@ -0,0 +1,75 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FunnelChart = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _highcharts = _interopRequireDefault(require("highcharts"));
+var _funnel = _interopRequireDefault(require("highcharts/modules/funnel"));
+var _highchartsReactOfficial = _interopRequireDefault(require("highcharts-react-official"));
+var _charts = require("../../../utils/charts");
+var _funnelChart = require("../../../utils/charts/funnelChart");
+var _classify = _interopRequireDefault(require("../../../utils/classify"));
+var _ChartWrapper = require("../ChartWrapper");
+var _FunnelChartModule = _interopRequireDefault(require("./FunnelChart.module.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+//$FlowFixMe[untyped-import]
+
+//$FlowFixMe[untyped-import]
+
+//$FlowFixMe[untyped-import]
+
+const FunnelChart = _ref => {
+  let {
+    isLoading,
+    classNames,
+    cardTitle,
+    customExportOptions,
+    series,
+    headerActions,
+    drilldown,
+    showLegend = true,
+    ...userOptions
+  } = _ref;
+  (0, _funnel.default)(_highcharts.default);
+  const chartRef = /*#__PURE__*/React.createRef();
+  const funnelChartSeries = (0, _funnelChart.addColorsToFunnelSeries)(series, showLegend);
+  const defaultFunnelChartOptions = (0, _funnelChart.getFunnelChartOptions)();
+  const columnDrilldown = drilldown ? {
+    ...(0, _funnelChart.addColorsToFunnelDrilldownSeries)(drilldown, showLegend),
+    breadcrumbs: {
+      floating: false
+    }
+  } : {};
+
+  //$FlowFixMe[cannot-spread-inexact]
+  const chartOptions = (0, _charts.mergeChartUserOptions)(defaultFunnelChartOptions, {
+    series: funnelChartSeries,
+    drilldown: columnDrilldown,
+    ...userOptions
+  });
+  const {
+    highChart,
+    ...wrapperClassNames
+  } = classNames || {};
+  return /*#__PURE__*/React.createElement(_ChartWrapper.ChartWrapper, {
+    isLoading: isLoading,
+    title: cardTitle,
+    ref: chartRef,
+    classNames: wrapperClassNames,
+    customExportOptions: customExportOptions,
+    headerActions: headerActions
+  }, /*#__PURE__*/React.createElement(_highchartsReactOfficial.default, {
+    highcharts: _highcharts.default,
+    containerProps: {
+      className: (0, _classify.default)(_FunnelChartModule.default.funnelChartContainer, highChart)
+    },
+    ref: chartRef,
+    options: chartOptions
+  }));
+};
+exports.FunnelChart = FunnelChart;

package/lib/components/Charts/FunnelChart/FunnelChart.js.flow

@@ -0,0 +1,109 @@
+// @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,
+  ...
+};
+
+export const FunnelChart = ({
+  isLoading,
+  classNames,
+  cardTitle,
+  customExportOptions,
+  series,
+  headerActions,
+  drilldown,
+  showLegend = true,
+  ...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}
+    >
+      <HighchartsReact
+        highcharts={Highcharts}
+        containerProps={{
+          className: classify(css.funnelChartContainer, highChart),
+        }}
+        ref={chartRef}
+        options={chartOptions}
+      />
+    </ChartWrapper>
+  );
+};

package/lib/components/Charts/FunnelChart/FunnelChart.module.css

@@ -0,0 +1,17 @@
+@value (colorFillPrimary) from '../../../styles/variables/_color.css';
+@value (size400, size660, sizeFluid) from  '../../../styles/variables/_size.css';
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+}
+
+.funnelChartContainer {
+  width: sizeFluid;
+  min-width: size660;
+  min-height: size400;
+  max-height: size400;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

package/lib/components/Charts/FunnelChart/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _FunnelChart = require("./FunnelChart");
+Object.keys(_FunnelChart).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _FunnelChart[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _FunnelChart[key];
+    }
+  });
+});

package/lib/components/Charts/FunnelChart/index.js.flow

@@ -0,0 +1,3 @@
+// @flow strict
+
+export * from './FunnelChart';

package/lib/components/Charts/index.js

@@ -47,6 +47,17 @@ Object.keys(_DonutChart).forEach(function (key) {
     }
   });
 });
+var _FunnelChart = require("./FunnelChart");
+Object.keys(_FunnelChart).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _FunnelChart[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _FunnelChart[key];
+    }
+  });
+});
 var _LineChart = require("./LineChart");
 Object.keys(_LineChart).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/lib/components/Charts/index.js.flow

@@ -4,5 +4,6 @@ export * from './ChartTooltip';
 export * from './ChartWrapper';
 export * from './ColumnChart';
 export * from './DonutChart';
+export * from './FunnelChart';
 export * from './LineChart';
 export * from './SpiderChart';

package/lib/types/charts.js.flow

@@ -143,6 +143,7 @@ export type DataOptionsType = {
   name?: string,
   color?: string,
   drilldown?: string,
+  id?: string,
   ...
 };
 
@@ -162,7 +163,7 @@ export type Drilldown = {
 };
 
 export type PlotOptionsType = {
-  ['pie' | 'line']: {
+  ['pie' | 'line' | 'funnel']: {
     innerSize?: string,
     allowPointSelect?: boolean,
     cursor?: 'pointer',
@@ -170,6 +171,9 @@ export type PlotOptionsType = {
       enabled?: boolean,
       distance?: number,
       connectorColor?: string,
+      useHTML?: boolean,
+      format?: string,
+      style?: CSSObject,
     },
     showInLegend?: boolean,
     center?: [string, string],
@@ -177,6 +181,10 @@ export type PlotOptionsType = {
     minSize?: number | string,
     borderWidth?: number,
     borderRadius?: number,
+    neckWidth?: string | number,
+    neckHeight?: string | number,
+    minSize?: string | number,
+    width?: string | number,
     ...
   },
 };

package/lib/utils/charts/funnelChart.js

@@ -0,0 +1,98 @@
+"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;

package/lib/utils/charts/funnelChart.js.flow

@@ -0,0 +1,102 @@
+// @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
+  })),
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.3.17",
+  "version": "0.3.18",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {