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

package/lib/components/Charts/DonutChart/DonutChart.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import type { ChartOptions, Drilldown, LegendOptionsType, SeriesOptionsType } from '../../../types/charts';
+import { ChartWrapperClassNames, ExportOptionType } from '../ChartWrapper';
+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.ReactNode;
+    customExportOptions?: Array<ExportOptionType> | null;
+    headerActions?: React.ReactNode;
+    centerText?: string;
+    centerSubtext?: string;
+    series: Array<SeriesOptionsType>;
+    drilldown?: Drilldown;
+    legend?: LegendOptionsType;
+    hasEmptyData?: boolean;
+    emptyText?: React.ReactNode;
+});
+export declare const DonutChart: ({ isLoading, classNames, cardTitle, customExportOptions, headerActions, series, drilldown, legend, centerText, centerSubtext, hasEmptyData, emptyText, ...userOptions }: DonutChartProps) => React.JSX.Element;
+//# sourceMappingURL=DonutChart.d.ts.map

package/lib/components/Charts/DonutChart/DonutChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DonutChart.d.ts","sourceRoot":"","sources":["../../../../src/components/Charts/DonutChart/DonutChart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EACV,YAAY,EACZ,SAAS,EACT,iBAAiB,EACjB,iBAAiB,EAClB,MAAM,uBAAuB,CAAC;AAO/B,OAAO,EACL,sBAAsB,EACtB,gBAAgB,EAEjB,MAAM,iBAAiB,CAAC;AAMzB,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC,CAAC,CAAC,sBAAsB,CAAC,GAAG;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;CACzC,CAAC,CAAC,CAAC;AAEJ,MAAM,MAAM,kBAAkB,GAAG;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,CAAC,CAAC,YAAY,CAAC,GAAG;IAC9C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,mBAAmB,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAC;IACrD,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,KAAK,CAAC,iBAAiB,CAAC,CAAC;IACjC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B,CAAC,CAAC;AAEH,eAAO,MAAM,UAAU,GACrB,yKAcG,eAAe,sBAuFnB,CAAC"}

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

@@ -14,8 +14,6 @@ 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,
@@ -32,6 +30,7 @@ const DonutChart = _ref => {
     emptyText,
     ...userOptions
   } = _ref;
+  // @ts-ignore - TS2554 - Expected 1 arguments, but got 0.
   const chartRef = React.useRef();
   const {
     highChart,
@@ -71,8 +70,6 @@ const DonutChart = _ref => {
     legend,
     defaultCenterHTML
   });
