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

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.1.94-beta.2](https://github.com/spaced-out/ui-design-system/compare/v0.1.94-beta.1...v0.1.94-beta.2) (2024-05-14)
+
+
+### Bug Fixes
+
+* updated the correct folder structure ([#202](https://github.com/spaced-out/ui-design-system/issues/202)) ([ebfc464](https://github.com/spaced-out/ui-design-system/commit/ebfc464e93c7d9c637ef2987e393cf6e8f94c501))
+
+### [0.1.94-beta.1](https://github.com/spaced-out/ui-design-system/compare/v0.1.94-beta.0...v0.1.94-beta.1) (2024-05-13)
+
+
+### Features
+
+* **charts:** added loading prop to handle loading state for charts ([#201](https://github.com/spaced-out/ui-design-system/issues/201)) ([3d41fc1](https://github.com/spaced-out/ui-design-system/commit/3d41fc1b4ab64b97e80c09ba29f6b664e1b15465))
+
 ### [0.1.94-beta.0](https://github.com/spaced-out/ui-design-system/compare/v0.1.93...v0.1.94-beta.0) (2024-05-13)
 
 

package/lib/components/Charts/{ChartTooltip.module.css → ChartTooltip/ChartTooltip.module.css}

@@ -2,11 +2,11 @@
   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';
+  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;

package/lib/components/Charts/{ChartTooltip.js → ChartTooltip/index.js}

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.tooltipTheme = void 0;
-var _typographyModule = _interopRequireDefault(require("../../styles/typography.module.css"));
+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 }; }
 

package/lib/components/Charts/{ChartTooltip.js.flow → ChartTooltip/index.js.flow}

@@ -1,8 +1,8 @@
 // @flow strict
 
-import type {Tooltip} from '../../types/charts';
+import type {Tooltip} from '../../../types/charts';
 
-import typographyCss from '../../styles/typography.module.css';
+import typographyCss from '../../../styles/typography.module.css';
 import css from './ChartTooltip.module.css';
 
 

package/lib/components/{ChartWrapper → Charts/ChartWrapper}/ChartWrapper.js

@@ -9,10 +9,11 @@ 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 _size = require("../../../styles/variables/_size");
+var _classify = _interopRequireDefault(require("../../../utils/classify"));
+var _ButtonDropdown = require("../../ButtonDropdown");
+var _Card = require("../../Card");
+var _CircularLoader = require("../../CircularLoader");
 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); }
@@ -82,6 +83,7 @@ const CustomExportButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     }
   };
   return /*#__PURE__*/React.createElement(_ButtonDropdown.ButtonDropdown, {
+    ariaLabel: "Export Chart Menu",
     menu: {
       isFluid: true,
       menuDisabled: false,
@@ -98,6 +100,7 @@ const CustomExportButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
 });
 const ChartWrapper = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
+    isLoading,
     title,
     children,
     classNames,
@@ -108,7 +111,10 @@ const ChartWrapper = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     classNames: {
       wrapper: (0, _classify.default)(_ChartWrapperModule.default.wrapper, classNames?.wrapper)
     }
-  }, /*#__PURE__*/React.createElement(_Card.CardHeader, {
+  }, isLoading ? /*#__PURE__*/React.createElement(_CircularLoader.CircularLoader, {
+    size: "large",
+    className: (0, _classify.default)(_ChartWrapperModule.default.loader, classNames?.loader)
+  }) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Card.CardHeader, {
     className: classNames?.header
   }, /*#__PURE__*/React.createElement(_Card.CardTitle, {
     className: classNames?.title
@@ -119,6 +125,6 @@ const ChartWrapper = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     customExportOptions: customExportOptions
   }), headerActions ? headerActions : null)), /*#__PURE__*/React.createElement(_Card.CardContent, {
     className: (0, _classify.default)(_ChartWrapperModule.default.chartContent, classNames?.content)
-  }, children));
+  }, children)));
 });
 exports.ChartWrapper = ChartWrapper;

package/lib/components/{ChartWrapper → Charts/ChartWrapper}/ChartWrapper.js.flow

