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

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

@@ -0,0 +1,574 @@
+import * as React from 'react';
+
+import {Button} from '../../Button';
+import {EmptyState} from '../../EmptyState';
+import {EXPORT_OPTIONS} from '../ChartWrapper';
+
+import type {ColumnChartProps} from './';
+import {ColumnChart} from './ColumnChart';
+
+import css from './ColumnChart.stories.module.css';
+
+
+export default {
+  tags: ['autodocs'],
+  title: 'Data viz/Column Chart',
+  component: ColumnChart,
+  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.',
+      table: {
+        type: {
+          summary: 'Array<{ name: string, data: Array<ColumnSeriesItem>}>',
+        },
+      },
+    },
+    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 ColumnChart component.',
+      description: {
+        component: `
+\`\`\`js
+import { ColumnChart, EXPORT_OPTIONS } from "@spaced-out/ui-design-system/lib/components/Charts";
+\`\`\`
+**Column Chart** 
+
+The Column Chart component is a versatile tool for visualizing data in a columnar format. It's particularly useful for comparing values across different categories or displaying trends over time. Here's an overview of its features:
+
+- **Customization**: The Column Chart allows for extensive customization, including options for modifying colors, axes, and data labels to suit your specific visualization needs.
+
+- **Export Options**: Users can easily export the chart in various file formats such as JPEG, PNG, PDF, and SVG, making it convenient for sharing or embedding in reports and presentations.
+
+- **Drilldown Functionality**: For deeper insights, the Column Chart supports drilldown functionality, enabling users to explore detailed data by clicking on specific data points or categories.
+
+- **Interactive Legend**: The interactive legend feature provides a clear representation of the data series included in the chart, allowing users to toggle visibility as needed for better focus.
+
+- **Responsive Design**: The Column Chart is designed to be responsive, ensuring optimal viewing and usability across different devices and screen sizes.
+
+- **Accessible**: The Column Chart component prioritizes accessibility, ensuring that users of all abilities can interact with and understand the displayed data.
+
+By leveraging the Column Chart component, you can create compelling visualizations that convey complex data insights in a clear and intuitive manner.
+
+**Usage: **
+
+\`\`\`jsx
+<ColumnChart
+  classNames={{wrapper: css.columnChartWrap}}
+  cardTitle="Column Chart Title"
+  customExportOptions={customExportOptions}
+  series={columnChartSeries}
+  xAxis={xAxisProps}
+  yAxis={yAxisProps}
+  legend={legend}
+  headerActions={headerActions}
+/>
+\`\`\`
+\`\`\`css
+// You can style the chart(if required) using the **wrapper className**.
+.columnChartWrap {
+  // Your styles here
+}
+\`\`\`
+
+\`\`\`js
+// Custom export options for the ColumnChart
+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 ColumnChart
+const columnChartSeries = [
+  {
+    name: 'Inbound Sourced',
+    data: [
+      { name: 'Q1.23', y: 40629 },
+      { name: 'Q2.23', y: 26000 },
+      { name: 'Q3.23', y: 10700 },
+      { name: 'Q4.23', y: 38300 },
+    ],
+  },
+  {
+    name: 'Outbound Sourced',
+    data: [
+      { name: 'Q1.23', y: 31086 },
+      { name: 'Q2.23', y: 13600 },
+      { name: 'Q3.23', y: 45000 },
+      { name: 'Q4.23', y: 41000 },
+    ],
+  },
+];
+
+// Configuration options for the X-axis
+const xAxisProps = {
+  title: {
+    text: 'Sourcing', // You can specify the title here if needed
+  },
+};
+
+// Configuration options for the Y-axis
+const yAxisProps = {
+  title: {
+    text: 'Amount Sourced',
+  },
+};
+
+// Legend configuration options
+const legend = {
+  enabled: true,
+  shadow: false,
+};
+
+// Custom header actions, specified by user
+const headerActions = <>
+  <Button
+    children="Download"
+    iconLeftName="cloud-arrow-down"
+    onClick={() => {}}
+    size="small"
+    type="secondary"
+  />
+</>
+\`\`\`
+        `,
+      },
+    },
+    storySource: {
+      componentPath: '/src/components/ColumnChart/ColumnChart.jsx',
+    },
+  },
+};
+
+const customExportOptions = [
+  EXPORT_OPTIONS.download_as_jpeg,
+  EXPORT_OPTIONS.download_as_png,
+  EXPORT_OPTIONS.download_as_pdf,
+  EXPORT_OPTIONS.download_as_svg,
+];
+
+const columnChartSeries = [
+  {
+    name: 'Inbound Sourced',
+    data: [
+      {name: 'Q1.23', y: 40629},
+      {name: 'Q2.23', y: 26000},
+      {name: 'Q3.23', y: 10700},
+      {name: 'Q4.23', y: 38300},
+    ],
+  },
+  {
+    name: 'Outbound Sourced',
+    data: [
+      {name: 'Q1.23', y: 31086},
+      {name: 'Q2.23', y: 13600},
+      {name: 'Q3.23', y: 45000},
+      {name: 'Q4.23', y: 41000},
+    ],
+  },
+];
+
+const xAxisProps = {
+  title: {
+    text: 'Sourcing',
+  },
+} as const;
+
+const yAxisProps = {
+  title: {
+    text: 'Amount Sourced',
+  },
+} as const;
+
+export 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."
+/>);
+
+const legend = {
+  enabled: true,
+  shadow: false,
+} as const;
+
+export const _ColumnChart = (args: ColumnChartProps) => (<div className={css.container}>
+  <ColumnChart
+    {...args}
+    headerActions={
+      <Button
+        children="Download"
+        iconLeftName="cloud-arrow-down"
+        onClick={() => {}}
+        size="small"
+        type="secondary"
+      />
+    }
+  />
+</div>);
+
+_ColumnChart.args = {
+  classNames: {wrapper: css.columnChartWrap},
+  cardTitle: 'Column Chart Title',
+  customExportOptions,
+  series: columnChartSeries,
+  xAxis: xAxisProps,
+  yAxis: yAxisProps,
+  legend,
+};
+
+export const _ColumnChartWithEmptyData = (args: ColumnChartProps) => (<div className={css.container}>
+  <ColumnChart
+    {...args}
+    headerActions={
+      <Button
+        children="Download"
+        iconLeftName="cloud-arrow-down"
+        onClick={() => {}}
+        size="small"
+        type="secondary"
+      />
+    }
+  />
+</div>);
+
+_ColumnChartWithEmptyData.args = {
+  classNames: {wrapper: css.columnChartWrap},
+  cardTitle: 'Column Chart Title',
+  customExportOptions,
+  series: columnChartSeries,
+  xAxis: xAxisProps,
+  yAxis: yAxisProps,
+  legend,
+  hasEmptyData: true,
+  emptyText: (<EmptyData /> as React.ReactElement<React.ComponentProps<typeof EmptyData>>),
+};
+
+/**
+ * Story for Column Chart with drilldown
+ */
+
+const columnChartSeries1 = [
+  {
+    name: 'Inbound',
+    data: [
+      {name: 'Q1 • 23', y: 3800, drilldown: 'q1_23'},
+      {name: 'Q2 • 23', y: 3200, drilldown: 'q2_23'},
+      {name: 'Q3 • 23', y: 2800, drilldown: 'q3_23'},
+      {name: 'Q4 • 23', y: 3600, drilldown: 'q4_23'},
+    ],
+  },
+  {
+    name: 'Inbound',
+    data: [
+      {name: 'Q1 • 23', y: 2686},
+      {name: 'Q2 • 23', y: 2250},
+      {name: 'Q3 • 23', y: 2300},
+      {name: 'Q4 • 23', y: 2100},
+    ],
+  },
+];
+
+const yAxisProps1 = {
+  title: {
+    text: 'Amount Sourced',
+  },
+} as const;
+
+const columnChartSeries1Drilldown = {
+  series: [
+    {
+      id: 'q1_23',
+      name: 'Inbound Sourced Drilldown',
+      data: [
+        {name: 'Chatbot', y: 4200},
+        {name: 'Discover', y: 3400},
+        {name: 'Other', y: 3600},
+      ],
+    },
+    {
+      id: 'q2_23',
+      name: 'Inbound Sourced Drilldown',
+      data: [
+        {name: 'Chatbot', y: 4200},
+        {name: 'Discover', y: 3400},
+        {name: 'Other', y: 3600},
+      ],
+    },
+    {
+      id: 'q3_23',
+      name: 'Outbound Sourced',
+      data: [
+        {name: 'Chatbot', y: 2200},
+        {name: 'Discover', y: 1400},
+        {name: 'Other', y: 3600},
+      ],
+    },
+    {
+      id: 'q4_23',
+      name: 'Outbound Sourced',
+      data: [
+        {name: 'Chatbot', y: 2200},
+        {name: 'Discover', y: 1400},
+        {name: 'Other', y: 3600},
+      ],
+    },
+  ],
+} as const;
+
+export const _ColumnChartWithDrilldown = (args: ColumnChartProps) => (<div className={css.container}>
+  <ColumnChart
+    {...args}
+    headerActions={
+      <Button
+        children="Download"
+        iconLeftName="cloud-arrow-down"
+        onClick={() => {}}
+        size="small"
+        type="secondary"
+      />
+    }
+  />
+</div>);
+
+_ColumnChartWithDrilldown.args = {
+  classNames: {wrapper: css.columnChartWrap},
+  cardTitle: 'Column Chart Title',
+  customExportOptions,
+  series: columnChartSeries1,
+  drilldown: columnChartSeries1Drilldown,
+  yAxis: yAxisProps1,
+  legend,
+};
+
+const columnChart2Series = [
+  {
+    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'},
+    ],
+  },
+  {
+    name: 'Monthly Sales 2',
+    data: [150, 180, 220, 160, 240, 300],
+  },
+];
+
+const yAxisProps2 = {
+  title: {
+    text: 'Sales',
+  },
+} as const;
+
+const legend2 = {
+  enabled: true,
+  shadow: false,
+} as const;
+
+const plotOptions2 = {
+  series: {
+    cursor: 'pointer',
+  },
+} as const;
+const columnChart2DrilldownSeries = {
+  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: 100, drilldown: 'daily'},
+      ],
+    },
+    {
+      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: 100, drilldown: 'daily'},
+      ],
+    },
+    {
+      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, drilldown: 'daily'},
+      ],
+    },
+    {
+      name: 'April Weekly Sales Data',
+      id: 'apr',
+      data: [
+        {name: 'Week 13', y: 80},
+        {name: 'Week 14', y: 100, drilldown: 'daily'},
+        {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, drilldown: 'daily'},
+        {name: 'Week 4', y: 120},
+      ],
+    },
+    {
+      name: 'June Weekly Sales Data',
+      id: 'jun',
+      data: [
+        {name: 'Week 1', y: 100, drilldown: 'daily'},
+        {name: 'Week 2', y: 120},
+        {name: 'Week 3', y: 110},
+        {name: 'Week 4', y: 130},
+      ],
+    },
+    {
+      name: 'Daily Sales Data',
+      id: 'daily',
+      data: [
+        {name: 'Day 1', y: 10},
+        {name: 'Day 2', y: 15},
+        {name: 'Day 3', y: 12},
+        {name: 'Day 4', y: 18},
+        {name: 'Day 5', y: 15},
+        {name: 'Day 6', y: 11},
+        {name: 'Day 7', y: 19},
+      ],
+    },
+  ],
+} as const;
+
+export const _ColumnChartWithMultiLevelDrilldown = (args: ColumnChartProps) => (<div className={css.container}>
+  <ColumnChart
+    {...args}
+    headerActions={
+      <Button
+        children="Download"
+        iconLeftName="cloud-arrow-down"
+        onClick={() => {}}
+        size="small"
+        type="secondary"
+      />
+    }
+  />
+</div>);
+
+_ColumnChartWithMultiLevelDrilldown.args = {
+  classNames: {wrapper: css.columnChartWrap},
+  cardTitle: 'Column Chart Drilldown Title',
+  customExportOptions,
+  series: columnChart2Series,
+  drilldown: columnChart2DrilldownSeries,
+  yAxis: yAxisProps2,
+  legend: legend2,
+  plotOptions: plotOptions2,
+};

