@spaced-out/ui-design-system 0.1.86 → 0.1.87-beta.0

package/.cspell/custom-words.txt

@@ -1,4 +1,3 @@
-VishalBarnawal
 Aditya
 aditya-kaushal
 amet
@@ -16,6 +15,8 @@ Crespo
 datetime
 DEFAULTTEXT
 dismissable
+drilldown
+Drilldown
 dropzone
 eqeqeq
 fbjs
@@ -24,6 +25,7 @@ flowtype
 fontawesome
 framename
 Gaurav
+highcharts
 innerref
 interdimensional
 Lipsey
@@ -55,6 +57,7 @@ systemjs
 tablist
 tabout
 testid
+tickmark
 tnum
 transclude
 Typeahead
@@ -62,6 +65,7 @@ typeof
 valuenow
 Verda
 vish
+VishalBarnawal
 xmark
 yourcomponentname
 yxxx

package/.storybook/preview-head.html

@@ -164,4 +164,8 @@
   a.sbdocs {
     color: #5c34cd !important;
   }
+
+  svg.highcharts-root {
+    font-family: 'Centra No 2' !important;
+  }
 </style>

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.1.87-beta.0](https://github.com/spaced-out/ui-design-system/compare/v0.1.86...v0.1.87-beta.0) (2024-04-19)
+
+
+### Features
+
+* [GDS-343] added donut, spider, line and column charts using highcharts-react-official ([#181](https://github.com/spaced-out/ui-design-system/issues/181)) ([4ebc82e](https://github.com/spaced-out/ui-design-system/commit/4ebc82e3f84085860a8011a9a870710e68485529)), closes [#171](https://github.com/spaced-out/ui-design-system/issues/171) [#173](https://github.com/spaced-out/ui-design-system/issues/173) [#174](https://github.com/spaced-out/ui-design-system/issues/174) [#177](https://github.com/spaced-out/ui-design-system/issues/177) [#180](https://github.com/spaced-out/ui-design-system/issues/180) [#182](https://github.com/spaced-out/ui-design-system/issues/182) [#183](https://github.com/spaced-out/ui-design-system/issues/183) [#184](https://github.com/spaced-out/ui-design-system/issues/184)
+
 ### [0.1.86](https://github.com/spaced-out/ui-design-system/compare/v0.1.85...v0.1.86) (2024-04-19)
 
 

package/design-tokens/color/app-color.json

@@ -195,6 +195,32 @@
         "value": "{baseColor.yellow.500.value}"
       }
     },
+    "data-viz": {
+      "1": {
+        "value": "{baseColor.blue.200.value}"
+      },
+      "2": {
+        "value": "{baseColor.purple.200.value}"
+      },
+      "3": {
+        "value": "{baseColor.green.200.value}"
+      },
+      "4": {
+        "value": "{baseColor.orange.200.value}"
+      },
+      "5": {
+        "value": "{baseColor.red.200.value}"
+      },
+      "6": {
+        "value": "{baseColor.teal.100.value}"
+      },
+      "7": {
+        "value": "{baseColor.pink.100.value}"
+      },
+      "8": {
+        "value": "{baseColor.yellow.100.value}"
+      }
+    },
     "gray.lightest": {
       "value": "{baseColor.gray.75.value}"
     },

package/design-tokens/font/base-font.json

@@ -2,7 +2,7 @@
   "font": {
     "family": {
       "centra": {
-        "value": "\"Centra No2\""
+        "value": "\"Centra No 2\""
       }
     },
     "weight": {

package/design-tokens/size/base-size.json

@@ -84,6 +84,9 @@
     "160": {
       "value": "160px"
     },
+    "180": {
+      "value": "180px"
+    },
     "228": {
       "value": "228px"
     },
@@ -117,15 +120,24 @@
     "500": {
       "value": "500px"
     },
+    "540": {
+      "value": "540px"
+    },
     "580": {
       "value": "580px"
     },
     "640": {
       "value": "640px"
     },
+    "660": {
+      "value": "660px"
+    },
     "720": {
       "value": "720px"
     },
+    "880": {
+      "value": "880px"
+    },
     "960": {
       "value": "960px"
     },

package/lib/components/ChartWrapper/ChartWrapper.js

@@ -0,0 +1,124 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EXPORT_OPTIONS = exports.ChartWrapper = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _highcharts = _interopRequireDefault(require("highcharts"));
+var _accessibility = _interopRequireDefault(require("highcharts/modules/accessibility"));
+var _drilldown = _interopRequireDefault(require("highcharts/modules/drilldown"));
+var _exporting = _interopRequireDefault(require("highcharts/modules/exporting"));
+var _size = require("../../styles/variables/_size");
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _ButtonDropdown = require("../ButtonDropdown");
+var _Card = require("../Card");
+var _ChartWrapperModule = _interopRequireDefault(require("./ChartWrapper.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]
+
+//$FlowFixMe[untyped-import]
+
+const EXPORT_OPTIONS = Object.freeze({
+  download_as_png: {
+    key: 'download_as_png',
+    label: 'Download as PNG',
+    format: 'image/png'
+  },
+  download_as_jpeg: {
+    key: 'download_as_jpeg',
+    label: 'Download as JPEG',
+    format: 'image/jpeg'
+  },
+  download_as_pdf: {
+    key: 'download_as_pdf',
+    label: 'Download as PDF',
+    format: 'application/pdf'
+  },
+  download_as_svg: {
+    key: 'download_as_svg',
+    label: 'Download as SVG',
+    format: 'image/svg+xml'
+  }
+});
+
+// on assumption that all export options will be shown by default
+exports.EXPORT_OPTIONS = EXPORT_OPTIONS;
+const DEFAULT_EXPORT_OPTIONS = Object.keys(EXPORT_OPTIONS).map(exportKey => EXPORT_OPTIONS[exportKey]);
+const CustomExportButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    customExportOptions = null
+  } = _ref;
+  (0, _exporting.default)(_highcharts.default);
+  (0, _drilldown.default)(_highcharts.default);
+  (0, _accessibility.default)(_highcharts.default);
+  const exportOptions = customExportOptions ? customExportOptions : DEFAULT_EXPORT_OPTIONS;
+  const menuOptions = exportOptions.map(exportOption => {
+    const {
+      key,
+      label
+    } = exportOption;
+    return {
+      key,
+      label
+    };
+  });
+  const handleDownload = exportKey => {
+    const exportOptionObject = exportOptions.find(exportOption => exportOption.key === exportKey);
+    const exportFormat = exportOptionObject?.format || '';
+    if (ref.current) {
+      // $FlowFixMe[prop-missing]
+      // $FlowFixMe[incompatible-use]
+      ref.current.chart?.exportChart({
+        type: exportFormat
+      });
+    }
+  };
+  return /*#__PURE__*/React.createElement(_ButtonDropdown.ButtonDropdown, {
+    menu: {
+      isFluid: true,
+      menuDisabled: false,
+      options: menuOptions,
+      size: 'medium',
+      width: _size.size180
+    },
+    iconLeftName: "ellipsis",
+    onOptionSelect: option => handleDownload(option.key),
+    size: "small",
+    type: "ghost",
+    anchorPosition: _ButtonDropdown.ANCHOR_POSITION_TYPE.bottomEnd
+  });
+});
+const ChartWrapper = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+  let {
+    title,
+    children,
+    classNames,
+    customExportOptions,
+    headerActions
+  } = _ref2;
+  return /*#__PURE__*/React.createElement(_Card.Card, {
+    classNames: {
+      wrapper: (0, _classify.default)(_ChartWrapperModule.default.wrapper, classNames?.wrapper)
+    }
+  }, /*#__PURE__*/React.createElement(_Card.CardHeader, {
+    className: classNames?.header
+  }, /*#__PURE__*/React.createElement(_Card.CardTitle, {
+    className: classNames?.title
+  }, title), /*#__PURE__*/React.createElement(_Card.CardActions, {
+    className: (0, _classify.default)(_ChartWrapperModule.default.chartCardActions, classNames?.actions)
+  }, /*#__PURE__*/React.createElement(CustomExportButton, {
+    ref: ref,
+    customExportOptions: customExportOptions
+  }), headerActions ? headerActions : null)), /*#__PURE__*/React.createElement(_Card.CardContent, {
+    className: (0, _classify.default)(_ChartWrapperModule.default.chartContent, classNames?.content)
+  }, children));
+});
+exports.ChartWrapper = ChartWrapper;

package/lib/components/ChartWrapper/ChartWrapper.js.flow

@@ -0,0 +1,156 @@
+// @flow strict
+
+import * as React from 'react';
+//$FlowFixMe[untyped-import]
+import Highcharts from 'highcharts';
+//$FlowFixMe[untyped-import]
+import accessibility from 'highcharts/modules/accessibility';
+//$FlowFixMe[untyped-import]
+import drilldown from 'highcharts/modules/drilldown';
+//$FlowFixMe[untyped-import]
+import exporting from 'highcharts/modules/exporting';
+
+import {size180} from '../../styles/variables/_size';
+import classify from '../../utils/classify';
+import {ANCHOR_POSITION_TYPE, ButtonDropdown} from '../ButtonDropdown';
+import {Card, CardActions, CardContent, CardHeader, CardTitle} from '../Card';
+import type {MenuOption} from '../Menu';
+
+import css from './ChartWrapper.module.css';
+
+
+export type ExportOptionType = {
+  key: string,
+  label: string,
+  format: string,
+};
+
+export const EXPORT_OPTIONS = Object.freeze({
+  download_as_png: {
+    key: 'download_as_png',
+    label: 'Download as PNG',
+    format: 'image/png',
+  },
+  download_as_jpeg: {
+    key: 'download_as_jpeg',
+    label: 'Download as JPEG',
+    format: 'image/jpeg',
+  },
+  download_as_pdf: {
+    key: 'download_as_pdf',
+    label: 'Download as PDF',
+    format: 'application/pdf',
+  },
+  download_as_svg: {
+    key: 'download_as_svg',
+    label: 'Download as SVG',
+    format: 'image/svg+xml',
+  },
+});
+
+// on assumption that all export options will be shown by default
+const DEFAULT_EXPORT_OPTIONS = Object.keys(EXPORT_OPTIONS).map(
+  (exportKey) => EXPORT_OPTIONS[exportKey],
+);
+
+type CustomExportButtonProps = {
+  ref?: HTMLDivElement,
+  customExportOptions?: Array<ExportOptionType> | null,
+};
+
+const CustomExportButton = React.forwardRef<
+  CustomExportButtonProps,
+  HTMLDivElement,
+>(({customExportOptions = null}: CustomExportButtonProps, ref) => {
+  exporting(Highcharts);
+  drilldown(Highcharts);
+  accessibility(Highcharts);
+
+  const exportOptions = customExportOptions
+    ? customExportOptions
+    : DEFAULT_EXPORT_OPTIONS;
+
+  const menuOptions: Array<MenuOption> = exportOptions.map((exportOption) => {
+    const {key, label} = exportOption;
+    return {key, label};
+  });
+
+  const handleDownload = (exportKey: string): void => {
+    const exportOptionObject = exportOptions.find(
+      (exportOption) => exportOption.key === exportKey,
+    );
+    const exportFormat = exportOptionObject?.format || '';
+    if (ref.current) {
+      // $FlowFixMe[prop-missing]
+      // $FlowFixMe[incompatible-use]
+      ref.current.chart?.exportChart({type: exportFormat});
+    }
+  };
+
+  return (
+    <ButtonDropdown
+      menu={{
+        isFluid: true,
+        menuDisabled: false,
+        options: menuOptions,
+        size: 'medium',
+        width: size180,
+      }}
+      iconLeftName="ellipsis"
+      onOptionSelect={(option) => handleDownload(option.key)}
+      size="small"
+      type="ghost"
+      anchorPosition={ANCHOR_POSITION_TYPE.bottomEnd}
+    />
+  );
+});
+
+export type ChartWrapperClassNames = $ReadOnly<{
+  wrapper?: string,
+  header?: string,
+  title?: string,
+  actions?: string,
+  content?: string,
+}>;
+
+type ChartWrapperProps = {
+  title: React.Node,
+  children?: React.Node,
+  classNames?: ChartWrapperClassNames,
+  customExportOptions?: Array<ExportOptionType> | null,
+  headerActions?: React.Node,
+};
+
+export const ChartWrapper: React$AbstractComponent<
+  ChartWrapperProps,
+  HTMLDivElement,
+> = React.forwardRef<ChartWrapperProps, HTMLDivElement>(
+  (
+    {
+      title,
+      children,
+      classNames,
+      customExportOptions,
+      headerActions,
+    }: ChartWrapperProps,
+    ref,
+  ): React.Node => (
+    <Card classNames={{wrapper: classify(css.wrapper, classNames?.wrapper)}}>
+      <CardHeader className={classNames?.header}>
+        <CardTitle className={classNames?.title}>{title}</CardTitle>
+        <CardActions
+          className={classify(css.chartCardActions, classNames?.actions)}
+        >
+          <CustomExportButton
+            ref={ref}
+            customExportOptions={customExportOptions}
+          />
+          {headerActions ? headerActions : null}
+        </CardActions>
+      </CardHeader>
+      <CardContent className={classify(css.chartContent, classNames?.content)}>
+        {children}
+      </CardContent>
+    </Card>
+  ),
+);