@@ -10,11 +10,18 @@ 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 {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';
 
@@ -89,6 +96,7 @@ const CustomExportButton = React.forwardRef<
 
   return (
     <ButtonDropdown
+      ariaLabel="Export Chart Menu"
       menu={{
         isFluid: true,
         menuDisabled: false,
@@ -111,9 +119,11 @@ export type ChartWrapperClassNames = $ReadOnly<{
   title?: string,
   actions?: string,
   content?: string,
+  loader?: string,
 }>;
 
 type ChartWrapperProps = {
+  isLoading?: boolean,
   title: React.Node,
   children?: React.Node,
   classNames?: ChartWrapperClassNames,
@@ -127,6 +137,7 @@ export const ChartWrapper: React$AbstractComponent<
 > = React.forwardRef<ChartWrapperProps, HTMLDivElement>(
   (
     {
+      isLoading,
       title,
       children,
       classNames,
@@ -136,21 +147,32 @@ export const ChartWrapper: React$AbstractComponent<
     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>
+      {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)}
+          >
+            {children}
+          </CardContent>
+        </>
+      )}
     </Card>
   ),
 );

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

@@ -0,0 +1,26 @@
+@value (spaceXSmall) from '../../../styles/variables/_space.css';
+@value (size4,size5,size50,size400,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;
+}
+
+.loader {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: calc(size4 + size5 + size50 + size400);
+}

package/lib/components/{ColumnChart → Charts/ColumnChart}/ColumnChart.js

@@ -7,8 +7,8 @@ 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 _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 }; }
@@ -21,6 +21,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 const ColumnChart = _ref => {
   let {
+    isLoading,
     classNames,
     cardTitle,
     customExportOptions,
@@ -65,6 +66,7 @@ const ColumnChart = _ref => {
     ...wrapperClassNames
   } = classNames || {};
   return /*#__PURE__*/React.createElement(_ChartWrapper.ChartWrapper, {
+    isLoading: isLoading,
     title: cardTitle,
     ref: chartRef,
     classNames: wrapperClassNames,

package/lib/components/{ColumnChart → Charts/ColumnChart}/ColumnChart.js.flow

@@ -6,41 +6,51 @@ import Highcharts from 'highcharts';
 //$FlowFixMe[untyped-import]
 import HighchartsReact from 'highcharts-react-official';
 
-import type {Drilldown} from '../../types/charts';
+import type {
+  ChartOptions,
+  DataOptionsType,
+  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';
+} from '../../../utils/charts';
+import classify from '../../../utils/classify';
+import {
+  type ChartWrapperClassNames,
+  type ExportOptionType,
+  ChartWrapper,
+} from '../ChartWrapper';
 
 import css from './ColumnChart.module.css';
 
 
-type ClassNames = $ReadOnly<{
+export type ClassNames = $ReadOnly<{
   ...ChartWrapperClassNames,
   highChart?: string,
 }>;
 
-type ColumnSeriesItem = {
+export type ColumnSeries = {
   name: string,
-  data: [],
+  data: DataOptionsType[],
 };
 
 export type ColumnChartProps = {
+  ...ChartOptions,
+  isLoading?: boolean,
   classNames?: ClassNames,
-  cardTitle?: string,
+  cardTitle?: React.Node,
   customExportOptions?: Array<ExportOptionType> | null,
-  series: Array<ColumnSeriesItem>,
-  drilldown: Drilldown,
+  series: Array<ColumnSeries>,
+  drilldown?: Drilldown,
   headerActions?: React.Node,
   ...
 };
 
 export const ColumnChart = ({
+  isLoading,
   classNames,
   cardTitle,
   customExportOptions,
@@ -90,6 +100,7 @@ export const ColumnChart = ({
 
   return (
     <ChartWrapper
+      isLoading={isLoading}
       title={cardTitle}
       ref={chartRef}
       classNames={wrapperClassNames}

package/lib/components/{ColumnChart → Charts/ColumnChart}/ColumnChart.module.css

@@ -1,5 +1,5 @@
-@value (colorFillPrimary) from '../../styles/variables/_color.css';
-@value (size400, size660, sizeFluid) from  '../../styles/variables/_size.css';
+@value (colorFillPrimary) from '../../../styles/variables/_color.css';
+@value (size400, size660, sizeFluid) from  '../../../styles/variables/_size.css';
 
 .columnChartContainer {
   width: sizeFluid;

package/lib/components/{DonutChart → Charts/DonutChart}/DonutChart.js

@@ -7,10 +7,10 @@ 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 _charts = require("../../../utils/charts");
+var _classify = _interopRequireDefault(require("../../../utils/classify"));
 var _ChartWrapper = require("../ChartWrapper");
-var _typographyModule = _interopRequireDefault(require("../../styles/typography.module.css"));
+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); }
@@ -22,6 +22,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 const DonutChart = _ref => {
   let {
+    isLoading,
     classNames,
     cardTitle,
     customExportOptions,
@@ -72,15 +73,16 @@ const DonutChart = _ref => {
     legend,
     defaultCenterHTML
   });
+
+  //$FlowFixMe[cannot-spread-inexact]
   const chartOptions = (0, _charts.mergeChartUserOptions)(defaultLineChartOptions, {
     series: donutChartSeries,
     drilldown: donutDrilldown,
     ...userOptions
   });
   return /*#__PURE__*/React.createElement(_ChartWrapper.ChartWrapper, {
-    title: cardTitle
-    //$FlowFixMe[incompatible-type]
-    ,
+    isLoading: isLoading,
+    title: cardTitle,
     ref: chartRef,
     customExportOptions: customExportOptions,
     headerActions: headerActions,

package/lib/components/{DonutChart → Charts/DonutChart}/DonutChart.js.flow

@@ -7,32 +7,32 @@ import Highcharts from 'highcharts';
 import HighchartsReact from 'highcharts-react-official';
 
 import type {
+  ChartOptions,
   Drilldown,
   LegendOptionsType,
   SeriesOptionsType,
-} from '../../types/charts';
+} 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';
+} from '../../../utils/charts';
+import classify from '../../../utils/classify';
+import {
+  type ChartWrapperClassNames,
+  type ExportOptionType,
+  ChartWrapper,
+} from '../ChartWrapper';
 
-import typographyCss from '../../styles/typography.module.css';
+import typographyCss from '../../../styles/typography.module.css';
 import css from './DonutChart.module.css';
 
 
-type ClassNames = $ReadOnly<{
+export type ClassNames = $ReadOnly<{
   ...ChartWrapperClassNames,
   highChart?: string,
   subtitleClassNames?: SubtitleClassNames,
 }>;
-type DonutChartData = {
-  name: string,
-  value: number,
-};
 
 export type SubtitleClassNames = {
   wrapper?: string,
@@ -41,6 +41,8 @@ export type SubtitleClassNames = {
 };
 
 export type DonutChartProps = {
+  ...ChartOptions,
+  isLoading?: boolean,
   classNames?: ClassNames,
   cardTitle?: React.Node,
   customExportOptions?: Array<ExportOptionType> | null,
@@ -48,11 +50,13 @@ export type DonutChartProps = {
   centerText?: string,
   centerSubtext?: string,
   series: Array<SeriesOptionsType>,
-  drilldown: Drilldown,
+  drilldown?: Drilldown,
   legend?: LegendOptionsType,
+  ...
 };
 
 export const DonutChart = ({
+  isLoading,
   classNames,
   cardTitle,
   customExportOptions,
@@ -119,6 +123,7 @@ export const DonutChart = ({
     defaultCenterHTML,
   });
 
+  //$FlowFixMe[cannot-spread-inexact]
   const chartOptions = mergeChartUserOptions(defaultLineChartOptions, {
     series: donutChartSeries,
     drilldown: donutDrilldown,
@@ -127,8 +132,8 @@ export const DonutChart = ({
 
   return (
     <ChartWrapper
+      isLoading={isLoading}
       title={cardTitle}
-      //$FlowFixMe[incompatible-type]
       ref={chartRef}
       customExportOptions={customExportOptions}
       headerActions={headerActions}

package/lib/components/{DonutChart → Charts/DonutChart}/DonutChart.module.css

@@ -7,12 +7,12 @@
   fontLineHeight130,
   fontLetterSpacingMinus3,
   fontLetterSpacing4
-) from  '../../styles/variables/_font.css';
+) 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 (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';
+@value (spaceNone, spaceXSmall) from  '../../../styles/variables/_space.css';
 
 .wrapper {
   display: flex;

package/lib/components/{LineChart → Charts/LineChart}/LineChart.js

@@ -7,8 +7,8 @@ exports.LineChart = 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 _charts = require("../../../utils/charts");
+var _classify = _interopRequireDefault(require("../../../utils/classify"));
 var _ChartWrapper = require("../ChartWrapper");
 var _LineChartModule = _interopRequireDefault(require("./LineChart.module.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -21,6 +21,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 const LineChart = _ref => {
   let {
+    isLoading,
     classNames,
     cardTitle,
     customExportOptions,
@@ -55,6 +56,7 @@ const LineChart = _ref => {
     ...wrapperClassNames
   } = classNames || {};
   return /*#__PURE__*/React.createElement(_ChartWrapper.ChartWrapper, {
+    isLoading: isLoading,
     title: cardTitle,
     ref: chartRef,
     classNames: wrapperClassNames,

package/lib/components/{LineChart → Charts/LineChart}/LineChart.js.flow

@@ -6,40 +6,50 @@ import Highcharts from 'highcharts';
 //$FlowFixMe[untyped-import]
 import HighchartsReact from 'highcharts-react-official';
 
-import type {Drilldown} from '../../types/charts';
+import type {
+  ChartOptions,
+  DataOptionsType,
+  Drilldown,
+} from '../../../types/charts';
 import {
   getDataVizColor,
   getLineChartOptions,
   mergeChartUserOptions,
-} from '../../utils/charts';
-import classify from '../../utils/classify';
-import type {ChartWrapperClassNames, ExportOptionType} from '../ChartWrapper';
-import {ChartWrapper} from '../ChartWrapper';
+} from '../../../utils/charts';
+import classify from '../../../utils/classify';
+import {
+  type ChartWrapperClassNames,
+  type ExportOptionType,
+  ChartWrapper,
+} from '../ChartWrapper';
 
 import css from './LineChart.module.css';
 
 
-type ClassNames = $ReadOnly<{
+export type ClassNames = $ReadOnly<{
   ...ChartWrapperClassNames,
   highChart?: string,
 }>;
 
-type LineSeriesItem = {
+export type LineSeriesItem = {
   name: string,
-  data: [],
+  data: DataOptionsType[],
 };
 
 export type LineChartProps = {
+  ...ChartOptions,
+  isLoading?: boolean,
   classNames?: ClassNames,
-  cardTitle?: string,
+  cardTitle?: React.Node,
   customExportOptions?: Array<ExportOptionType> | null,
   series: Array<LineSeriesItem>,
   headerActions?: React.Node,
-  drilldown: Drilldown,
+  drilldown?: Drilldown,
   ...
 };
 
 export const LineChart = ({
+  isLoading,
   classNames,
   cardTitle,
   customExportOptions,
@@ -77,6 +87,7 @@ export const LineChart = ({
 
   return (
     <ChartWrapper
+      isLoading={isLoading}
       title={cardTitle}
       ref={chartRef}
       classNames={wrapperClassNames}

package/lib/components/{LineChart → Charts/LineChart}/LineChart.module.css

@@ -1,5 +1,5 @@
-@value (colorFillPrimary) from '../../styles/variables/_color.css';
-@value (size400, size660, sizeFluid) from  '../../styles/variables/_size.css';
+@value (colorFillPrimary) from '../../../styles/variables/_color.css';
+@value (size400, size660, sizeFluid) from  '../../../styles/variables/_size.css';
 
 .wrapper {
   display: flex;

package/lib/components/{SpiderChart → Charts/SpiderChart}/SpiderChart.js

@@ -8,8 +8,8 @@ var React = _interopRequireWildcard(require("react"));
 var _highcharts = _interopRequireDefault(require("highcharts"));
 var _highchartsMore = _interopRequireDefault(require("highcharts/highcharts-more"));
 var _highchartsReactOfficial = _interopRequireDefault(require("highcharts-react-official"));
-var _charts = require("../../utils/charts");
-var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _charts = require("../../../utils/charts");
+var _classify = _interopRequireDefault(require("../../../utils/classify"));
 var _ChartWrapper = require("../ChartWrapper");
 var _SpiderChartModule = _interopRequireDefault(require("./SpiderChart.module.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -27,6 +27,7 @@ if (!!_highchartsMore.default && !!_highcharts.default && typeof _highchartsMore
 }
 const SpiderChart = _ref => {
   let {
+    isLoading,
     classNames,
     cardTitle,
     customExportOptions,
@@ -54,6 +55,7 @@ const SpiderChart = _ref => {
     ...wrapperClassNames
   } = classNames || {};
   return /*#__PURE__*/React.createElement(_ChartWrapper.ChartWrapper, {
+    isLoading: isLoading,
     title: cardTitle,
     ref: chartRef,
     customExportOptions: customExportOptions,

package/lib/components/{SpiderChart → Charts/SpiderChart}/SpiderChart.js.flow

@@ -8,14 +8,18 @@ import highChartsMore from 'highcharts/highcharts-more';
 //$FlowFixMe[untyped-import]
 import HighchartsReact from 'highcharts-react-official';
 
+import type {ChartOptions, DataOptionsType} from '../../../types/charts';
 import {
   getDataVizColor,
   getSpiderChartOptions,
   mergeChartUserOptions,
-} from '../../utils/charts';
-import classify from '../../utils/classify';
-import type {ChartWrapperClassNames, ExportOptionType} from '../ChartWrapper';
-import {ChartWrapper} from '../ChartWrapper';
+} from '../../../utils/charts';
+import classify from '../../../utils/classify';
+import {
+  type ChartWrapperClassNames,
+  type ExportOptionType,
+  ChartWrapper,
+} from '../ChartWrapper';
 
 import css from './SpiderChart.module.css';
 
@@ -29,39 +33,29 @@ if (
   highChartsMore(Highcharts);
 }
 
-type ClassNames = $ReadOnly<{
+export type ClassNames = $ReadOnly<{
   ...ChartWrapperClassNames,
   highChart?: string,
 }>;
 
-type SpiderSeriesItem = {
+export type SpiderSeriesItem = {
   name: string,
-  data: [],
+  data: DataOptionsType[],
 };
 
 export type SpiderChartProps = {
+  ...ChartOptions,
+  isLoading?: boolean,
   classNames?: ClassNames,
   cardTitle?: React.Node,
   customExportOptions?: Array<ExportOptionType> | null,
   headerActions?: React.Node,
   series: Array<SpiderSeriesItem>,
-  legend: {...},
-  xAxis: {
-    categories: Array<string>,
-    tickmarkPlacement: string,
-    lineWidth: number,
-    ...
-  },
-  yAxis: {
-    gridLineInterpolation: 'circle' | 'polygon',
-    lineWidth: 0,
-    min: 0,
-    ...
-  },
   ...
 };
 
 export const SpiderChart = ({
+  isLoading,
   classNames,
   cardTitle,
   customExportOptions,
@@ -91,6 +85,7 @@ export const SpiderChart = ({
 
   return (
     <ChartWrapper
+      isLoading={isLoading}
       title={cardTitle}
       ref={chartRef}
       customExportOptions={customExportOptions}

package/lib/components/{SpiderChart → Charts/SpiderChart}/SpiderChart.module.css

@@ -1,5 +1,5 @@
-@value (colorFillPrimary) from '../../styles/variables/_color.css';
-@value (size400, size540, size660, size880, sizeFluid) from '../../styles/variables/_size.css';
+@value (colorFillPrimary) from '../../../styles/variables/_color.css';
+@value (size400, size540, size660, size880, sizeFluid) from '../../../styles/variables/_size.css';
 
 .wrapper {
   display: flex;

package/lib/components/Charts/index.js

@@ -3,7 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _ChartWrapper = require("../ChartWrapper");
+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];
+    }
+  });
+});
+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;
@@ -14,7 +25,7 @@ Object.keys(_ChartWrapper).forEach(function (key) {
     }
   });
 });
-var _ColumnChart = require("../ColumnChart");
+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;
@@ -25,7 +36,7 @@ Object.keys(_ColumnChart).forEach(function (key) {
     }
   });
 });
-var _DonutChart = require("../DonutChart");
+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;
@@ -36,7 +47,7 @@ Object.keys(_DonutChart).forEach(function (key) {
     }
   });
 });
-var _LineChart = require("../LineChart");
+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;
@@ -47,7 +58,7 @@ Object.keys(_LineChart).forEach(function (key) {
     }
   });
 });
-var _SpiderChart = require("../SpiderChart");
+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;
@@ -57,15 +68,4 @@ Object.keys(_SpiderChart).forEach(function (key) {
       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

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

package/lib/components/StickyBar/StickyBar.module.css

@@ -1,13 +1,13 @@
 @value (colorFillPrimary, colorBackgroundTertiary) from '../../styles/variables/_color.css';
 @value (sizeFluid) from '../../styles/variables/_size.css';
-@value (spaceLarge, spaceMedium, spaceXSmall, spaceSmall) from '../../styles/variables/_space.css';
+@value (spaceMedium, spaceXSmall, spaceSmall) from '../../styles/variables/_space.css';
 
 .wrapper {
   display: flex;
   width: sizeFluid;
   align-items: center;
   justify-content: space-between;
-  padding: spaceMedium spaceLarge;
+  padding: spaceMedium spaceMedium;
   gap: spaceXSmall;
   background: colorBackgroundTertiary;
 }

package/lib/types/charts.js.flow

@@ -25,12 +25,13 @@ export type ChartOptions = {
   tooltip?: Tooltip,
   xAxis?: AxisOptions,
   yAxis?: AxisOptions,
+  zAxis?: AxisOptions,
   drilldown?: Drilldown,
   legend?: LegendOptionsType,
   plotOptions?: PlotOptionsType,
   series?: Array<SeriesOptionsType>,
   subtitle?: {
-    useHTML: true,
+    useHTML: boolean,
     text?: string,
     verticalAlign: 'middle',
     align: string,
@@ -41,6 +42,8 @@ export type ChartOptions = {
     center: [string, string],
     size: string,
   },
+  credits?: Credits,
+  legend?: Legend,
   ...
 };
 
@@ -103,7 +106,13 @@ export type CSSObject = {
   ...
 };
 
-export type DataOptionsType = {y: number, name: string, color: string, ...};
+export type DataOptionsType = {
+  y: number,
+  name: string,
+  color: string,
+  drilldown?: string,
+  ...
+};
 
 export type SeriesOptionsType = {
   id?: string,
@@ -150,3 +159,39 @@ export type Tooltip = {
   shared?: boolean,
   ...
 };
+
+export type Legend = {
+  align?: 'left' | 'center' | 'right',
+  alignColumns?: boolean,
+  backgroundColor?: string,
+  borderColor?: string,
+  borderRadius?: number,
+  borderWidth?: number,
+  className?: string,
+  enabled?: boolean,
+  floating?: boolean,
+  itemDistance?: number,
+  itemMarginBottom?: number,
+  itemMarginBottom?: number,
+  itemMarginBottom?: number,
+  labelFormat?: string,
+  layout?: 'horizontal' | 'vertical' | 'proximate',
+  margin?: number,
+  maxHeight?: number,
+  padding?: number,
+  reversed?: boolean,
+  x?: number,
+  y?: number,
+  ...
+};
+
+export type Credits = {
+  enabled?: boolean,
+  href?: string,
+  position?: {
+    align?: 'right' | 'left',
+    verticalAlign?: 'bottom' | 'top',
+    x?: number,
+    y?: number,
+  },
+};

package/lib/types/index.js

@@ -3,6 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _charts = require("./charts");
+Object.keys(_charts).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _charts[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _charts[key];
+    }
+  });
+});
 var _common = require("./common");
 Object.keys(_common).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/lib/types/index.js.flow

@@ -1,5 +1,6 @@
 // @flow strict
 
+export * from './charts';
 export * from './common';
 export * from './toast';
 export * from './typography';

package/lib/utils/charts/charts.js

@@ -4,10 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.mergeChartUserOptions = exports.getDataVizColor = exports.commonChartOptions = exports.breadcrumbStyle = exports.DATA_VIZ_COLORS = void 0;
-var _Charts = require("../../components/Charts");
 var _color = require("../../styles/variables/_color");
 var _helpers = require("./helpers");
 var _typography = require("./typography");
+var _ChartTooltipModule = _interopRequireDefault(require("../../components/Charts/ChartTooltip/ChartTooltip.module.css"));
+var _typographyModule = _interopRequireDefault(require("../../styles/typography.module.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const DATA_VIZ_COLORS = [_color.colorDataViz1, _color.colorDataViz2, _color.colorDataViz3, _color.colorDataViz4, _color.colorDataViz5, _color.colorDataViz6, _color.colorDataViz7, _color.colorDataViz8];
 exports.DATA_VIZ_COLORS = DATA_VIZ_COLORS;
@@ -45,7 +47,11 @@ const commonChartOptions = {
     backgroundColor: _color.colorTooltipFill,
     useHTML: true,
     outside: true,
-    ..._Charts.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>`
   },
   drilldown: {
     breadcrumbs: {
@@ -57,7 +63,6 @@ const commonChartOptions = {
     }
   },
   legend: {
-    useHTML: true,
     itemStyle: {
       ..._typography.formLabelSmall,
       paddingTop: '1px'

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

@@ -1,6 +1,5 @@
 // @flow strict
 
-import {tooltipTheme} from '../../components/Charts';
 import {
   colorDataViz1,
   colorDataViz2,
@@ -18,6 +17,9 @@ import type {ChartOptions} from '../../types/charts';
 import {deepMerge} from './helpers';
 import {formLabelSmall, subTitleExtraSmall} from './typography';
 
+import css from '../../components/Charts/ChartTooltip/ChartTooltip.module.css';
+import typographyCss from '../../styles/typography.module.css';
+
 
 export const DATA_VIZ_COLORS = [
   colorDataViz1,
@@ -64,7 +66,11 @@ export const commonChartOptions: $Shape<ChartOptions> = {
     backgroundColor: colorTooltipFill,
     useHTML: true,
     outside: true,
-    ...tooltipTheme,
+    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>`,
   },
   drilldown: {
     breadcrumbs: {
@@ -76,7 +82,6 @@ export const commonChartOptions: $Shape<ChartOptions> = {
     },
   },
   legend: {
-    useHTML: true,
     itemStyle: {...formLabelSmall, paddingTop: '1px'},
     symbolHeight: 8,
     enabled: true,

package/lib/utils/charts/donutChart.js

@@ -26,21 +26,16 @@ const rightLegendColumn = {
   // take it as 10% of width as left margin
   width: `${LEGEND_WIDTH * 90}%`
 };
-exports.rightLegendColumn = rightLegendColumn;
-const commonLegendOption = _charts.commonChartOptions.legend;
 
 /**
  * This function modifies the the common chart behavior to donut chart default behavior.
  * It will not take userPassed option into account.
  */
-
+exports.rightLegendColumn = rightLegendColumn;
 const getDonutChartOptions = _ref => {
   let {
     legend,
-    defaultCenterHTML,
-    subtitleSize,
-    centerTextX,
-    tooltip
+    defaultCenterHTML
   } = _ref;
   const legendOption = (0, _helpers.deepMerge)(_charts.commonChartOptions.legend, legend);
   const isLegendEnabled = legendOption.enabled;

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

@@ -1,27 +1,14 @@
 // @flow strict
 
-import type {
-  ChartOptions,
-  LegendOptionsType,
-  Tooltip,
-} from '../../types/charts';
+import type {ChartOptions, LegendOptionsType} from '../../types/charts';
 
 import {commonChartOptions} from './charts';
 import {deepMerge} from './helpers';
 
 
-type DonutChartDataType = {
-  name?: string,
-  color?: string,
-  y?: number,
-};
-
 type DonutChartPropsType = {
   legend?: LegendOptionsType,
   defaultCenterHTML?: string,
-  subtitleSize?: string,
-  centerTextX?: number,
-  tooltip?: Tooltip,
 };
 
 /**
@@ -44,8 +31,6 @@ export const rightLegendColumn = {
   width: `${LEGEND_WIDTH * 90}%`,
 };
 
-const commonLegendOption = commonChartOptions.legend;
-
 /**
  * This function modifies the the common chart behavior to donut chart default behavior.
  * It will not take userPassed option into account.
@@ -54,11 +39,7 @@ const commonLegendOption = commonChartOptions.legend;
 export const getDonutChartOptions = ({
   legend,
   defaultCenterHTML,
-  subtitleSize,
-  centerTextX,
-  tooltip,
-}: //$FlowFixMe[prop-missing]
-DonutChartPropsType): ChartOptions => {
+}: DonutChartPropsType): ChartOptions => {
   const legendOption = deepMerge(commonChartOptions.legend, legend);
   const isLegendEnabled = legendOption.enabled;
   return {

package/lib/utils/index.js

@@ -14,6 +14,17 @@ Object.keys(_array).forEach(function (key) {
     }
   });
 });
+var _charts = require("./charts");
+Object.keys(_charts).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _charts[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _charts[key];
+    }
+  });
+});
 var _classify = require("./classify");
 Object.keys(_classify).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/lib/utils/index.js.flow

@@ -1,6 +1,7 @@
 // @flow strict
 
 export * from './array';
+export * from './charts';
 export * from './classify';
 export * from './click-away';
 export * from './dom';

package/package.json

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

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

@@ -1,19 +0,0 @@
-@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;
-}