package/lib/components/Charts/ColumnChart/ColumnChart.tsx

@@ -0,0 +1,125 @@
+import * as React from 'react';
+import Highcharts from 'highcharts';
+import HighchartsReact from 'highcharts-react-official';
+
+import type {
+  ChartOptions,
+  DataOptionsType,
+  Drilldown,
+} from '../../../types/charts';
+import {
+  columnPlotWidth,
+  getColumnChartOptions,
+  getDataVizColor,
+  mergeChartUserOptions,
+} from '../../../utils/charts';
+import classify from '../../../utils/classify';
+import {
+  ChartWrapperClassNames,
+  ExportOptionType,
+  ChartWrapper,
+} from '../ChartWrapper';
+
+import css from './ColumnChart.module.css';
+
+
+export type ClassNames = Readonly<((ChartWrapperClassNames) & {
+  highChart?: string;
+})>;
+
+export type ColumnSeries = {
+  name: string;
+  data: DataOptionsType[];
+};
+
+export type ColumnChartProps = ((ChartOptions) & {
+  isLoading?: boolean;
+  classNames?: ClassNames;
+  cardTitle?: React.ReactNode;
+  customExportOptions?: Array<ExportOptionType> | null;
+  series: Array<ColumnSeries>;
+  drilldown?: Drilldown;
+  headerActions?: React.ReactNode;
+  hasEmptyData?: boolean;
+  emptyText?: React.ReactNode;
+});
+
+export const ColumnChart = (
+  {
+    isLoading,
+    classNames,
+    cardTitle,
+    customExportOptions,
+    series,
+    drilldown,
+    headerActions,
+    hasEmptyData,
+    emptyText,
+    ...userOptions
+  }: ColumnChartProps,
+) => {
+  const chartRef = React.createRef();
+
+  const columnChartSeries = series.map((seriesItem, index) => ({
+    ...seriesItem,
+    name: seriesItem.name,
+    data: seriesItem.data,
+    color: getDataVizColor(index),
+    pointWidth: columnPlotWidth,
+  }));
+
+  //@ts-ignore - TS2322 - Type 'SeriesOptionsType' is not assignable to type 'SeriesOptionsType'.
+  const addColorToDrilldownSeries = (series: undefined | Array<SeriesOptionsType>) =>
+    //@ts-ignore - TS2322 - Type 'SeriesOptionsType' is not assignable to type 'SeriesOptionsType'.
+    series?.map((seriesItem: SeriesOptionsType) => ({
+      ...seriesItem,
+// @ts-ignore - TS7006 - Parameter 'dataItem' implicitly has an 'any' type. | TS7006 - Parameter 'index' implicitly has an 'any' type.
+      data: seriesItem.data.map((dataItem, index) => ({
+        ...dataItem,
+        color: getDataVizColor(index),
+        pointWidth: columnPlotWidth,
+      })),
+    }));
+
+  const columnDrilldown = drilldown
+    ? {
+      ...drilldown,
+      series: addColorToDrilldownSeries(drilldown.series),
+      breadcrumbs: {floating: false},
+    }
+    : {};
+
+  const defaultColumnChartOptions = getColumnChartOptions();
+
+  const chartOptions = mergeChartUserOptions(defaultColumnChartOptions, {
+    series: columnChartSeries,
+    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.columnChartContainer, highChart),
+        }}
+// @ts-ignore - TS2322 - Type 'RefObject<unknown>' is not assignable to type 'Ref<HighchartsReactRefObject> | undefined'.
+        ref={chartRef}
+        options={chartOptions}
+      />
+    </ChartWrapper>
+  );
+};

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

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

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

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

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

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