@spaced-out/ui-design-system 0.3.45 → 0.3.46

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

@@ -1,111 +0,0 @@
-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

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

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

@@ -1,142 +0,0 @@
-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

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

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

@@ -1,99 +0,0 @@
-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

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

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

@@ -1,97 +0,0 @@
-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

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

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

@@ -1,95 +0,0 @@
-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

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

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

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