@spaced-out/ui-design-system 0.3.38-beta.0 → 0.3.39-beta.0

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

@@ -0,0 +1,111 @@
+import {$ReadOnly} from 'utility-types';
+import * as React from 'react';
+//@ts-expect-error[untyped-import]
+import Highcharts from 'highcharts';
+//@ts-expect-error[untyped-import]
+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 type {ChartWrapperClassNames, ExportOptionType} from '../ChartWrapper';
+import {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): React.ReactNode => {
+  const chartRef = React.createRef();
+  const columnChartSeries = series.map((seriesItem, index) => ({
+    ...seriesItem,
+    name: seriesItem.name,
+    data: seriesItem.data,
+    color: getDataVizColor(index),
+    pointWidth: columnPlotWidth,
+  }));
+
+  const addColorToDrilldownSeries = (series) =>
+    series?.map((seriesItem) => ({
+      ...seriesItem,
+      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();
+  //$FlowFixMe[cannot-spread-inexact]
+  const chartOptions = mergeChartUserOptions(defaultColumnChartOptions, {
+    series: columnChartSeries,
+    drilldown: columnDrilldown,
+    ...userOptions,
+  });
+  const {highChart, ...wrapperClassNames} = classNames || {};
+  return (
+    <ChartWrapper
+      isLoading={isLoading}
+      title={cardTitle}
+      ref={chartRef}
+      classNames={wrapperClassNames}
+      customExportOptions={customExportOptions}
+      headerActions={headerActions}
+      hasEmptyData={hasEmptyData}
+      emptyText={emptyText}
+    >
+      <HighchartsReact
+        highcharts={Highcharts}
+        containerProps={{
+          className: classify(css.columnChartContainer, highChart),
+        }}
+        ref={chartRef}
+        options={chartOptions}
+      />
+    </ChartWrapper>
+  );
+};

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

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

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

@@ -0,0 +1,142 @@
+import {$ReadOnly} from 'utility-types';
+import * as React from 'react';
+//@ts-expect-error[untyped-import]
+import Highcharts from 'highcharts';
+//@ts-expect-error[untyped-import]
+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 type {ChartWrapperClassNames, ExportOptionType} from '../ChartWrapper';
+import {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): React.ReactNode => {
+  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) =>
+    series?.map((seriesItem) => ({
+      ...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,
+  });
+  //$FlowFixMe[cannot-spread-inexact]
+  const chartOptions = mergeChartUserOptions(defaultLineChartOptions, {
+    series: donutChartSeries,
+    drilldown: donutDrilldown,
+    ...userOptions,
+  });
+  return (
+    <ChartWrapper
+      isLoading={isLoading}
+      title={cardTitle}
+      ref={chartRef}
+      customExportOptions={customExportOptions}
+      headerActions={headerActions}
+      classNames={wrapperClassNames}
+      hasEmptyData={hasEmptyData}
+      emptyText={emptyText}
+    >
+      <HighchartsReact
+        highcharts={Highcharts}
+        containerProps={{
+          className: classify(css.donutChartContainer, highChart),
+        }}
+        ref={chartRef}
+        options={chartOptions}
+      />
+    </ChartWrapper>
+  );
+};

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

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

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

@@ -0,0 +1,99 @@
+import {$ReadOnly} from 'utility-types';
+import * as React from 'react';
+//@ts-expect-error[untyped-import]
+import Highcharts from 'highcharts';
+//@ts-expect-error[untyped-import]
+import Funnel from 'highcharts/modules/funnel';
+//@ts-expect-error[untyped-import]
+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 type {ChartWrapperClassNames, ExportOptionType} from '../ChartWrapper';
+import {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): React.ReactNode => {
+  Funnel(Highcharts);
+  const chartRef = React.createRef();
+  const funnelChartSeries = addColorsToFunnelSeries(series, showLegend);
+  const defaultFunnelChartOptions = getFunnelChartOptions();
+  const columnDrilldown = drilldown
+    ? {
+        ...addColorsToFunnelDrilldownSeries(drilldown, showLegend),
+        breadcrumbs: {
+          floating: false,
+        },
+      }
+    : {};
+  //$FlowFixMe[cannot-spread-inexact]
+  const chartOptions = mergeChartUserOptions(defaultFunnelChartOptions, {
+    series: funnelChartSeries,
+    drilldown: columnDrilldown,
+    ...userOptions,
+  });
+  const {highChart, ...wrapperClassNames} = classNames || {};
+  return (
+    <ChartWrapper
+      isLoading={isLoading}
+      title={cardTitle}
+      ref={chartRef}
+      classNames={wrapperClassNames}
+      customExportOptions={customExportOptions}
+      headerActions={headerActions}
+      hasEmptyData={hasEmptyData}
+      emptyText={emptyText}
+    >
+      <HighchartsReact
+        highcharts={Highcharts}
+        containerProps={{
+          className: classify(css.funnelChartContainer, highChart),
+        }}
+        ref={chartRef}
+        options={chartOptions}
+      />
+    </ChartWrapper>
+  );
+};

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

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

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

@@ -0,0 +1,97 @@
+import {$ReadOnly} from 'utility-types';
+import * as React from 'react';
+//@ts-expect-error[untyped-import]
+import Highcharts from 'highcharts';
+//@ts-expect-error[untyped-import]
+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 type {ChartWrapperClassNames, ExportOptionType} from '../ChartWrapper';
+import {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): React.ReactNode => {
+  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,
+        },
+      }
+    : {};
+  //$FlowFixMe[cannot-spread-inexact]
+  const chartOptions = mergeChartUserOptions(defaultLineChartOptions, {
+    series: lineChartSeries,
+    drilldown: columnDrilldown,
+    ...userOptions,
+  });
+  const {highChart, ...wrapperClassNames} = classNames || {};
+  return (
+    <ChartWrapper
+      isLoading={isLoading}
+      title={cardTitle}
+      ref={chartRef}
+      classNames={wrapperClassNames}
+      customExportOptions={customExportOptions}
+      headerActions={headerActions}
+      hasEmptyData={hasEmptyData}
+      emptyText={emptyText}
+    >
+      <HighchartsReact
+        highcharts={Highcharts}
+        containerProps={{
+          className: classify(css.lineChartContainer, highChart),
+        }}
+        ref={chartRef}
+        options={chartOptions}
+      />
+    </ChartWrapper>
+  );
+};

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

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

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

@@ -0,0 +1,95 @@
+import {$ReadOnly} from 'utility-types';
+import * as React from 'react';
+//@ts-expect-error[untyped-import]
+import Highcharts from 'highcharts';
+//@ts-expect-error[untyped-import]
+import highChartsMore from 'highcharts/highcharts-more';
+//@ts-expect-error[untyped-import]
+import HighchartsReact from 'highcharts-react-official';
+import type {ChartOptions, DataOptionsType} from '../../../types/charts';
+import {
+  getDataVizColor,
+  getSpiderChartOptions,
+  mergeChartUserOptions,
+} from '../../../utils/charts';
+import classify from '../../../utils/classify';
+import type {ChartWrapperClassNames, ExportOptionType} from '../ChartWrapper';
+import {ChartWrapper} from '../ChartWrapper';
+import css from './SpiderChart.module.css';
+
+if (
+  !!highChartsMore &&
+  !!Highcharts &&
+  typeof highChartsMore === 'function' &&
+  typeof Highcharts === 'object'
+) {
+  highChartsMore(Highcharts);
+}
+
+export type ClassNames = $ReadOnly<
+  ChartWrapperClassNames & {
+    highChart?: string;
+  }
+>;
+export type SpiderSeriesItem = {
+  name: string;
+  data: DataOptionsType[];
+};
+export type SpiderChartProps = ChartOptions & {
+  isLoading?: boolean;
+  classNames?: ClassNames;
+  cardTitle?: React.ReactNode;
+  customExportOptions?: Array<ExportOptionType> | null;
+  headerActions?: React.ReactNode;
+  series: Array<SpiderSeriesItem>;
+  hasEmptyData?: boolean;
+  emptyText?: React.ReactNode;
+};
+export const SpiderChart = ({
+  isLoading,
+  classNames,
+  cardTitle,
+  customExportOptions,
+  headerActions,
+  series,
+  hasEmptyData,
+  emptyText,
+  ...userOptions
+}: SpiderChartProps): React.ReactNode => {
+  const chartRef = React.useRef(null);
+  const spiderSeries = series.map((seriesItem, index) => ({
+    ...seriesItem,
+    name: seriesItem.name,
+    data: seriesItem.data,
+    pointPlacement: 'on',
+    color: getDataVizColor(index),
+  }));
+  const defaultSpiderChartOptions = getSpiderChartOptions();
+  //$FlowFixMe[cannot-spread-inexact]
+  const chartOptions = mergeChartUserOptions(defaultSpiderChartOptions, {
+    series: spiderSeries,
+    ...userOptions,
+  });
+  const {highChart, ...wrapperClassNames} = classNames || {};
+  return (
+    <ChartWrapper
+      isLoading={isLoading}
+      title={cardTitle}
+      ref={chartRef}
+      customExportOptions={customExportOptions}
+      classNames={wrapperClassNames}
+      headerActions={headerActions}
+      hasEmptyData={hasEmptyData}
+      emptyText={emptyText}
+    >
+      <HighchartsReact
+        highcharts={Highcharts}
+        ref={chartRef}
+        containerProps={{
+          className: classify(css.spiderChartContainer, highChart),
+        }}
+        options={chartOptions}
+      />
+    </ChartWrapper>
+  );
+};

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

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

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

@@ -0,0 +1,7 @@
+export * from './ChartTooltip';
+export * from './ChartWrapper';
+export * from './ColumnChart';
+export * from './DonutChart';
+export * from './FunnelChart';
+export * from './LineChart';
+export * from './SpiderChart';