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

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

@@ -1,510 +0,0 @@
-import * as React from 'react';
-
-import {Button} from '../../Button';
-import {EXPORT_OPTIONS} from '../ChartWrapper';
-import {EmptyData} from '../ColumnChart/ColumnChart.stories';
-
-import {FunnelChart} from './FunnelChart';
-import type {FunnelChartProps} from './index';
-
-import css from './FunnelChart.stories.module.css';
-
-
-export default {
-  tags: ['autodocs'],
-  title: 'Data viz/Funnel Chart',
-  component: FunnelChart,
-  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',
-      },
-    },
-    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 name of the point as shown in the legend, tooltip, dataLabels, etc. <br /> <b> series.data </b> - An array of numerical values. In this case, the numerical values will be interpreted as y options. The x values will be automatically calculated, either starting at 0 and incremented by 1, or from pointStart and pointInterval given in the series options. If the axis has categories, these will be used. Example: data: [0, 5, 3, 5]',
-      table: {
-        type: {
-          summary: 'Array<{ name: string, data: Array<number>}>',
-        },
-      },
-    },
-    showLegend: {
-      description: 'If **true**, the legend will be shown',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        type: {
-          summary: 'boolean',
-        },
-        defaultValue: {
-          summary: 'true',
-        },
-      },
-    },
-    plotOptions: {
-      description:
-        'The plotOptions is a wrapper object for config objects for each series type. The config objects for each series can also be overridden for each series item as given in the series array.',
-    },
-    xAxis: {
-      description:
-        'The X axis or category axis. Normally this is the horizontal axis, though if the chart is inverted this is the vertical axis. In case of multiple axes, the xAxis node is an array of configuration objects.',
-    },
-    yAxis: {
-      description:
-        'The Y axis or value axis. Normally this is the vertical axis, though if the chart is inverted this is the horizontal axis. In case of multiple axes, the yAxis node is an array of configuration objects.',
-    },
-    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 FunnelChart component.',
-      description: {
-        component: `
-\`\`\`js
-import { FunnelChart, EXPORT_OPTIONS } from "@spaced-out/ui-design-system/lib/components/Charts";
-\`\`\`
-**Funnel Chart**
-
-The Funnel Chart component provides a visually appealing way to represent data in a line plot format. It is effective for showcasing trends and patterns over time or other continuous variables. Here's an overview of its features:
-
-- **Customization**: The Funnel Chart offers extensive customization options, allowing users to adjust colors, labels, and other visual elements to suit their preferences and branding requirements.
-
-- **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 Funnel Chart supports drilldown functionality, enabling users to delve into specific data points or categories by clicking on chart elements.
-
-- **Interactive Legend**: The interactive legend provides a convenient way to toggle the visibility of individual series in the chart, making it easier to focus on specific data.
-
-- **Plot Options**: The plot options allow users to customize the appearance and behavior of the chart series, including settings for point start, cursor type, and more.
-
-- **Axis Configuration**: The Funnel Chart supports customizable X and Y axes, allowing users to specify axis titles, types, and other properties to best represent their data.
-
-**Usage:**
-
-\`\`\`jsx
-<FunnelChart
-  classNames={{wrapper: css.funnelChartWrap}}
-  cardTitle="Funnel Chart Title"
-  customExportOptions={customExportOptions}
-  series={funnelChartSeries}
-  xAxis={xAxisProps}
-  yAxis={yAxisProps}
-  legend={legend}
-  plotOptions={plotOptions}
-  headerActions={headerActions}
-/>
-\`\`\`
-
-\`\`\`jsx
-<FunnelChart
-  classNames={{wrapper: css.funnelChartWrap}}
-  cardTitle="Funnel Chart Drilldown Title"
-  customExportOptions={customExportOptions}
-  series={funnelChart2Series}
-  drilldown={funnelChart2DrilldownSeries}
-  xAxis={xAxisProps2}
-  yAxis={yAxisProps2}
-  legend={legend2}
-  plotOptions={plotOptions2}
-  headerActions={headerActions}
-/>
-\`\`\`
-
-\`\`\`css
-// You can style the Funnel Chart wrapper using the wrapper className.
-.funnelChartWrap {
-  // Add your custom styles here
-}
-.loader{
-  // Ad your custom styles for loader here
-}
-\`\`\`
-
-\`\`\`js
-// Custom export options for the FunnelChart
-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 FunnelChart
-const funnelChart2Series = [
-  {
-    name: 'Monthly Sales',
-    data: [
-      {name: 'Jan', y: 100, drilldown: 'jan'},
-      {name: 'Feb', y: 150, drilldown: 'feb'},
-      {name: 'Mar', y: 200, drilldown: 'mar'},
-      {name: 'Apr', y: 180, drilldown: 'apr'},
-      {name: 'May', y: 220, drilldown: 'may'},
-      {name: 'Jun', y: 250, drilldown: 'jun'},
-    ],
-  },
-];
-
-const funnelChart2DrilldownSeries = {
-  series: [
-    {
-      name: 'Jan Weekly Sales Data',
-      id: 'jan',
-      data: [
-        {name: 'Week 1', y: 50},
-        {name: 'Week 2', y: 70},
-        {name: 'Week 3', y: 60},
-        {name: 'Week 4', y: 80},
-      ],
-    },
-    {
-      name: 'Feb Weekly Sales Data',
-      id: 'feb',
-      data: [
-        {name: 'Week 5', y: 60},
-        {name: 'Week 6', y: 80},
-        {name: 'Week 7', y: 70},
-        {name: 'Week 8', y: 90},
-      ],
-    },
-    {
-      name: 'March Weekly Sales Data',
-      id: 'mar',
-      data: [
-        {name: 'Week 9', y: 70},
-        {name: 'Week 10', y: 90},
-        {name: 'Week 11', y: 80},
-        {name: 'Week 12', y: 100},
-      ],
-    },
-    {
-      name: 'April Weekly Sales Data',
-      id: 'apr',
-      data: [
-        {name: 'Week 13', y: 80},
-        {name: 'Week 14', y: 100},
-        {name: 'Week 15', y: 90},
-        {name: 'Week 16', y: 110},
-      ],
-    },
-    {
-      name: 'May Weekly Sales Data',
-      id: 'may',
-      data: [
-        {name: 'Week 1', y: 90},
-        {name: 'Week 2', y: 110},
-        {name: 'Week 3', y: 100},
-        {name: 'Week 4', y: 120},
-      ],
-    },
-    {
-      name: 'June Weekly Sales Data',
-      id: 'jun',
-      data: [
-        {name: 'Week 1', y: 100},
-        {name: 'Week 2', y: 120},
-        {name: 'Week 3', y: 110},
-        {name: 'Week 4', y: 130},
-      ],
-    },
-  ],
-};
-
-// Legend configuration options
-const legend = {
-  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/FunnelChart/FunnelChart.jsx',
-    },
-  },
-};
-
-const customExportOptions = [
-  EXPORT_OPTIONS.download_as_jpeg,
-  EXPORT_OPTIONS.download_as_png,
-  EXPORT_OPTIONS.download_as_pdf,
-  EXPORT_OPTIONS.download_as_svg,
-];
-
-const funnelChartSeries = [
-  {
-    name: 'Conversion Funnel',
-    data: [
-      {
-        name: 'Prospects',
-        y: 120,
-      },
-      {
-        name: 'Qualified Leads',
-        y: 100,
-      },
-      {
-        name: 'Proposals Sent',
-        y: 80,
-      },
-      {
-        name: 'Negotiations',
-        y: 50,
-      },
-      {
-        name: 'Closed Deals',
-        y: 30,
-      },
-    ],
-    showInLegend: true,
-  },
-];
-
-const yAxisProps = {
-  title: {
-    text: 'Number of Employees',
-  },
-} as const;
-
-export const _FunnelChart = (args: FunnelChartProps) => (<div className={css.container}>
-  <FunnelChart
-    {...args}
-    headerActions={
-      <Button
-        children="Download"
-        iconLeftName="cloud-arrow-down"
-        onClick={() => {}}
-        size="small"
-        type="secondary"
-      />
-    }
-  />
-</div>);
-
-_FunnelChart.args = {
-  classNames: {wrapper: css.funnelChartWrap},
-  cardTitle: 'Funnel Chart Title',
-  customExportOptions,
-  series: funnelChartSeries,
-  yAxis: yAxisProps,
-};
-
-export const _FunnelChartWithEmptyData = (args: FunnelChartProps) => (<div className={css.container}>
-  <FunnelChart
-    {...args}
-    headerActions={
-      <Button
-        children="Download"
-        iconLeftName="cloud-arrow-down"
-        onClick={() => {}}
-        size="small"
-        type="secondary"
-      />
-    }
-  />
-</div>);
-
-_FunnelChartWithEmptyData.args = {
-  classNames: {wrapper: css.funnelChartWrap},
-  cardTitle: 'Funnel Chart Title',
-  customExportOptions,
-  series: funnelChartSeries,
-  yAxis: yAxisProps,
-  hasEmptyData: true,
-  emptyText: (<EmptyData /> as React.ReactElement<React.ComponentProps<typeof EmptyData>>),
-};
-
-const funnelChart2Series = [
-  {
-    name: 'Monthly Sales',
-    data: [
-      {name: 'Jan', y: 100, drilldown: 'jan'},
-      {name: 'Feb', y: 150, drilldown: 'feb'},
-      {name: 'Mar', y: 200, drilldown: 'mar'},
-      {name: 'Apr', y: 180, drilldown: 'apr'},
-      {name: 'May', y: 220, drilldown: 'may'},
-      {name: 'Jun', y: 250, drilldown: 'jun'},
-    ],
-  },
-];
-
-const yAxisProps2 = {
-  title: {
-    text: 'Sales',
-  },
-} as const;
-
-const plotOptions2 = {
-  series: {
-    cursor: 'pointer',
-  },
-} as const;
-
-const funnelChart2DrilldownSeries = {
-  series: [
-    {
-      name: 'Jan Weekly Sales Data',
-      id: 'jan',
-      data: [
-        {name: 'Week 1', y: 50},
-        {name: 'Week 2', y: 70},
-        {name: 'Week 3', y: 60},
-        {name: 'Week 4', y: 80},
-      ],
-    },
-    {
-      name: 'Feb Weekly Sales Data',
-      id: 'feb',
-      data: [
-        {name: 'Week 5', y: 60},
-        {name: 'Week 6', y: 80},
-        {name: 'Week 7', y: 70},
-        {name: 'Week 8', y: 90},
-      ],
-    },
-    {
-      name: 'March Weekly Sales Data',
-      id: 'mar',
-      data: [
-        {name: 'Week 9', y: 70},
-        {name: 'Week 10', y: 90},
-        {name: 'Week 11', y: 80},
-        {name: 'Week 12', y: 100},
-      ],
-    },
-    {
-      name: 'April Weekly Sales Data',
-      id: 'apr',
-      data: [
-        {name: 'Week 13', y: 80},
-        {name: 'Week 14', y: 100},
-        {name: 'Week 15', y: 90},
-        {name: 'Week 16', y: 110},
-      ],
-    },
-    {
-      name: 'May Weekly Sales Data',
-      id: 'may',
-      data: [
-        {name: 'Week 1', y: 90},
-        {name: 'Week 2', y: 110},
-        {name: 'Week 3', y: 100},
-        {name: 'Week 4', y: 120},
-      ],
-    },
-    {
-      name: 'June Weekly Sales Data',
-      id: 'jun',
-      data: [
-        {name: 'Week 1', y: 100},
-        {name: 'Week 2', y: 120},
-        {name: 'Week 3', y: 110},
-        {name: 'Week 4', y: 130},
-      ],
-    },
-  ],
-} as const;
-
-export const _FunnelChartWithDrilldown = (args: FunnelChartProps) => (<div className={css.container}>
-  <FunnelChart
-    {...args}
-    headerActions={
-      <>
-        <Button
-          children="Download"
-          iconLeftName="cloud-arrow-down"
-          onClick={() => {}}
-          size="small"
-          type="secondary"
-        />
-      </>
-    }
-  />
-</div>);
-
-_FunnelChartWithDrilldown.args = {
-  classNames: {wrapper: css.funnelChartWrap},
-  cardTitle: 'Funnel Chart Drilldown Title',
-  customExportOptions,
-  series: funnelChart2Series,
-  drilldown: funnelChart2DrilldownSeries,
-  yAxis: yAxisProps2,
-  plotOptions: plotOptions2,
-};

package/lib/components/Charts/FunnelChart/FunnelChart.tsx

@@ -1,110 +0,0 @@
-import * as React from 'react';
-import Highcharts from 'highcharts';
-import Funnel from 'highcharts/modules/funnel';
-import HighchartsReact from 'highcharts-react-official';
-
-import type {
-  ChartOptions,
-  DataOptionsType,
-  Drilldown,
-} from '../../../types/charts';
-import {mergeChartUserOptions} from '../../../utils/charts';
-import {
-  addColorsToFunnelDrilldownSeries,
-  addColorsToFunnelSeries,
-  getFunnelChartOptions,
-} from '../../../utils/charts/funnelChart';
-import classify from '../../../utils/classify';
-import {
-  ChartWrapperClassNames,
-  ExportOptionType,
-  ChartWrapper,
-} from '../ChartWrapper';
-
-import css from './FunnelChart.module.css';
-
-
-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 const FunnelChart = (
-  {
-    isLoading,
-    classNames,
-    cardTitle,
-    customExportOptions,
-    series,
-    headerActions,
-    drilldown,
-    showLegend = true,
-    hasEmptyData,
-    emptyText,
-    ...userOptions
-  }: FunnelChartProps,
-) => {
-  Funnel(Highcharts);
-  const chartRef = React.createRef();
-
-  const funnelChartSeries = addColorsToFunnelSeries(series, showLegend);
-
-  const defaultFunnelChartOptions = getFunnelChartOptions();
-
-  const columnDrilldown = drilldown
-    ? {
-      ...addColorsToFunnelDrilldownSeries(drilldown, showLegend),
-      breadcrumbs: {floating: false},
-    }
-    : {};
-
-  const chartOptions = mergeChartUserOptions(defaultFunnelChartOptions, {
-    series: funnelChartSeries,
-    drilldown: columnDrilldown,
-    ...userOptions,
-  });
-
-  const {highChart, ...wrapperClassNames} = classNames || {};
-
-  return (
-    <ChartWrapper
-      isLoading={isLoading}
-      title={cardTitle}
-// @ts-ignore - TS2769 - No overload matches this call.
-      ref={chartRef}
-      classNames={wrapperClassNames}
-      customExportOptions={customExportOptions}
-      headerActions={headerActions}
-      hasEmptyData={hasEmptyData}
-      emptyText={emptyText}
-    >
-      <HighchartsReact
-        highcharts={Highcharts}
-        containerProps={{
-          className: classify(css.funnelChartContainer, highChart),
-        }}
-// @ts-ignore - TS2322 - Type 'RefObject<unknown>' is not assignable to type 'Ref<HighchartsReactRefObject> | undefined'.
-        ref={chartRef}
-        options={chartOptions}
-      />
-    </ChartWrapper>
-  );
-};

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

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