@spaced-out/ui-design-system 0.1.86 → 0.1.87

package/lib/components/ColumnChart/ColumnChart.js

@@ -0,0 +1,82 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ColumnChart = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _highcharts = _interopRequireDefault(require("highcharts"));
+var _highchartsReactOfficial = _interopRequireDefault(require("highcharts-react-official"));
+var _charts = require("../../utils/charts");
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _ChartWrapper = require("../ChartWrapper");
+var _ColumnChartModule = _interopRequireDefault(require("./ColumnChart.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]
+
+const ColumnChart = _ref => {
+  let {
+    classNames,
+    cardTitle,
+    customExportOptions,
+    series,
+    drilldown,
+    headerActions,
+    ...userOptions
+  } = _ref;
+  const chartRef = /*#__PURE__*/React.createRef();
+  const columnChartSeries = series.map((seriesItem, index) => ({
+    ...seriesItem,
+    name: seriesItem.name,
+    data: seriesItem.data,
+    color: (0, _charts.getDataVizColor)(index),
+    pointWidth: _charts.columnPlotWidth
+  }));
+  const addColorToDrilldownSeries = series => series?.map(seriesItem => ({
+    ...seriesItem,
+    data: seriesItem.data.map((dataItem, index) => ({
+      ...dataItem,
+      color: (0, _charts.getDataVizColor)(index),
+      pointWidth: _charts.columnPlotWidth
+    }))
+  }));
+  const columnDrilldown = drilldown ? {
+    ...drilldown,
+    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,
+    ...userOptions
+  });
+  const {
+    highChart,
+    ...wrapperClassNames
+  } = classNames || {};
+  return /*#__PURE__*/React.createElement(_ChartWrapper.ChartWrapper, {
+    title: cardTitle,
+    ref: chartRef,
+    classNames: wrapperClassNames,
+    customExportOptions: customExportOptions,
+    headerActions: headerActions
+  }, /*#__PURE__*/React.createElement(_highchartsReactOfficial.default, {
+    highcharts: _highcharts.default,
+    containerProps: {
+      className: (0, _classify.default)(_ColumnChartModule.default.columnChartContainer, highChart)
+    },
+    ref: chartRef,
+    options: chartOptions
+  }));
+};
+exports.ColumnChart = ColumnChart;

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

@@ -0,0 +1,109 @@
+// @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 {Drilldown} from '../../types/charts';
+import {
+  columnPlotWidth,
+  getColumnChartOptions,
+  getDataVizColor,
+  mergeChartUserOptions,
+} from '../../utils/charts';
+import classify from '../../utils/classify';
+import type {ChartWrapperClassNames, ExportOptionType} from '../ChartWrapper';
+import {ChartWrapper} from '../ChartWrapper';
+
+import css from './ColumnChart.module.css';
+
+
+type ClassNames = $ReadOnly<{
+  ...ChartWrapperClassNames,
+  highChart?: string,
+}>;
+
+type ColumnSeriesItem = {
+  name: string,
+  data: [],
+};
+
+export type ColumnChartProps = {
+  classNames?: ClassNames,
+  cardTitle?: string,
+  customExportOptions?: Array<ExportOptionType> | null,
+  series: Array<ColumnSeriesItem>,
+  drilldown: Drilldown,
+  headerActions?: React.Node,
+  ...
+};
+
+export const ColumnChart = ({
+  classNames,
+  cardTitle,
+  customExportOptions,
+  series,
+  drilldown,
+  headerActions,
+  ...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
+      title={cardTitle}
+      ref={chartRef}
+      classNames={wrapperClassNames}
+      customExportOptions={customExportOptions}
+      headerActions={headerActions}
+    >
+      <HighchartsReact
+        highcharts={Highcharts}
+        containerProps={{
+          className: classify(css.columnChartContainer, highChart),
+        }}
+        ref={chartRef}
+        options={chartOptions}
+      />
+    </ChartWrapper>
+  );
+};

package/lib/components/ColumnChart/ColumnChart.module.css

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

package/lib/components/ColumnChart/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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];
+    }
+  });
+});

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

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

package/lib/components/DonutChart/DonutChart.js

