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

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

@@ -1,590 +0,0 @@
-import * as React from 'react';
-
-import {Button} from '../../Button';
-import {EXPORT_OPTIONS} from '../ChartWrapper';
-import {EmptyData} from '../ColumnChart/ColumnChart.stories';
-
-import type {LineChartProps} from './';
-import {LineChart} from './LineChart';
-
-import css from './LineChart.stories.module.css';
-
-
-export default {
-  tags: ['autodocs'],
-  title: 'Data viz/Line Chart',
-  component: LineChart,
-  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>}>',
-        },
-      },
-    },
-    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',
-      },
-    },
-    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 LineChart component.',
-      description: {
-        component: `
-\`\`\`js
-import { LineChart, EXPORT_OPTIONS } from "@spaced-out/ui-design-system/lib/components/Charts";
-\`\`\`
-**Line Chart**
-
-The Line 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 Line 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 Line 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 Line Chart supports customizable X and Y axes, allowing users to specify axis titles, types, and other properties to best represent their data.
-
-**Usage:**
-
-\`\`\`jsx
-<LineChart
-  classNames={{wrapper: css.lineChartWrap}}
-  cardTitle="Line Chart Title"
-  customExportOptions={customExportOptions}
-  series={lineChartSeries}
-  xAxis={xAxisProps}
-  yAxis={yAxisProps}
-  legend={legend}
-  plotOptions={plotOptions}
-  headerActions={headerActions}
-/>
-\`\`\`
-
-\`\`\`jsx
-<LineChart
-  classNames={{wrapper: css.lineChartWrap}}
-  cardTitle="Line Chart Drilldown Title"
-  customExportOptions={customExportOptions}
-  series={lineChart2Series}
-  drilldown={lineChart2DrilldownSeries}
-  xAxis={xAxisProps2}
-  yAxis={yAxisProps2}
-  legend={legend2}
-  plotOptions={plotOptions2}
-  headerActions={headerActions}
-/>
-\`\`\`
-
-\`\`\`css
-// You can style the Line Chart wrapper using the wrapper className.
-.lineChartWrap {
-  // Add your custom styles here
-}
-.loader{
-  // Ad your custom styles for loader here
-}
-\`\`\`
-
-\`\`\`js
-// Custom export options for the LineChart
-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 LineChart
-const lineChart2Series = [
-  {
-    type: 'line',
-    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 lineChart2DrilldownSeries = {
-  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/LineChart/LineChart.jsx',
-    },
-  },
-};
-
-const customExportOptions = [
-  EXPORT_OPTIONS.download_as_jpeg,
-  EXPORT_OPTIONS.download_as_png,
-  EXPORT_OPTIONS.download_as_pdf,
-  EXPORT_OPTIONS.download_as_svg,
-];
-
-const lineChartSeries = [
-  {
-    name: 'Reached',
-    data: [
-      {
-        name: '2017',
-        y: 30,
-      },
-      {
-        name: '2018',
-        y: 48,
-      },
-      {
-        name: '2019',
-        y: 53,
-      },
-      {
-        name: '2021',
-        y: 60,
-      },
-      {
-        name: '2022',
-        y: 140,
-      },
-      {
-        name: '2023',
-        y: 150,
-      },
-      {
-        name: '2024',
-        y: 190,
-      },
-    ],
-  },
-  {
-    name: 'Unsubscribed',
-    data: [
-      {
-        name: '2017',
-        y: 52,
-      },
-      {
-        name: '2018',
-        y: 25,
-      },
-      {
-        name: '2019',
-        y: 55,
-      },
-      {
-        name: '2021',
-        y: 100,
-      },
-      {
-        name: '2022',
-        y: 100,
-      },
-      {
-        name: '2023',
-        y: 110,
-      },
-      {
-        name: '2024',
-        y: 60,
-      },
-    ],
-  },
-  {
-    name: 'Spam Reports',
-    data: [
-      {
-        name: '2017',
-        y: 110,
-      },
-      {
-        name: '2018',
-        y: 152,
-      },
-      {
-        name: '2019',
-        y: 138,
-      },
-      {
-        name: '2021',
-        y: 150,
-      },
-      {
-        name: '2022',
-        y: 100,
-      },
-      {
-        name: '2023',
-        y: 52,
-      },
-      {
-        name: '2024',
-        y: 110,
-      },
-    ],
-  },
-];
-
-const yAxisProps = {
-  title: {
-    text: 'Number of Employees',
-  },
-} as const;
-
-const legend = {
-  enabled: true,
-  shadow: false,
-} as const;
-
-export const _LineChart = (args: LineChartProps) => (<div className={css.container}>
-  <LineChart
-    {...args}
-    headerActions={
-      <Button
-        children="Download"
-        iconLeftName="cloud-arrow-down"
-        onClick={() => {}}
-        size="small"
-        type="secondary"
-      />
-    }
-  />
-</div>);
-
-_LineChart.args = {
-  classNames: {wrapper: css.lineChartWrap},
-  cardTitle: 'Line Chart Title',
-  customExportOptions,
-  series: lineChartSeries,
-  yAxis: yAxisProps,
-  legend,
-};
-
-const lineChart2Series = [
-  {
-    type: 'line',
-    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 legend2 = {
-  enabled: true,
-  shadow: false,
-} as const;
-
-const plotOptions2 = {
-  series: {
-    cursor: 'pointer',
-  },
-} as const;
-const lineChart2DrilldownSeries = {
-  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 _LineChartWithDrilldown = (args: LineChartProps) => (<div className={css.container}>
-  <LineChart
-    {...args}
-    headerActions={
-      <>
-        <Button
-          children="Download"
-          iconLeftName="cloud-arrow-down"
-          onClick={() => {}}
-          size="small"
-          type="secondary"
-        />
-      </>
-    }
-  />
-</div>);
-
-_LineChartWithDrilldown.args = {
-  classNames: {wrapper: css.lineChartWrap},
-  cardTitle: 'Line Chart Drilldown Title',
-  customExportOptions,
-  series: lineChart2Series,
-  drilldown: lineChart2DrilldownSeries,
-  yAxis: yAxisProps2,
-  legend: legend2,
-  plotOptions: plotOptions2,
-};
-
-export const _EmptyLineChart = (args: LineChartProps) => (<div className={css.container}>
-  <LineChart
-    {...args}
-    headerActions={
-      <Button
-        children="Download"
-        iconLeftName="cloud-arrow-down"
-        onClick={() => {}}
-        size="small"
-        type="secondary"
-      />
-    }
-  />
-</div>);
-
-_EmptyLineChart.args = {
-  classNames: {wrapper: css.lineChartWrap},
-  cardTitle: 'Line Chart Title',
-  customExportOptions,
-  series: lineChartSeries,
-  yAxis: yAxisProps,
-  legend,
-  hasEmptyData: true,
-  emptyText: (<EmptyData /> as React.ReactElement<React.ComponentProps<typeof EmptyData>>),
-};

package/lib/components/Charts/LineChart/LineChart.tsx

@@ -1,109 +0,0 @@
-import * as React from 'react';
-import Highcharts from 'highcharts';
-import HighchartsReact from 'highcharts-react-official';
-
-import type {
-  ChartOptions,
-  DataOptionsType,
-  Drilldown,
-} from '../../../types/charts';
-import {
-  getDataVizColor,
-  getLineChartOptions,
-  mergeChartUserOptions,
-} from '../../../utils/charts';
-import classify from '../../../utils/classify';
-import {
-  ChartWrapperClassNames,
-  ExportOptionType,
-  ChartWrapper,
-} from '../ChartWrapper';
-
-import css from './LineChart.module.css';
-
-
-export type ClassNames = Readonly<((ChartWrapperClassNames) & {
-  highChart?: string;
-})>;
-
-export type LineSeriesItem = {
-  name: string;
-  data: DataOptionsType[];
-};
-
-export type LineChartProps = ((ChartOptions) & {
-  isLoading?: boolean;
-  classNames?: ClassNames;
-  cardTitle?: React.ReactNode;
-  customExportOptions?: Array<ExportOptionType> | null;
-  series: Array<LineSeriesItem>;
-  headerActions?: React.ReactNode;
-  drilldown?: Drilldown;
-  hasEmptyData?: boolean;
-  emptyText?: React.ReactNode;
-});
-
-export const LineChart = (
-  {
-    isLoading,
-    classNames,
-    cardTitle,
-    customExportOptions,
-    series,
-    headerActions,
-    drilldown,
-    hasEmptyData,
-    emptyText,
-    ...userOptions
-  }: LineChartProps,
-) => {
-  const chartRef = React.createRef();
-
-  const lineChartSeries = series.map((seriesItem, index) => ({
-    ...seriesItem,
-    name: seriesItem.name,
-    data: seriesItem.data,
-    color: getDataVizColor(index),
-  }));
-
-  const defaultLineChartOptions = getLineChartOptions();
-
-  const columnDrilldown = drilldown
-    ? {
-      ...drilldown,
-      breadcrumbs: {floating: false},
-    }
-    : {};
-
-  const chartOptions = mergeChartUserOptions(defaultLineChartOptions, {
-    series: lineChartSeries,
-    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.lineChartContainer, highChart),
-        }}
-// @ts-ignore - TS2322 - Type 'RefObject<unknown>' is not assignable to type 'Ref<HighchartsReactRefObject> | undefined'.
-        ref={chartRef}
-        options={chartOptions}
-      />
-    </ChartWrapper>
-  );
-};

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

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