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

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 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.19](https://github.com/spaced-out/ui-design-system/compare/v0.3.18...v0.3.19) (2025-01-27)
+
+
+### Bug Fixes
+
+* chip outline ([#316](https://github.com/spaced-out/ui-design-system/issues/316)) ([18d8467](https://github.com/spaced-out/ui-design-system/commit/18d8467fbc077dcd9e99ec4d283447e0d31dfb70))
+
+### [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/components/Chip/Chip.js

@@ -100,7 +100,10 @@ const Chip = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     type: iconType,
     size: "small"
   }), /*#__PURE__*/React.createElement(_Truncate.Truncate, null, children), dismissable && size !== 'small' && /*#__PURE__*/React.createElement(_Icon.CloseIcon, {
-    className: _ChipModule.default.dismissIcon,
+    classNames: {
+      icon: _ChipModule.default.dismissIcon,
+      button: _ChipModule.default.dismissIconWrapper
+    },
     type: iconType,
     size: "small",
     ariaLabel: "Dismiss",

package/lib/components/Chip/Chip.js.flow

@@ -159,7 +159,10 @@ export const Chip: React$AbstractComponent<ChipProps, HTMLDivElement> =
 
           {dismissable && size !== 'small' && (
             <CloseIcon
-              className={css.dismissIcon}
+              classNames={{
+                icon: css.dismissIcon,
+                button: css.dismissIconWrapper,
+              }}
               type={iconType}
               size="small"
               ariaLabel="Dismiss"

package/lib/components/Chip/Chip.module.css

@@ -133,7 +133,7 @@
   padding: spaceNone spaceXSmall spaceNone spaceSmall;
 }
 
-.dismissIcon {
+.dismissIconWrapper {
   margin-left: spaceXSmall;
   cursor: pointer;
 }

package/lib/components/Icon/ClickableIcon.js

@@ -19,6 +19,9 @@ const ClickableIcon = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     size = 'medium',
     ariaLabel,
     onClick,
+    className,
+    // Deprecated for Clickable Icon
+    classNames,
     ...props
   } = _ref;
   const onKeyDownHandler = e => {
@@ -35,10 +38,11 @@ const ClickableIcon = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       [_ClickableIconModule.default.small]: size === 'small',
       [_ClickableIconModule.default.medium]: size === 'medium',
       [_ClickableIconModule.default.large]: size === 'large'
-    }),
+    }, classNames?.button),
     ref: ref
   }), /*#__PURE__*/React.createElement(_.Icon, _extends({
-    size: size
+    size: size,
+    className: classNames?.icon || className
   }, props)));
 });
 exports.ClickableIcon = ClickableIcon;

package/lib/components/Icon/ClickableIcon.js.flow

@@ -13,11 +13,31 @@ import {Icon} from './';
 import css from './ClickableIcon.module.css';
 
 
+type ClassNames = $ReadOnly<{
+  icon?: string,
+  button?: string,
+}>;
+
+export type ClickableIconProps = {
+  ...IconProps,
+  classNames?: ClassNames,
+};
+
 export const ClickableIcon: React$AbstractComponent<
-  IconProps,
+  ClickableIconProps,
   HTMLButtonElement,
-> = React.forwardRef<IconProps, HTMLButtonElement>(
-  ({size = 'medium', ariaLabel, onClick, ...props}: IconProps, ref) => {
+> = React.forwardRef<ClickableIconProps, HTMLButtonElement>(
+  (
+    {
+      size = 'medium',
+      ariaLabel,
+      onClick,
+      className, // Deprecated for Clickable Icon
+      classNames,
+      ...props
+    }: ClickableIconProps,
+    ref,
+  ) => {
     const onKeyDownHandler = (e) => {
       if (e.key === 'Enter') {
         e.preventDefault();
@@ -30,14 +50,22 @@ export const ClickableIcon: React$AbstractComponent<
         onClick={onClick}
         onKeyDown={onKeyDownHandler}
         ariaLabel={ariaLabel}
-        className={classify(css.button, {
-          [css.small]: size === 'small',
-          [css.medium]: size === 'medium',
-          [css.large]: size === 'large',
-        })}
+        className={classify(
+          css.button,
+          {
+            [css.small]: size === 'small',
+            [css.medium]: size === 'medium',
+            [css.large]: size === 'large',
+          },
+          classNames?.button,
+        )}
         ref={ref}
       >
-        <Icon size={size} {...props} />
+        <Icon
+          size={size}
+          className={classNames?.icon || className}
+          {...props}
+        />
       </UnstyledButton>
     );
   },
@@ -48,8 +76,9 @@ export type CloseIconProps = {
   type?: IconType,
   color?: ColorTypes,
   onClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
-  className?: string,
+  className?: string, // Deprecated for Clickable Icon
   ariaLabel?: string,
+  classNames?: ClassNames,
 };
 
 export const CloseIcon: React$AbstractComponent<

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.19",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {