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

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

@@ -0,0 +1,190 @@
+// @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 {CircularLoader} from '../../CircularLoader';
+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
+      ariaLabel="Export Chart Menu"
+      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,
+  loader?: string,
+}>;
+
+type ChartWrapperProps = {
+  isLoading?: boolean,
+  title: React.Node,
+  children?: React.Node,
+  classNames?: ChartWrapperClassNames,
+  customExportOptions?: Array<ExportOptionType> | null,
+  headerActions?: React.Node,
+  hasEmptyData?: boolean,
+  emptyText?: React.Node,
+};
+
+export const ChartWrapper: React$AbstractComponent<
+  ChartWrapperProps,
+  HTMLDivElement,
+> = React.forwardRef<ChartWrapperProps, HTMLDivElement>(
+  (
+    {
+      isLoading,
+      title,
+      children,
+      classNames,
+      customExportOptions,
+      headerActions,
+      hasEmptyData = false,
+      emptyText,
+    }: ChartWrapperProps,
+    ref,
+  ): React.Node => (
+    <Card
+      classNames={{
+        wrapper: classify(
+          css.wrapper,
+          {[css.justifyCenter]: isLoading},
+          classNames?.wrapper,
+        ),
+      }}
+    >
+      {isLoading ? (
+        <CircularLoader
+          size="large"
+          className={classify(css.loader, classNames?.loader)}
+        />
+      ) : (
+        <>
+          <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)}
+          >
+            {hasEmptyData && emptyText ? emptyText : children}
+          </CardContent>
+        </>
+      )}
+    </Card>
+  ),
+);

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

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

package/lib/components/Charts/ColumnChart/ColumnChart.js

@@ -13,6 +13,8 @@ var _ChartWrapper = require("../ChartWrapper");
 var _ColumnChartModule = _interopRequireDefault(require("./ColumnChart.module.css"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+//$FlowFixMe[untyped-import]
+//$FlowFixMe[untyped-import]
 const ColumnChart = _ref => {
   let {
     isLoading,
@@ -36,7 +38,6 @@ const ColumnChart = _ref => {
   }));
   const addColorToDrilldownSeries = series => series?.map(seriesItem => ({
     ...seriesItem,
-    // @ts-ignore - TS7006 - Parameter 'dataItem' implicitly has an 'any' type. | TS7006 - Parameter 'index' implicitly has an 'any' type.
     data: seriesItem.data.map((dataItem, index) => ({
       ...dataItem,
       color: (0, _charts.getDataVizColor)(index),
@@ -45,13 +46,14 @@ const ColumnChart = _ref => {
   }));
   const columnDrilldown = drilldown ? {
     ...drilldown,
-    // @ts-ignore
     series: addColorToDrilldownSeries(drilldown.series),
     breadcrumbs: {
       floating: false
     }
   } : {};
   const defaultColumnChartOptions = (0, _charts.getColumnChartOptions)();
+
+  //$FlowFixMe[cannot-spread-inexact]
   const chartOptions = (0, _charts.mergeChartUserOptions)(defaultColumnChartOptions, {
     series: columnChartSeries,
     drilldown: columnDrilldown,
@@ -63,9 +65,7 @@ const ColumnChart = _ref => {
   } = classNames || {};
   return /*#__PURE__*/React.createElement(_ChartWrapper.ChartWrapper, {
     isLoading: isLoading,
-    title: cardTitle
-    // @ts-ignore - TS2769 - No overload matches this call.
-    ,
+    title: cardTitle,
     ref: chartRef,
     classNames: wrapperClassNames,
     customExportOptions: customExportOptions,
@@ -76,9 +76,7 @@ const ColumnChart = _ref => {
     highcharts: _highcharts.default,
     containerProps: {
       className: (0, _classify.default)(_ColumnChartModule.default.columnChartContainer, highChart)
-    }
-    // @ts-ignore - TS2322 - Type 'RefObject<unknown>' is not assignable to type 'Ref<HighchartsReactRefObject> | undefined'.
-    ,
+    },
     ref: chartRef,
     options: chartOptions
   }));

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

@@ -0,0 +1,126 @@
+// @flow strict
+
+import * as React from 'react';
+//$FlowFixMe[untyped-import]
+import Highcharts from 'highcharts';
+//$FlowFixMe[untyped-import]
+import HighchartsReact from 'highcharts-react-official';
+
+import type {
+  ChartOptions,
+  DataOptionsType,
+  Drilldown,
+} from '../../../types/charts';
+import {
+  columnPlotWidth,
+  getColumnChartOptions,
+  getDataVizColor,
+  mergeChartUserOptions,
+} from '../../../utils/charts';
+import classify from '../../../utils/classify';
+import {
+  ChartWrapper,
+  type ChartWrapperClassNames,
+  type ExportOptionType,
+} from '../ChartWrapper';
+
+import css from './ColumnChart.module.css';
+
+
+export type ClassNames = $ReadOnly<{
+  ...ChartWrapperClassNames,
+  highChart?: string,
+}>;
+
+export type ColumnSeries = {
+  name: string,
+  data: DataOptionsType[],
+};
+
+export type ColumnChartProps = {
+  ...ChartOptions,
+  isLoading?: boolean,
+  classNames?: ClassNames,
+  cardTitle?: React.Node,
+  customExportOptions?: Array<ExportOptionType> | null,
+  series: Array<ColumnSeries>,
+  drilldown?: Drilldown,
+  headerActions?: React.Node,
+  hasEmptyData?: boolean,
+  emptyText?: React.Node,
+  ...
+};
+
+export const ColumnChart = ({
+  isLoading,
+  classNames,
+  cardTitle,
+  customExportOptions,
+  series,
+  drilldown,
+  headerActions,
+  hasEmptyData,
+  emptyText,
+  ...userOptions
+}: ColumnChartProps): React.Node => {
+  const chartRef = React.createRef();
+
+  const columnChartSeries = series.map((seriesItem, index) => ({
+    ...seriesItem,
+    name: seriesItem.name,
+    data: seriesItem.data,
+    color: getDataVizColor(index),
+    pointWidth: columnPlotWidth,
+  }));
+
+  const addColorToDrilldownSeries = (series) =>
+    series?.map((seriesItem) => ({
+      ...seriesItem,
+      data: seriesItem.data.map((dataItem, index) => ({
+        ...dataItem,
+        color: getDataVizColor(index),
+        pointWidth: columnPlotWidth,
+      })),
+    }));
+
+  const columnDrilldown = drilldown
+    ? {
+      ...drilldown,
+      series: addColorToDrilldownSeries(drilldown.series),
+      breadcrumbs: {floating: false},
+    }
+    : {};
+
+  const defaultColumnChartOptions = getColumnChartOptions();
+
+  //$FlowFixMe[cannot-spread-inexact]
+  const chartOptions = mergeChartUserOptions(defaultColumnChartOptions, {
+    series: columnChartSeries,
+    drilldown: columnDrilldown,
+    ...userOptions,
+  });
+
+  const {highChart, ...wrapperClassNames} = classNames || {};
+
+  return (
+    <ChartWrapper
+      isLoading={isLoading}
+      title={cardTitle}
+      ref={chartRef}
+      classNames={wrapperClassNames}
+      customExportOptions={customExportOptions}
+      headerActions={headerActions}
+      hasEmptyData={hasEmptyData}
+      emptyText={emptyText}
+    >
+      <HighchartsReact
+        highcharts={Highcharts}
+        containerProps={{
+          className: classify(css.columnChartContainer, highChart),
+        }}
+        ref={chartRef}
+        options={chartOptions}
+      />
+    </ChartWrapper>
+  );
+};

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

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

package/lib/components/Charts/DonutChart/DonutChart.js

@@ -14,6 +14,8 @@ var _typographyModule = _interopRequireDefault(require("../../../styles/typograp
 var _DonutChartModule = _interopRequireDefault(require("./DonutChart.module.css"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+//$FlowFixMe[untyped-import]
+//$FlowFixMe[untyped-import]
 const DonutChart = _ref => {
   let {
     isLoading,
@@ -30,7 +32,6 @@ const DonutChart = _ref => {
     emptyText,
     ...userOptions
   } = _ref;
-  // @ts-ignore - TS2554 - Expected 1 arguments, but got 0.
   const chartRef = React.useRef();
   const {
     highChart,
@@ -70,6 +71,8 @@ const DonutChart = _ref => {
     legend,
     defaultCenterHTML
   });
+
+  //$FlowFixMe[cannot-spread-inexact]
   const chartOptions = (0, _charts.mergeChartUserOptions)(defaultLineChartOptions, {
     series: donutChartSeries,
     drilldown: donutDrilldown,
@@ -77,9 +80,7 @@ const DonutChart = _ref => {
   });
   return /*#__PURE__*/React.createElement(_ChartWrapper.ChartWrapper, {
     isLoading: isLoading,
-    title: cardTitle
-    // @ts-ignore - TS2769 - No overload matches this call.
-    ,
+    title: cardTitle,
     ref: chartRef,
     customExportOptions: customExportOptions,
     headerActions: headerActions,
@@ -90,9 +91,7 @@ const DonutChart = _ref => {
     highcharts: _highcharts.default,
     containerProps: {
       className: (0, _classify.default)(_DonutChartModule.default.donutChartContainer, highChart)
-    }
-    // @ts-ignore - TS2322 - Type 'RefObject<unknown>' is not assignable to type 'Ref<HighchartsReactRefObject> | undefined'.
-    ,
+    },
     ref: chartRef,
     options: chartOptions
   }));

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

@@ -0,0 +1,158 @@
+// @flow strict
+
+import * as React from 'react';
+//$FlowFixMe[untyped-import]
+import Highcharts from 'highcharts';
+//$FlowFixMe[untyped-import]
+import HighchartsReact from 'highcharts-react-official';
+
+import type {
+  ChartOptions,
+  Drilldown,
+  LegendOptionsType,
+  SeriesOptionsType,
+} from '../../../types/charts';
+import {
+  getDataVizColor,
+  getDonutChartOptions,
+  mergeChartUserOptions,
+} from '../../../utils/charts';
+import classify from '../../../utils/classify';
+import {
+  ChartWrapper,
+  type ChartWrapperClassNames,
+  type ExportOptionType,
+} from '../ChartWrapper';
+
+import typographyCss from '../../../styles/typography.module.css';
+import css from './DonutChart.module.css';
+
+
+export type ClassNames = $ReadOnly<{
+  ...ChartWrapperClassNames,
+  highChart?: string,
+  subtitleClassNames?: SubtitleClassNames,
+}>;
+
+export type SubtitleClassNames = {
+  wrapper?: string,
+  text?: string,
+  subtext?: string,
+};
+
+export type DonutChartProps = {
+  ...ChartOptions,
+  isLoading?: boolean,
+  classNames?: ClassNames,
+  cardTitle?: React.Node,
+  customExportOptions?: Array<ExportOptionType> | null,
+  headerActions?: React.Node,
+  centerText?: string,
+  centerSubtext?: string,
+  series: Array<SeriesOptionsType>,
+  drilldown?: Drilldown,
+  legend?: LegendOptionsType,
+  hasEmptyData?: boolean,
+  emptyText?: React.Node,
+  ...
+};
+
+export const DonutChart = ({
+  isLoading,
+  classNames,
+  cardTitle,
+  customExportOptions,
+  headerActions,
+  series,
+  drilldown,
+  legend,
+  centerText,
+  centerSubtext,
+  hasEmptyData,
+  emptyText,
+  ...userOptions
+}: DonutChartProps): React.Node => {
+  const chartRef = React.useRef();
+
+  const {highChart, subtitleClassNames, ...wrapperClassNames} =
+    classNames || {};
+
+  const defaultCenterHTML = `<span class=${classify(
+    css.subtitleWrap,
+    subtitleClassNames?.wrapper,
+  )}>
+    <span class="${classify(
+    typographyCss.jumboMedium,
+    css.subtitleText,
+    subtitleClassNames?.text,
+  )}">
+      ${centerText ? centerText : ''}
+    </span>
+    <span class="${classify(
+    typographyCss.bodySmall,
+    css.subtitleSubtext,
+    subtitleClassNames?.subtext,
+  )}">
+      ${centerSubtext ? centerSubtext : ''}
+    </span>
+  <span>`;
+
+  const donutChartSeries = series.map((seriesItem) => ({
+    ...seriesItem,
+    data: seriesItem.data.map((dataItem, index) => ({
+      ...dataItem,
+      color: getDataVizColor(index),
+    })),
+  }));
+
+  const addColorToDrilldownSeries = (series) =>
+    series?.map((seriesItem) => ({
+      ...seriesItem,
+      data: seriesItem.data.map((dataItem, index) => ({
+        ...dataItem,
+        color: getDataVizColor(index),
+      })),
+    }));
+
+  const donutDrilldown = drilldown
+    ? {
+      ...drilldown,
+      series: addColorToDrilldownSeries(drilldown.series),
+      breadcrumbs: {floating: false},
+    }
+    : {};
+
+  const defaultLineChartOptions = getDonutChartOptions({
+    legend,
+    defaultCenterHTML,
+  });
+
+  //$FlowFixMe[cannot-spread-inexact]
+  const chartOptions = mergeChartUserOptions(defaultLineChartOptions, {
+    series: donutChartSeries,
+    drilldown: donutDrilldown,
+    ...userOptions,
+  });
+
+  return (
+    <ChartWrapper
+      isLoading={isLoading}
+      title={cardTitle}
+      ref={chartRef}
+      customExportOptions={customExportOptions}
+      headerActions={headerActions}
+      classNames={wrapperClassNames}
+      hasEmptyData={hasEmptyData}
+      emptyText={emptyText}
+    >
+      <HighchartsReact
+        highcharts={Highcharts}
+        containerProps={{
+          className: classify(css.donutChartContainer, highChart),
+        }}
+        ref={chartRef}
+        options={chartOptions}
+      />
+    </ChartWrapper>
+  );
+};

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

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

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

@@ -15,6 +15,9 @@ var _ChartWrapper = require("../ChartWrapper");
 var _FunnelChartModule = _interopRequireDefault(require("./FunnelChart.module.css"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+//$FlowFixMe[untyped-import]
+//$FlowFixMe[untyped-import]
+//$FlowFixMe[untyped-import]
 const FunnelChart = _ref => {
   let {
     isLoading,
@@ -39,6 +42,8 @@ const FunnelChart = _ref => {
       floating: false
     }
   } : {};
+
+  //$FlowFixMe[cannot-spread-inexact]
   const chartOptions = (0, _charts.mergeChartUserOptions)(defaultFunnelChartOptions, {
     series: funnelChartSeries,
     drilldown: columnDrilldown,
@@ -50,9 +55,7 @@ const FunnelChart = _ref => {
   } = classNames || {};
   return /*#__PURE__*/React.createElement(_ChartWrapper.ChartWrapper, {
     isLoading: isLoading,
-    title: cardTitle
-    // @ts-ignore - TS2769 - No overload matches this call.
-    ,
+    title: cardTitle,
     ref: chartRef,
     classNames: wrapperClassNames,
     customExportOptions: customExportOptions,
@@ -63,9 +66,7 @@ const FunnelChart = _ref => {
     highcharts: _highcharts.default,
     containerProps: {
       className: (0, _classify.default)(_FunnelChartModule.default.funnelChartContainer, highChart)
-    }
-    // @ts-ignore - TS2322 - Type 'RefObject<unknown>' is not assignable to type 'Ref<HighchartsReactRefObject> | undefined'.
-    ,
+    },
     ref: chartRef,
     options: chartOptions
   }));