@spaced-out/ui-design-system 0.4.13-beta.1 → 0.4.14

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

@@ -1,226 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

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

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

@@ -1,2 +0,0 @@
-export * from './DonutChart';
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Charts/DonutChart/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

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

@@ -1,25 +0,0 @@
-import * as React from 'react';
-import type { ChartOptions, DataOptionsType, Drilldown } from '../../../types/charts';
-import { ChartWrapperClassNames, ExportOptionType } from '../ChartWrapper';
-export type ClassNames = Readonly<((ChartWrapperClassNames) & {
-    highChart?: string;
-})>;
-export type FunnelSeriesItem = {
-    name?: string;
-    showInLegend?: boolean;
-    data: Array<DataOptionsType>;
-};
-export type FunnelChartProps = ((ChartOptions) & {
-    isLoading?: boolean;
-    classNames?: ClassNames;
-    cardTitle?: React.ReactNode;
-    customExportOptions?: Array<ExportOptionType> | null;
-    series: Array<FunnelSeriesItem>;
-    headerActions?: React.ReactNode;
-    drilldown?: Drilldown;
-    showLegend?: boolean;
-    hasEmptyData?: boolean;
-    emptyText?: React.ReactNode;
-});
-export declare const FunnelChart: ({ isLoading, classNames, cardTitle, customExportOptions, series, headerActions, drilldown, showLegend, hasEmptyData, emptyText, ...userOptions }: FunnelChartProps) => React.JSX.Element;
-//# sourceMappingURL=FunnelChart.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"FunnelChart.d.ts","sourceRoot":"","sources":["../../../../src/components/Charts/FunnelChart/FunnelChart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EACV,YAAY,EACZ,eAAe,EACf,SAAS,EACV,MAAM,uBAAuB,CAAC;AAQ/B,OAAO,EACL,sBAAsB,EACtB,gBAAgB,EAEjB,MAAM,iBAAiB,CAAC;AAKzB,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC,CAAC,CAAC,sBAAsB,CAAC,GAAG;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC,CAAC,CAAC;AAEJ,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,IAAI,EAAE,KAAK,CAAC,eAAe,CAAC,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,CAAC,CAAC,YAAY,CAAC,GAAG;IAC/C,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,MAAM,EAAE,KAAK,CAAC,gBAAgB,CAAC,CAAC;IAChC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B,CAAC,CAAC;AAEH,eAAO,MAAM,WAAW,GACtB,kJAYG,gBAAgB,sBA+CpB,CAAC"}