@@ -0,0 +1,97 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DonutChart = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _highcharts = _interopRequireDefault(require("highcharts"));
+var _highchartsReactOfficial = _interopRequireDefault(require("highcharts-react-official"));
+var _charts = require("../../utils/charts");
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _ChartWrapper = require("../ChartWrapper");
+var _typographyModule = _interopRequireDefault(require("../../styles/typography.module.css"));
+var _DonutChartModule = _interopRequireDefault(require("./DonutChart.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]
+
+const DonutChart = _ref => {
+  let {
+    classNames,
+    cardTitle,
+    customExportOptions,
+    headerActions,
+    series,
+    drilldown,
+    legend,
+    centerText,
+    centerSubtext,
+    ...userOptions
+  } = _ref;
+  const chartRef = React.useRef();
+  const {
+    highChart,
+    subtitleClassNames,
+    ...wrapperClassNames
+  } = classNames || {};
+  const defaultCenterHTML = `<span class=${(0, _classify.default)(_DonutChartModule.default.subtitleWrap, subtitleClassNames?.wrapper)}>
+    <span class="${(0, _classify.default)(_typographyModule.default.jumboMedium, _DonutChartModule.default.subtitleText, subtitleClassNames?.text)}">
+      ${centerText ? centerText : ''}
+    </span>
+    <span class="${(0, _classify.default)(_typographyModule.default.bodySmall, _DonutChartModule.default.subtitleSubtext, subtitleClassNames?.subtext)}">
+      ${centerSubtext ? centerSubtext : ''}
+    </span>
+  <span>`;
+  const donutChartSeries = series.map(seriesItem => ({
+    ...seriesItem,
+    data: seriesItem.data.map((dataItem, index) => ({
+      ...dataItem,
+      color: (0, _charts.getDataVizColor)(index)
+    }))
+  }));
+  const addColorToDrilldownSeries = series => series?.map(seriesItem => ({
+    ...seriesItem,
+    data: seriesItem.data.map((dataItem, index) => ({
+      ...dataItem,
+      color: (0, _charts.getDataVizColor)(index)
+    }))
+  }));
+  const donutDrilldown = drilldown ? {
+    ...drilldown,
+    series: addColorToDrilldownSeries(drilldown.series),
+    breadcrumbs: {
+      floating: false
+    }
+  } : {};
+  const defaultLineChartOptions = (0, _charts.getDonutChartOptions)({
+    legend,
+    defaultCenterHTML
+  });
+  const chartOptions = (0, _charts.mergeChartUserOptions)(defaultLineChartOptions, {
+    series: donutChartSeries,
+    drilldown: donutDrilldown,
+    ...userOptions
+  });
+  return /*#__PURE__*/React.createElement(_ChartWrapper.ChartWrapper, {
+    title: cardTitle
+    //$FlowFixMe[incompatible-type]
+    ,
+    ref: chartRef,
+    customExportOptions: customExportOptions,
+    headerActions: headerActions,
+    classNames: wrapperClassNames
+  }, /*#__PURE__*/React.createElement(_highchartsReactOfficial.default, {
+    highcharts: _highcharts.default,
+    containerProps: {
+      className: (0, _classify.default)(_DonutChartModule.default.donutChartContainer, highChart)
+    },
+    ref: chartRef,
+    options: chartOptions
+  }));
+};
+exports.DonutChart = DonutChart;

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

@@ -0,0 +1,147 @@
+// @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 {
+  Drilldown,
+  LegendOptionsType,
+  SeriesOptionsType,
+} from '../../types/charts';
+import {
+  getDataVizColor,
+  getDonutChartOptions,
+  mergeChartUserOptions,
+} from '../../utils/charts';
+import classify from '../../utils/classify';
+import type {ChartWrapperClassNames, ExportOptionType} from '../ChartWrapper';
+import {ChartWrapper} from '../ChartWrapper';
+
+import typographyCss from '../../styles/typography.module.css';
+import css from './DonutChart.module.css';
+
+
+type ClassNames = $ReadOnly<{
+  ...ChartWrapperClassNames,
+  highChart?: string,
+  subtitleClassNames?: SubtitleClassNames,
+}>;
+type DonutChartData = {
+  name: string,
+  value: number,
+};
+
+export type SubtitleClassNames = {
+  wrapper?: string,
+  text?: string,
+  subtext?: string,
+};
+
+export type DonutChartProps = {
+  classNames?: ClassNames,
+  cardTitle?: React.Node,
+  customExportOptions?: Array<ExportOptionType> | null,
+  headerActions?: React.Node,
+  centerText?: string,
+  centerSubtext?: string,
+  series: Array<SeriesOptionsType>,
+  drilldown: Drilldown,
+  legend?: LegendOptionsType,
+};
+
+export const DonutChart = ({
+  classNames,
+  cardTitle,
+  customExportOptions,
+  headerActions,
+  series,
+  drilldown,
+  legend,
+  centerText,
+  centerSubtext,
+  ...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,
+  });
+
+  const chartOptions = mergeChartUserOptions(defaultLineChartOptions, {
+    series: donutChartSeries,
+    drilldown: donutDrilldown,
+    ...userOptions,
+  });
+
+  return (
+    <ChartWrapper
+      title={cardTitle}
+      //$FlowFixMe[incompatible-type]
+      ref={chartRef}
+      customExportOptions={customExportOptions}
+      headerActions={headerActions}
+      classNames={wrapperClassNames}
+    >
+      <HighchartsReact
+        highcharts={Highcharts}
+        containerProps={{
+          className: classify(css.donutChartContainer, highChart),
+        }}
+        ref={chartRef}
+        options={chartOptions}
+      />
+    </ChartWrapper>
+  );
+};

package/lib/components/DonutChart/DonutChart.module.css