-
-  //$FlowFixMe[cannot-spread-inexact]
   const chartOptions = (0, _charts.mergeChartUserOptions)(defaultLineChartOptions, {
     series: donutChartSeries,
     drilldown: donutDrilldown,
@@ -80,7 +77,9 @@ const DonutChart = _ref => {
   });
   return /*#__PURE__*/React.createElement(_ChartWrapper.ChartWrapper, {
     isLoading: isLoading,
-    title: cardTitle,
+    title: cardTitle
+    // @ts-ignore - TS2769 - No overload matches this call.
+    ,
     ref: chartRef,
     customExportOptions: customExportOptions,
     headerActions: headerActions,
@@ -91,7 +90,9 @@ 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.stories.d.ts

@@ -0,0 +1,226 @@
+import * as React from 'react';
+import type { DonutChartProps } from './';
+declare const _default: {
+    tags: string[];
+    title: string;
+    component: ({ isLoading, classNames, cardTitle, customExportOptions, headerActions, series, drilldown, legend, centerText, centerSubtext, hasEmptyData, emptyText, ...userOptions }: DonutChartProps) => React.JSX.Element;
+    argTypes: {
+        isLoading: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        classNames: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        cardTitle: {
+            description: string;
+            control: {
+                type: string;
+            };
+            type: {
+                summary: string;
+            };
+        };
+        centerText: {
+            description: string;
+            control: {
+                type: string;
+            };
+        };
+        centerSubtext: {
+            description: string;
+            control: {
+                type: string;
+            };
+        };
+        customExportOptions: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        series: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        legend: {
+            description: string;
+            control: {
+                type: string;
+            };
+        };
+        headerActions: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        hasEmptyData: {
+            description: string;
+            control: {
+                type: string;
+            };
+        };
+        emptyText: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+    };
+    parameters: {
+        docs: {
+            subtitle: string;
+            description: {
+                component: string;
+            };
+        };
+        storySource: {
+            componentPath: string;
+        };
+    };
+};
+export default _default;
+export declare const _DonutChart: {
+    (args: DonutChartProps): React.JSX.Element;
+    args: {
+        classNames: {
+            wrapper: string;
+            content: string;
+        };
+        cardTitle: string;
+        centerText: string;
+        centerSubtext: string;
+        customExportOptions: {
+            key: string;
+            label: string;
+            format: string;
+        }[];
+        series: {
+            name: string;
+            data: {
+                name: string;
+                y: number;
+            }[];
+        }[];
+        legend: {
+            readonly enabled: true;
+        };
+    };
+};
+export declare const _DonutChartWithEmptyData: {
+    (args: DonutChartProps): React.JSX.Element;
+    args: {
+        classNames: {
+            wrapper: string;
+            content: string;
+        };
+        cardTitle: string;
+        centerText: string;
+        centerSubtext: string;
+        customExportOptions: {
+            key: string;
+            label: string;
+            format: string;
+        }[];
+        series: {
+            name: string;
+            data: {
+                name: string;
+                y: number;
+            }[];
+        }[];
+        legend: {
+            readonly enabled: true;
+        };
+        hasEmptyData: boolean;
+        emptyText: React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+    };
+};
+export declare const _DonutChartWithDrilldown: {
+    (args: DonutChartProps): React.JSX.Element;
+    args: {
+        classNames: {
+            wrapper: string;
+            content: string;
+        };
+        cardTitle: string;
+        centerText: string;
+        centerSubtext: string;
+        series: {
+            type: string;
+            name: string;
+            innerSize: string;
+            data: {
+                name: string;
+                y: number;
+                drilldown: string;
+            }[];
+        }[];
+        drilldown: {
+            readonly series: readonly [{
+                readonly id: "chrome";
+                readonly data: readonly [{
+                    readonly name: "Version 80";
+                    readonly y: 10;
+                }, {
+                    readonly name: "Version 81";
+                    readonly y: 15;
+                }];
+            }, {
+                readonly id: "firefox";
+                readonly data: readonly [{
+                    readonly name: "Version 75";
+                    readonly y: 8;
+                }, {
+                    readonly name: "Version 76";
+                    readonly y: 12;
+                }];
+            }, {
+                readonly id: "safari";
+                readonly data: readonly [{
+                    readonly name: "Version 12";
+                    readonly y: 5;
+                }, {
+                    readonly name: "Version 13";
+                    readonly y: 10;
+                }];
+            }];
+        };
+        legend: {
+            readonly enabled: false;
+        };
+    };
+};
+//# sourceMappingURL=DonutChart.stories.d.ts.map

package/lib/components/Charts/DonutChart/DonutChart.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DonutChart.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Charts/DonutChart/DonutChart.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,IAAI,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMxC,wBA6NE;AAyCF,eAAO,MAAM,WAAW;WAAU,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;CAa1C,CAAC;AAsBR,eAAO,MAAM,wBAAwB;WAAU,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;CAavD,CAAC;AAcR,eAAO,MAAM,wBAAwB;WAAU,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAavD,CAAC"}

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

@@ -0,0 +1,387 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports._DonutChartWithEmptyData = exports._DonutChartWithDrilldown = exports._DonutChart = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _Button = require("../../Button");
+var _EmptyState = require("../../EmptyState");
+var _ChartWrapper = require("../ChartWrapper");
+var _DonutChart2 = require("./DonutChart");
+var _DonutChartStoriesModule = _interopRequireDefault(require("./DonutChart.stories.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); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+var _default = exports.default = {
+  tags: ['autodocs'],
+  title: 'Data viz/Donut Chart',
+  component: _DonutChart2.DonutChart,
+  argTypes: {
+    isLoading: {
+      description: 'If **true**, the component would show a circular loader',
+      control: {
+        type: 'boolean'
+      },
+      table: {
+        type: {
+          summary: 'boolean'
+        },
+        defaultValue: {
+          summary: 'false'
+        }
+      }
+    },
+    classNames: {
+      description: 'Provide an optional className to be applied to the wrapper',
+      control: {
+        type: 'object'
+      },
+      table: {
+        type: {
+          summary: '{wrapper?: string}'
+        }
+      }
+    },
+    cardTitle: {
+      description: 'Title of the card container, present on the header of the component',
+      control: {
+        type: 'text'
+      },
+      type: {
+        summary: 'string'
+      }
+    },
+    centerText: {
+      description: 'Text displayed as main text in the center of the donut. Can be used to display the stat related to the overall chart series-data',
+      control: {
+        type: 'text'
+      }
+    },
+    centerSubtext: {
+      description: 'Text displayed as sub text in the center of the donut. Can be used to emphasize on the stat being shown as `centerText`',
+      control: {
+        type: 'text'
+      }
+    },
+    customExportOptions: {
+      description: 'Array of export options that specifies the supported file formats for chart exports. <br /> EXPORT_OPTIONS exported by the component can be useful for providing the customExportOptions. Provide the objects corresponding to the desired file format required, in the form of an array. <br /> Empty array indicates no custom export required. If not provided, default options will be shown - PNG, PDF, SVG, JPEG.',
+      control: {
+        type: 'object'
+      },
+      table: {
+        type: {
+          summary: 'Array<ExportOptionType> | null'
+        }
+      }
+    },
+    series: {
+      description: 'Series options for specific data and the data itself. <br /> <b> series.name </b> - The general name(that specifies the category of data being represented) as shown in the legend. <br /> <b> series.data </b> - An array of objects with name and value. The name here is the name of the data-point represented by the slice of pie, and the value denotes the proportion of that data-point in the total value.',
+      table: {
+        type: {
+          summary: 'Object<{ name: string, data: Array< {name: string, value: number} > }>'
+        }
+      }
+    },
+    legend: {
+      description: 'The legend is a box containing a symbol and name for each series item or point item in the chart. Each series (or points in case of pie charts) is represented by a symbol and its name in the legend.',
+      control: {
+        type: 'object'
+      }
+    },
+    headerActions: {
+      description: 'The user-specified component placed at the top-right of the chart-container, next to the export menu-button. It can be utilized for adding some custom functionality to the chart.',
+      table: {
+        type: {
+          summary: 'React.Component'
+        }
+      }
+    },
+    hasEmptyData: {
+      description: 'If **true**, the component would show a message indicating that the data is empty',
+      control: {
+        type: 'boolean'
+      }
+    },
+    emptyText: {
+      description: 'Provide component to be shown in case of empty data',
+      table: {
+        type: {
+          summary: 'React.Component'
+        }
+      }
+    }
+  },
+  parameters: {
+    docs: {
+      subtitle: 'Generates a DonutChart component.',
+      description: {
+        component: `
+\`\`\`js
+import { DonutChart, EXPORT_OPTIONS } from "@spaced-out/ui-design-system/lib/components/Charts";
+\`\`\`
+**Donut Chart** 
+
+The Donut Chart component is a visually appealing way to represent data in a circular format, similar to a pie chart but with a hole in the center. It's effective for showcasing proportions and percentages within a dataset. Here's an overview of its features:
+
+- **Customization**: The Donut Chart offers extensive customization options, allowing users to adjust colors, labels, and other visual elements to suit their preferences and branding requirements.
+
+- **Center Text**: You can display custom text in the center of the donut chart, such as a summary statistic or key insight related to the data being visualized.
+
+- **Export Options**: Users can export the chart in various file formats (e.g., JPEG, PNG, PDF, SVG) for sharing, embedding, or further analysis.
+
+- **Drilldown Functionality**: For deeper exploration, the Donut Chart supports drilldown functionality, enabling users to delve into specific categories or subgroups by clicking on chart elements.
+
+- **Interactive Legend**: The interactive legend provides a clear representation of the data categories included in the chart, allowing users to toggle visibility as needed for better clarity.
+
+- **Responsive Design**: The Donut Chart is designed to be responsive, ensuring optimal viewing and interaction across different devices and screen sizes.
+
+- **Accessibility**: The Donut Chart component prioritizes accessibility, ensuring that all users can interact with and understand the displayed data, including those using assistive technologies.
+
+By leveraging the Donut Chart component, you can create visually engaging visualizations that effectively communicate data insights to your audience.
+
+**Usage: **
+
+\`\`\`jsx
+<DonutChart
+  classNames={{wrapper: css.donutChartWrap, content: css.donutChartContent}}
+  cardTitle="Donut Chart Title"
+  centerText="100"
+  centerSubtext="Million Users"
+  customExportOptions={customExportOptions}
+  series={donutChartSeries}
+  legend={legendProps}
+  headerActions={headerActions}
+/>
+\`\`\`
+\`\`\`css
+// You can style the chart(if required) using the **wrapper className**.
+.donutChartWrap {
+  // Your styles here
+}
+
+// You can style the center content of the chart(if required) using the **content className**.
+.donutChartContent {
+  // Your styles here
+}
+\`\`\`
+
+\`\`\`js
+// Custom export options for the DonutChart
+const customExportOptions = [
+  EXPORT_OPTIONS.download_as_jpeg,
+  EXPORT_OPTIONS.download_as_png,
+  EXPORT_OPTIONS.download_as_pdf,
+  EXPORT_OPTIONS.download_as_svg,
+];
+
+// Data series for the DonutChart
+const donutChartSeries = [
+  {
+    name: 'Data Value',
+    data: [
+      {
+        name: 'Chrome',
+        y: 40,
+      },
+      {
+        name: 'Edge',
+        y: 12,
+      },
+      {
+        name: 'Firefox',
+        y: 16,
+      },
+      {
+        name: 'Safari',
+        y: 10,
+      },
+      {
+        name: 'Others',
+        y: 12,
+      },
+    ],
+  },
+];
+
+// Legend configuration options
+const legendProps = {
+  enabled: true,
+};
+
+// Custom header actions, specified by user
+const headerActions = <>
+  <Button
+    children="Download"
+    iconLeftName="cloud-arrow-down"
+    onClick={() => {}}
+    size="small"
+    type="secondary"
+  />
+</>
+\`\`\`
+        `
+      }
+    },
+    storySource: {
+      componentPath: '/src/components/DonutChart/DonutChart.jsx'
+    }
+  }
+};
+const donutChartSeries = [{
+  name: 'Data Value',
+  data: [{
+    name: 'Chrome',
+    y: 40
+  }, {
+    name: 'Edge',
+    y: 12
+  }, {
+    name: 'Firefox',
+    y: 16
+  }, {
+    name: 'Safari',
+    y: 10
+  }, {
+    name: 'Others',
+    y: 12
+  }]
+}];
+const customExportOptions = [_ChartWrapper.EXPORT_OPTIONS.download_as_jpeg, _ChartWrapper.EXPORT_OPTIONS.download_as_png, _ChartWrapper.EXPORT_OPTIONS.download_as_pdf, _ChartWrapper.EXPORT_OPTIONS.download_as_svg];
+const legendProps = {
+  enabled: true
+};
+const _DonutChart = args => /*#__PURE__*/React.createElement("div", {
+  className: _DonutChartStoriesModule.default.container
+}, /*#__PURE__*/React.createElement(_DonutChart2.DonutChart, _extends({}, args, {
+  headerActions: /*#__PURE__*/React.createElement(_Button.Button, {
+    children: "Download",
+    iconLeftName: "cloud-arrow-down",
+    onClick: () => {},
+    size: "small",
+    type: "secondary"
+  })
+})));
+exports._DonutChart = _DonutChart;
+_DonutChart.args = {
+  classNames: {
+    wrapper: _DonutChartStoriesModule.default.donutChartWrap,
+    content: _DonutChartStoriesModule.default.donutChartContent
+  },
+  cardTitle: 'Donut Chart Title',
+  centerText: '100',
+  centerSubtext: 'Million Users',
+  customExportOptions,
+  series: donutChartSeries,
+  legend: legendProps
+};
+const EmptyData = () => /*#__PURE__*/React.createElement(_EmptyState.EmptyState, {
+  classNames: {
+    wrapper: _DonutChartStoriesModule.default.emptyDataWrapper,
+    description: _DonutChartStoriesModule.default.emptyDataDescription
+  },
+  imageVariant: "chart",
+  title: "Your chart is waiting for data!",
+  description: "Once data is available, you\u2019ll see insights here. Try adjusting filters or selecting a different time range."
+});
+const _DonutChartWithEmptyData = args => /*#__PURE__*/React.createElement("div", {
+  className: _DonutChartStoriesModule.default.container
+}, /*#__PURE__*/React.createElement(_DonutChart2.DonutChart, _extends({}, args, {
+  headerActions: /*#__PURE__*/React.createElement(_Button.Button, {
+    children: "Download",
+    iconLeftName: "cloud-arrow-down",
+    onClick: () => {},
+    size: "small",
+    type: "secondary"
+  })
+})));
+exports._DonutChartWithEmptyData = _DonutChartWithEmptyData;
+_DonutChartWithEmptyData.args = {
+  classNames: {
+    wrapper: _DonutChartStoriesModule.default.donutChartWrap,
+    content: _DonutChartStoriesModule.default.donutChartContent
+  },
+  cardTitle: 'Donut Chart Title',
+  centerText: '100',
+  centerSubtext: 'Million Users',
+  customExportOptions,
+  series: donutChartSeries,
+  legend: legendProps,
+  hasEmptyData: true,
+  emptyText: /*#__PURE__*/React.createElement(EmptyData, null)
+};
+const _DonutChartWithDrilldown = args => /*#__PURE__*/React.createElement("div", {
+  className: _DonutChartStoriesModule.default.container
+}, /*#__PURE__*/React.createElement(_DonutChart2.DonutChart, _extends({}, args, {
+  headerActions: /*#__PURE__*/React.createElement(_Button.Button, {
+    children: "Download",
+    iconLeftName: "cloud-arrow-down",
+    onClick: () => {},
+    size: "small",
+    type: "secondary"
+  })
+})));
+exports._DonutChartWithDrilldown = _DonutChartWithDrilldown;
+const donutChart2Series = [{
+  type: 'pie',
+  name: 'Donut Chart',
+  innerSize: '50%',
+  data: [{
+    name: 'Chrome',
+    y: 25,
+    drilldown: 'chrome'
+  }, {
+    name: 'Firefox',
+    y: 20,
+    drilldown: 'firefox'
+  }, {
+    name: 'Safari',
+    y: 15,
+    drilldown: 'safari'
+  }]
+}];
+const donutChart2SeriesDrilldown = {
+  series: [{
+    id: 'chrome',
+    data: [{
+      name: 'Version 80',
+      y: 10
+    }, {
+      name: 'Version 81',
+      y: 15
+    }]
+  }, {
+    id: 'firefox',
+    data: [{
+      name: 'Version 75',
+      y: 8
+    }, {
+      name: 'Version 76',
+      y: 12
+    }]
+  }, {
+    id: 'safari',
+    data: [{
+      name: 'Version 12',
+      y: 5
+    }, {
+      name: 'Version 13',
+      y: 10
+    }]
+  }]
+};
+const legendProps2 = {
+  enabled: false
+};
+_DonutChartWithDrilldown.args = {
+  classNames: {
+    wrapper: _DonutChartStoriesModule.default.donutChartWrap,
+    content: _DonutChartStoriesModule.default.donutChartContent
+  },
+  cardTitle: 'Donut Chart With Drilldown Title',
+  centerText: '100',
+  centerSubtext: 'Million Users',
+  series: donutChart2Series,
+  drilldown: donutChart2SeriesDrilldown,
+  legend: legendProps2
+};