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

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.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/ChartWrapper/ChartWrapper.js

@@ -13,6 +13,7 @@ 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/ChartWrapper.js.flow

@@ -14,6 +14,7 @@ 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 +90,7 @@ const CustomExportButton = React.forwardRef<
 
   return (
     <ButtonDropdown
+      ariaLabel="Export Chart Menu"
       menu={{
         isFluid: true,
         menuDisabled: false,
@@ -111,9 +113,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 +131,7 @@ export const ChartWrapper: React$AbstractComponent<
 > = React.forwardRef<ChartWrapperProps, HTMLDivElement>(
   (
     {
+      isLoading,
       title,
       children,
       classNames,
@@ -136,21 +141,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/ChartWrapper/ChartWrapper.module.css

@@ -1,5 +1,5 @@
 @value (spaceXSmall) from '../../styles/variables/_space.css';
-@value (size960) from '../../styles/variables/_size.css';
+@value (size4,size5,size50,size400,size960) from '../../styles/variables/_size.css';
 
 .wrapper {
   display: flex;
@@ -17,3 +17,10 @@
   overflow-x: auto;
   display: flex;
 }
+
+.loader {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: calc(size4 + size5 + size50 + size400);
+}

package/lib/components/Charts/index.js

@@ -3,6 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _charts = require("../../types/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 _ChartWrapper = require("../ChartWrapper");
 Object.keys(_ChartWrapper).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

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

@@ -1,5 +1,6 @@
 // @flow strict
 
+export * from '../../types/charts';
 export * from '../ChartWrapper';
 export * from '../ColumnChart';
 export * from '../DonutChart';

package/lib/components/ColumnChart/ColumnChart.js

@@ -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/ColumnChart.js.flow

@@ -6,7 +6,7 @@ import Highcharts from 'highcharts';
 //$FlowFixMe[untyped-import]
 import HighchartsReact from 'highcharts-react-official';
 
-import type {Drilldown} from '../../types/charts';
+import type {DataOptionsType, Drilldown} from '../../types/charts';
 import {
   columnPlotWidth,
   getColumnChartOptions,
@@ -25,22 +25,24 @@ type ClassNames = $ReadOnly<{
   highChart?: string,
 }>;
 
-type ColumnSeriesItem = {
+type ColumnSeries = {
   name: string,
-  data: [],
+  data: DataOptionsType[],
 };
 
 export type ColumnChartProps = {
+  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 +92,7 @@ export const ColumnChart = ({
 
   return (
     <ChartWrapper
+      isLoading={isLoading}
       title={cardTitle}
       ref={chartRef}
       classNames={wrapperClassNames}

package/lib/components/DonutChart/DonutChart.js

@@ -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/DonutChart.js.flow

@@ -29,10 +29,6 @@ type ClassNames = $ReadOnly<{
   highChart?: string,
   subtitleClassNames?: SubtitleClassNames,
 }>;
-type DonutChartData = {
-  name: string,
-  value: number,
-};
 
 export type SubtitleClassNames = {
   wrapper?: string,
@@ -41,6 +37,7 @@ export type SubtitleClassNames = {
 };
 
 export type DonutChartProps = {
+  isLoading?: boolean,
   classNames?: ClassNames,
   cardTitle?: React.Node,
   customExportOptions?: Array<ExportOptionType> | null,
@@ -48,11 +45,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 +118,7 @@ export const DonutChart = ({
     defaultCenterHTML,
   });
 
+  //$FlowFixMe[cannot-spread-inexact]
   const chartOptions = mergeChartUserOptions(defaultLineChartOptions, {
     series: donutChartSeries,
     drilldown: donutDrilldown,
@@ -127,8 +127,8 @@ export const DonutChart = ({
 
   return (
     <ChartWrapper
+      isLoading={isLoading}
       title={cardTitle}
-      //$FlowFixMe[incompatible-type]
       ref={chartRef}
       customExportOptions={customExportOptions}
       headerActions={headerActions}

package/lib/components/LineChart/LineChart.js

@@ -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/LineChart.js.flow

@@ -6,7 +6,7 @@ import Highcharts from 'highcharts';
 //$FlowFixMe[untyped-import]
 import HighchartsReact from 'highcharts-react-official';
 
-import type {Drilldown} from '../../types/charts';
+import type {DataOptionsType, Drilldown} from '../../types/charts';
 import {
   getDataVizColor,
   getLineChartOptions,
@@ -26,20 +26,22 @@ type ClassNames = $ReadOnly<{
 
 type LineSeriesItem = {
   name: string,
-  data: [],
+  data: DataOptionsType[],
 };
 
 export type LineChartProps = {
+  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 +79,7 @@ export const LineChart = ({
 
   return (
     <ChartWrapper
+      isLoading={isLoading}
       title={cardTitle}
       ref={chartRef}
       classNames={wrapperClassNames}

package/lib/components/SpiderChart/SpiderChart.js

@@ -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/SpiderChart.js.flow

@@ -8,6 +8,7 @@ import highChartsMore from 'highcharts/highcharts-more';
 //$FlowFixMe[untyped-import]
 import HighchartsReact from 'highcharts-react-official';
 
+import type {DataOptionsType} from '../../types/charts';
 import {
   getDataVizColor,
   getSpiderChartOptions,
@@ -36,32 +37,21 @@ type ClassNames = $ReadOnly<{
 
 type SpiderSeriesItem = {
   name: string,
-  data: [],
+  data: DataOptionsType[],
 };
 
 export type SpiderChartProps = {
+  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 +81,7 @@ export const SpiderChart = ({
 
   return (
     <ChartWrapper
+      isLoading={isLoading}
       title={cardTitle}
       ref={chartRef}
       customExportOptions={customExportOptions}

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/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.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.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/package.json

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