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

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

@@ -1,415 +0,0 @@
-import * as React from 'react';
-
-import {Button} from '../../Button';
-import {EmptyState} from '../../EmptyState';
-import {EXPORT_OPTIONS} from '../ChartWrapper';
-
-import type {DonutChartProps} from './';
-import {DonutChart} from './DonutChart';
-
-import css from './DonutChart.stories.module.css';
-
-
-export default {
-  tags: ['autodocs'],
-  title: 'Data viz/Donut Chart',
-  component: 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 = [
-  EXPORT_OPTIONS.download_as_jpeg,
-  EXPORT_OPTIONS.download_as_png,
-  EXPORT_OPTIONS.download_as_pdf,
-  EXPORT_OPTIONS.download_as_svg,
-];
-
-const legendProps = {
-  enabled: true,
-} as const;
-
-export const _DonutChart = (args: DonutChartProps) => (<div className={css.container}>
-  <DonutChart
-    {...args}
-    headerActions={
-      <Button
-        children="Download"
-        iconLeftName="cloud-arrow-down"
-        onClick={() => {}}
-        size="small"
-        type="secondary"
-      />
-    }
-  />
-</div>);
-
-_DonutChart.args = {
-  classNames: {wrapper: css.donutChartWrap, content: css.donutChartContent},
-  cardTitle: 'Donut Chart Title',
-  centerText: '100',
-  centerSubtext: 'Million Users',
-  customExportOptions,
-  series: donutChartSeries,
-  legend: legendProps,
-};
-
-const EmptyData = () => (<EmptyState
-  classNames={{
-    wrapper: css.emptyDataWrapper,
-    description: css.emptyDataDescription,
-  }}
-  imageVariant="chart"
-  title="Your chart is waiting for data!"
-  description="Once data is available, you’ll see insights here. Try adjusting filters or selecting a different time range."
-/>);
-
-export const _DonutChartWithEmptyData = (args: DonutChartProps) => (<div className={css.container}>
-  <DonutChart
-    {...args}
-    headerActions={
-      <Button
-        children="Download"
-        iconLeftName="cloud-arrow-down"
-        onClick={() => {}}
-        size="small"
-        type="secondary"
-      />
-    }
-  />
-</div>);
-
-_DonutChartWithEmptyData.args = {
-  classNames: {wrapper: css.donutChartWrap, content: css.donutChartContent},
-  cardTitle: 'Donut Chart Title',
-  centerText: '100',
-  centerSubtext: 'Million Users',
-  customExportOptions,
-  series: donutChartSeries,
-  legend: legendProps,
-  hasEmptyData: true,
-  emptyText: (<EmptyData /> as React.ReactElement<React.ComponentProps<typeof EmptyData>>),
-};
-
-export const _DonutChartWithDrilldown = (args: DonutChartProps) => (<div className={css.container}>
-  <DonutChart
-    {...args}
-    headerActions={
-      <Button
-        children="Download"
-        iconLeftName="cloud-arrow-down"
-        onClick={() => {}}
-        size="small"
-        type="secondary"
-      />
-    }
-  />
-</div>);
-
-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},
-      ],
-    },
-  ],
-} as const;
-
-const legendProps2 = {
-  enabled: false,
-} as const;
-
-_DonutChartWithDrilldown.args = {
-  classNames: {wrapper: css.donutChartWrap, content: css.donutChartContent},
-  cardTitle: 'Donut Chart With Drilldown Title',
-  centerText: '100',
-  centerSubtext: 'Million Users',
-  series: donutChart2Series,
-  drilldown: donutChart2SeriesDrilldown,
-  legend: legendProps2,
-};

package/lib/components/Charts/DonutChart/DonutChart.tsx

@@ -1,155 +0,0 @@
-import * as React from 'react';
-import Highcharts from 'highcharts';
-import HighchartsReact from 'highcharts-react-official';
-
-import type {
-  ChartOptions,
-  Drilldown,
-  LegendOptionsType,
-  SeriesOptionsType,
-} from '../../../types/charts';
-import {
-  getDataVizColor,
-  getDonutChartOptions,
-  mergeChartUserOptions,
-} from '../../../utils/charts';
-import classify from '../../../utils/classify';
-import {
-  ChartWrapperClassNames,
-  ExportOptionType,
-  ChartWrapper,
-} from '../ChartWrapper';
-
-import typographyCss from '../../../styles/typography.module.css';
-import css from './DonutChart.module.css';
-
-
-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 const DonutChart = (
-  {
-    isLoading,
-    classNames,
-    cardTitle,
-    customExportOptions,
-    headerActions,
-    series,
-    drilldown,
-    legend,
-    centerText,
-    centerSubtext,
-    hasEmptyData,
-    emptyText,
-    ...userOptions
-  }: DonutChartProps,
-) => {
-// @ts-ignore - TS2554 - Expected 1 arguments, but got 0.
-  const chartRef = React.useRef();
-
-  const {highChart, subtitleClassNames, ...wrapperClassNames} =
-    classNames || {};
-
-  const defaultCenterHTML = `<span class=${classify(
-    css.subtitleWrap,
-    subtitleClassNames?.wrapper,
-  )}>
-    <span class="${classify(
-    typographyCss.jumboMedium,
-    css.subtitleText,
-    subtitleClassNames?.text,
-  )}">
-      ${centerText ? centerText : ''}
-    </span>
-    <span class="${classify(
-    typographyCss.bodySmall,
-    css.subtitleSubtext,
-    subtitleClassNames?.subtext,
-  )}">
-      ${centerSubtext ? centerSubtext : ''}
-    </span>
-  <span>`;
-
-  const donutChartSeries = series.map((seriesItem) => ({
-    ...seriesItem,
-    data: seriesItem.data.map((dataItem, index) => ({
-      ...dataItem,
-      color: getDataVizColor(index),
-    })),
-  }));
-
-  const addColorToDrilldownSeries = (series: undefined | Array<SeriesOptionsType>) =>
-    series?.map((seriesItem: SeriesOptionsType) => ({
-      ...seriesItem,
-      data: seriesItem.data.map((dataItem, index) => ({
-        ...dataItem,
-        color: getDataVizColor(index),
-      })),
-    }));
-
-  const donutDrilldown = drilldown
-    ? {
-      ...drilldown,
-      series: addColorToDrilldownSeries(drilldown.series),
-      breadcrumbs: {floating: false},
-    }
-    : {};
-
-  const defaultLineChartOptions = getDonutChartOptions({
-    legend,
-    defaultCenterHTML,
-  });
-
-  const chartOptions = mergeChartUserOptions(defaultLineChartOptions, {
-    series: donutChartSeries,
-    drilldown: donutDrilldown,
-    ...userOptions,
-  });
-
-  return (
-    <ChartWrapper
-      isLoading={isLoading}
-      title={cardTitle}
-// @ts-ignore - TS2769 - No overload matches this call.
-      ref={chartRef}
-      customExportOptions={customExportOptions}
-      headerActions={headerActions}
-      classNames={wrapperClassNames}
-      hasEmptyData={hasEmptyData}
-      emptyText={emptyText}
-    >
-      <HighchartsReact
-        highcharts={Highcharts}
-        containerProps={{
-          className: classify(css.donutChartContainer, highChart),
-        }}
-// @ts-ignore - TS2322 - Type 'RefObject<unknown>' is not assignable to type 'Ref<HighchartsReactRefObject> | undefined'.
-        ref={chartRef}
-        options={chartOptions}
-      />
-    </ChartWrapper>
-  );
-};

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

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