@@ -0,0 +1,65 @@
+@value (
+  fontSize12,
+  fontSize36,
+  fontWeightMedium,
+  fontWeightBook,
+  fontLineHeight100,
+  fontLineHeight130,
+  fontLetterSpacingMinus3,
+  fontLetterSpacing4
+) from  '../../styles/variables/_font.css';
+
+@value (colorTextPrimary, colorTextSecondary) from  '../../styles/variables/_color.css';
+@value (size240, size300, size400, size500, sizeFluid) from  '../../styles/variables/_size.css';
+
+@value (spaceNone, spaceXSmall) from  '../../styles/variables/_space.css';
+
+.wrapper {
+  display: flex;
+}
+
+.donutChartContainer {
+  width: sizeFluid;
+  min-width: size500;
+  min-height: size300;
+  display: block;
+  align-items: center;
+  justify-content: center;
+}
+
+.subtitleWrap {
+  display: flex;
+  gap: spaceXSmall;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: sizeFluid;
+}
+
+.subtitleText {
+  margin: spaceNone;
+  color: colorTextPrimary;
+
+  text-align: center;
+
+  width: sizeFluid;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: block;
+}
+
+.subtitleSubtext {
+  margin: spaceNone;
+  color: colorTextSecondary;
+
+  text-align: center;
+
+  width: sizeFluid;
+  overflow: hidden;
+  display: block;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}

package/lib/components/DonutChart/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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];
+    }
+  });
+});

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

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

package/lib/components/Grid/Grid.js

@@ -15,7 +15,8 @@ const GRID_SYSTEM_MAP = {
   small: 24,
   medium: 12,
   large: 6,
-  autoFill: 'auto-fill'
+  autoFill: 'auto-fill',
+  autoFit: 'auto-fit'
 };
 const Row = _ref => {
   let {
@@ -46,7 +47,7 @@ const Row = _ref => {
       columnSpanCount = lastChildColCount + offset + span;
       let gridColumnStart = 0,
         gridColumnEnd = 0;
-      if (gridType === 'autoFill') {
+      if (gridType === 'autoFill' || gridType === 'autoFit') {
         gridColumnStart = 'auto';
         return /*#__PURE__*/React.cloneElement(child, {
           gridColumnStart,

package/lib/components/Grid/Grid.js.flow

@@ -11,7 +11,7 @@ export type RowProps = {
   children?: React.Node,
   span?: number,
   offset?: number,
-  gridType?: 'small' | 'medium' | 'large' | 'autoFill',
+  gridType?: 'small' | 'medium' | 'large' | 'autoFill' | 'autoFit',
   repeatTracks?: string,
 };
 
@@ -20,6 +20,7 @@ const GRID_SYSTEM_MAP = {
   medium: 12,
   large: 6,
   autoFill: 'auto-fill',
+  autoFit: 'auto-fit',
 };
 
 export const Row = ({
@@ -47,7 +48,7 @@ export const Row = ({
       columnSpanCount = lastChildColCount + offset + span;
       let gridColumnStart = 0,
         gridColumnEnd = 0;
-      if (gridType === 'autoFill') {
+      if (gridType === 'autoFill' || gridType === 'autoFit') {
         gridColumnStart = 'auto';
         return React.cloneElement(child, {
           gridColumnStart,

package/lib/components/Icon/index.js

@@ -3,30 +3,36 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "ClickableIcon", {
-  enumerable: true,
-  get: function () {
-    return _ClickableIcon.ClickableIcon;
-  }
-});
-Object.defineProperty(exports, "CloseIcon", {
-  enumerable: true,
-  get: function () {
-    return _ClickableIcon.CloseIcon;
-  }
-});
-Object.defineProperty(exports, "Icon", {
-  enumerable: true,
-  get: function () {
-    return _Icon.Icon;
-  }
-});
-Object.defineProperty(exports, "SemanticIcon", {
-  enumerable: true,
-  get: function () {
-    return _SemanticIcon.SemanticIcon;
-  }
-});
 var _ClickableIcon = require("./ClickableIcon");
+Object.keys(_ClickableIcon).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ClickableIcon[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ClickableIcon[key];
+    }
+  });
+});
 var _Icon = require("./Icon");
-var _SemanticIcon = require("./SemanticIcon");
+Object.keys(_Icon).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Icon[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Icon[key];
+    }
+  });
+});
+var _SemanticIcon = require("./SemanticIcon");
+Object.keys(_SemanticIcon).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _SemanticIcon[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _SemanticIcon[key];
+    }
+  });
+});

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

@@ -1,8 +1,5 @@
 // @flow strict
 
-export type {CloseIconProps} from './ClickableIcon';
-export {ClickableIcon, CloseIcon} from './ClickableIcon';
-export type {IconProps, IconSize, IconType} from './Icon';
-export {Icon} from './Icon';
-export type {SemanticIconProps} from './SemanticIcon';
-export {SemanticIcon} from './SemanticIcon';
+export * from './ClickableIcon';
+export * from './Icon';
+export * from './SemanticIcon';