package/lib/components/ChartWrapper/ChartWrapper.module.css

@@ -0,0 +1,19 @@
+@value (spaceXSmall) from '../../styles/variables/_space.css';
+@value (size960) from '../../styles/variables/_size.css';
+
+.wrapper {
+  display: flex;
+  max-width: size960;
+}
+
+.chartCardActions {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: spaceXSmall;
+}
+
+.chartContent {
+  overflow-x: auto;
+  display: flex;
+}

package/lib/components/ChartWrapper/index.js

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

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

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

package/lib/components/Charts/ChartTooltip.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.tooltipTheme = void 0;
+var _typographyModule = _interopRequireDefault(require("../../styles/typography.module.css"));
+var _ChartTooltipModule = _interopRequireDefault(require("./ChartTooltip.module.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const tooltipTheme = {
+  headerFormat: `<span class="${_typographyModule.default.bodySmall} ${_ChartTooltipModule.default.tooltipHeader}">{point.key}</span>`,
+  pointFormat: `<span class=${_ChartTooltipModule.default.tooltipPoint}>
+      <span style="background-color:{point.color};" class=${_ChartTooltipModule.default.indicatorCircle}></span>
+      <span class="${_ChartTooltipModule.default.tooltipContent} ${_typographyModule.default.bodyMedium}"> {series.name}: {point.y}</span>
+    </span>`
+};
+exports.tooltipTheme = tooltipTheme;

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

@@ -0,0 +1,15 @@
+// @flow strict
+
+import type {Tooltip} from '../../types/charts';
+
+import typographyCss from '../../styles/typography.module.css';
+import css from './ChartTooltip.module.css';
+
+
+export const tooltipTheme: Tooltip = {
+  headerFormat: `<span class="${typographyCss.bodySmall} ${css.tooltipHeader}">{point.key}</span>`,
+  pointFormat: `<span class=${css.tooltipPoint}>
+      <span style="background-color:{point.color};" class=${css.indicatorCircle}></span>
+      <span class="${css.tooltipContent} ${typographyCss.bodyMedium}"> {series.name}: {point.y}</span>
+    </span>`,
+};

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

@@ -0,0 +1,36 @@
+@value (fontWeightMedium,
+  fontSize14,
+  fontWeightBook,
+  fontLineHeight150,
+  fontLetterSpacing0) from '../../styles/variables/_font.css';
+@value (colorTextInversePrimary, colorTextInverseSecondary) from '../../styles/variables/_color.css';
+@value (spaceNone, spaceXXSmall) from '../../styles/variables/_space.css';
+@value (size8) from '../../styles/variables/_size.css';
+@value (borderRadiusCircle) from '../../styles/variables/_border.css';
+
+.tooltipHeader {
+  margin: spaceNone;
+  color: colorTextInversePrimary;
+}
+
+.tooltipPoint {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: spaceXXSmall;
+}
+
+.indicatorCircle {
+  display: inline-block;
+  width: size8;
+  height: size8;
+  border-radius: borderRadiusCircle;
+  margin: spaceXXSmall spaceNone;
+}
+
+.tooltipContent {
+  margin: spaceNone;
+  color: colorTextInverseSecondary;
+  text-align: center;
+}

package/lib/components/Charts/index.js

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _ChartWrapper = require("../ChartWrapper");
+Object.keys(_ChartWrapper).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChartWrapper[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartWrapper[key];
+    }
+  });
+});
+var _ColumnChart = require("../ColumnChart");
+Object.keys(_ColumnChart).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ColumnChart[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ColumnChart[key];
+    }
+  });
+});
+var _DonutChart = require("../DonutChart");
+Object.keys(_DonutChart).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _DonutChart[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _DonutChart[key];
+    }
+  });
+});
+var _LineChart = require("../LineChart");
+Object.keys(_LineChart).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _LineChart[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _LineChart[key];
+    }
+  });
+});
+var _SpiderChart = require("../SpiderChart");
+Object.keys(_SpiderChart).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _SpiderChart[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _SpiderChart[key];
+    }
+  });
+});
+var _ChartTooltip = require("./ChartTooltip");
+Object.keys(_ChartTooltip).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChartTooltip[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartTooltip[key];
+    }
+  });
+});

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

@@ -0,0 +1,8 @@
+// @flow strict
+
+export * from '../ChartWrapper';
+export * from '../ColumnChart';
+export * from '../DonutChart';
+export * from '../LineChart';
+export * from '../SpiderChart';
+export * from './ChartTooltip';