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

package/lib/utils/charts/donutChart.d.ts

@@ -0,0 +1,116 @@
+import type {ChartOptions, LegendOptionsType} from '../../types/charts';
+import {commonChartOptions} from './charts';
+import {deepMerge} from './helpers';
+type DonutChartPropsType = {
+  legend?: LegendOptionsType;
+  defaultCenterHTML?: string;
+};
+
+/**
+ * Defining these constants here so that internal calculations are self explanatory.
+ */
+const INNER_SIZE = 0.5; // set .5 here for 50% inner size w.r.t the pie chart outer circle.
+
+const LEGEND_WIDTH = 0.4; // set .4 here for 40% legend width w.r.t the plot width.
+
+const CHART_WIDTH = 1 - LEGEND_WIDTH;
+const CHART_CENTER = (1 - LEGEND_WIDTH) / 2;
+const CHART_SIZE = 0.8; // chart size w.r.t area allocated to chart drawing;
+
+export const rightLegendColumn = {
+  layout: 'vertical',
+  align: 'right',
+  verticalAlign: 'middle',
+  itemMarginBottom: 12,
+  symbolPadding: 8,
+  symbolWidth: 8,
+  // take it as 10% of width as left margin
+  width: `${LEGEND_WIDTH * 90}%`,
+};
+
+/**
+ * This function modifies the the common chart behavior to donut chart default behavior.
+ * It will not take userPassed option into account.
+ */
+export const getDonutChartOptions = ({
+  legend,
+  defaultCenterHTML,
+}: DonutChartPropsType): ChartOptions => {
+  const legendOption = deepMerge(commonChartOptions.legend, legend);
+  const isLegendEnabled = legendOption.enabled;
+  return {
+    ...commonChartOptions,
+    chart: {
+      ...commonChartOptions.chart,
+      type: 'pie',
+      spacing: [0, 0, 0, 0],
+      margin: [0, 0, 0, 0],
+      events: {
+        render() {
+          //$FlowFixMe[object-this-reference]
+          const chart = this;
+          const containerWidth = chart.renderTo.offsetWidth;
+          const desiredHeight = CHART_WIDTH * containerWidth;
+          // 5px adjustment required due to borderWidth mostly.
+          const centerTextX = isLegendEnabled
+            ? parseInt(chart.plotWidth) * CHART_CENTER + 5
+            : 0;
+          chart.update(
+            {
+              chart: {
+                height: desiredHeight, // Set the height dynamically based on the container's width
+              },
+              subtitle: {
+                x: centerTextX,
+              },
+            },
+            false,
+          );
+        },
+      },
+    },
+    legend: {...legendOption, ...rightLegendColumn},
+    plotOptions: {
+      pie: {
+        innerSize: `${INNER_SIZE * 100}%`,
+        allowPointSelect: true,
+        cursor: 'pointer',
+        dataLabels: {
+          // auto disabling the data label when legend is enabled.
+          enabled: !isLegendEnabled,
+          distance: 20,
+        },
+        showInLegend: true,
+        center: isLegendEnabled
+          ? [`${CHART_CENTER * 100}%`, '50%']
+          : ['50%', '50%'],
+        size: `${CHART_SIZE * 100}%`,
+        borderWidth: 5,
+        borderRadius: 10,
+        minSize: 240,
+        clip: false,
+      },
+    },
+    subtitle: {
+      useHTML: true,
+      text: defaultCenterHTML,
+      verticalAlign: 'middle',
+      align: isLegendEnabled ? 'left' : 'center',
+      style: {
+        alignContent: 'center',
+        // Note: Width was not working, have given miWidth and maxWidth
+        minWidth: isLegendEnabled
+          ? `${CHART_WIDTH * CHART_SIZE * INNER_SIZE * 80}%`
+          : `${CHART_SIZE * INNER_SIZE * 80}%`,
+        maxWidth: isLegendEnabled
+          ? `${CHART_WIDTH * CHART_SIZE * INNER_SIZE * 80}%`
+          : `${CHART_SIZE * INNER_SIZE * 80}%`,
+        ...(isLegendEnabled
+          ? {
+              transform: 'translate(-50%)',
+            }
+          : {}),
+      },
+    },
+  };
+};

package/lib/utils/charts/funnelChart.d.ts

@@ -0,0 +1,94 @@
+import type {FunnelSeriesItem} from '../../components/Charts/FunnelChart/FunnelChart';
+import {colorBorderPrimary} from '../../styles/variables/_color';
+import type {
+  ChartOptions,
+  DataOptionsType,
+  Drilldown,
+} from '../../types/charts';
+import {commonChartOptions, getDataVizColor} from './charts';
+import {
+  bottomLegendRow,
+  xAxisTitleStyle,
+  yAxisLabelStyle,
+  yAxisTitleStyle,
+} from './helpers';
+import {formLabelSmall} from './typography';
+
+/**
+ * This function modifies the the common chart behavior to funnel chart default behavior.
+ * It will not take userPassed option into account.
+ */
+export const getFunnelChartOptions = (): ChartOptions => ({
+  ...commonChartOptions,
+  chart: {
+    type: 'funnel',
+  },
+  legend: {...commonChartOptions.legend, ...bottomLegendRow, symbolWidth: 18},
+  xAxis: {
+    ...commonChartOptions.xAxis,
+    labels: {
+      style: formLabelSmall,
+    },
+    title: {
+      margin: 12,
+      style: xAxisTitleStyle,
+    },
+    lineColor: colorBorderPrimary,
+  },
+  yAxis: {
+    labels: {
+      align: 'right',
+      distance: 12,
+      style: yAxisLabelStyle,
+    },
+    title: {
+      margin: 12,
+      style: yAxisTitleStyle,
+    },
+  },
+  plotOptions: {
+    funnel: {
+      neckWidth: '15%',
+      neckHeight: '10%',
+      minSize: '50%',
+      width: '55%',
+      dataLabels: {
+        enabled: true,
+        useHTML: true,
+        // Allows custom HTML formatting
+        format: `<div style="text-align: center">
+          <span>{point.name}</span><br>
+          <span>{point.y}</span>
+          </div>`,
+        style: {
+          fontWeight: 'bold',
+        },
+      },
+    },
+  },
+});
+export const addColorsToFunnelSeries = (
+  series: Array<FunnelSeriesItem>,
+  showInLegend: boolean = true,
+): Array<FunnelSeriesItem> =>
+  series.map((item: FunnelSeriesItem) => ({
+    ...item,
+    data: item.data.map((seriesItem: DataOptionsType, index: number) => ({
+      ...seriesItem,
+      color: getDataVizColor(index), // Apply color based on index
+    })),
+    showInLegend, // Ensure legend visibility
+  }));
+export const addColorsToFunnelDrilldownSeries = (
+  drilldownSeries: Drilldown,
+  showInLegend: boolean = true,
+): Drilldown => ({
+  series: drilldownSeries.series?.map((series) => ({
+    ...series,
+    data: series.data.map((dataPoint, index) => ({
+      ...dataPoint,
+      color: getDataVizColor(index), // Assign a color dynamically based on index
+    })),
+    showInLegend, // Ensure legend is displayed
+  })),
+});

package/lib/utils/charts/helpers.d.ts

@@ -0,0 +1,44 @@
+import {$Shape} from 'utility-types';
+import merge from 'lodash/merge';
+import {
+  colorTextPrimary,
+  colorTextSecondary,
+} from '../../styles/variables/_color';
+import {
+  bodySmall,
+  buttonTextExtraSmall,
+  formLabelSmall,
+  underline,
+} from './typography';
+export const deepMerge = <T extends {}>(
+  obj1?: $Shape<T>,
+  obj2?: $Shape<T>,
+  ...args: Array<$Shape<T> | null | undefined>
+): T => merge({}, obj1, obj2, ...args); // {} is used here to ensure obj1 is not modified
+export const rightLineLegendColumn = {
+  layout: 'vertical',
+  align: 'right',
+  verticalAlign: 'middle',
+  itemMarginBottom: 12,
+  symbolPadding: 4,
+  symbolWidth: 16,
+  width: '40%',
+};
+export const bottomLegendRow = {
+  layout: 'horizontal',
+  align: 'center',
+  verticalAlign: 'bottom',
+  itemDistance: 20,
+  symbolPadding: 4,
+  symbolWidth: 16,
+};
+export const yAxisTitleStyle = {...bodySmall, color: colorTextSecondary};
+export const xAxisTitleStyle = {...bodySmall, color: colorTextSecondary};
+export const yAxisLabelStyle = {...formLabelSmall};
+export const xAxisLabelStyle = {...buttonTextExtraSmall};
+export const activeLabelStyle = {
+  ...buttonTextExtraSmall,
+  ...underline,
+  color: colorTextPrimary,
+  fill: colorTextPrimary,
+};

package/lib/utils/charts/index.d.ts

@@ -0,0 +1,7 @@
+export * from './charts';
+export * from './columnChart';
+export * from './donutChart';
+export * from './helpers';
+export * from './lineChart';
+export * from './spiderChart';
+export * from './typography';

package/lib/utils/charts/lineChart.d.ts

@@ -0,0 +1,44 @@
+import {colorBorderPrimary} from '../../styles/variables/_color';
+import type {ChartOptions} from '../../types/charts';
+import {commonChartOptions} from './charts';
+import {
+  bottomLegendRow,
+  xAxisTitleStyle,
+  yAxisLabelStyle,
+  yAxisTitleStyle,
+} from './helpers';
+import {formLabelSmall} from './typography';
+
+/**
+ * This function modifies the the common chart behavior to line chart default behavior.
+ * It will not take userPassed option into account.
+ */
+export const getLineChartOptions = (): ChartOptions => ({
+  ...commonChartOptions,
+  chart: {
+    type: 'line',
+  },
+  legend: {...commonChartOptions.legend, ...bottomLegendRow, symbolWidth: 18},
+  xAxis: {
+    ...commonChartOptions.xAxis,
+    labels: {
+      style: formLabelSmall,
+    },
+    title: {
+      margin: 12,
+      style: xAxisTitleStyle,
+    },
+    lineColor: colorBorderPrimary,
+  },
+  yAxis: {
+    labels: {
+      align: 'right',
+      distance: 12,
+      style: yAxisLabelStyle,
+    },
+    title: {
+      margin: 12,
+      style: yAxisTitleStyle,
+    },
+  },
+});

package/lib/utils/charts/spiderChart.d.ts

@@ -0,0 +1,46 @@
+import {colorTextSecondary} from '../../styles/variables/_color';
+import type {ChartOptions} from '../../types/charts';
+import {commonChartOptions} from './charts';
+import {rightLineLegendColumn} from './helpers';
+import {bodySmall} from './typography';
+export const bodySmallSecondary = {...bodySmall, color: colorTextSecondary};
+
+/**
+ * This function modifies the the common chart behavior to spider chart default behavior.
+ * It will not take userPassed option into account.
+ */
+export const getSpiderChartOptions = (): ChartOptions => ({
+  ...commonChartOptions,
+  chart: {
+    ...commonChartOptions.chart,
+    polar: true,
+    type: 'line',
+    spacing: [0, 0, 0, 0],
+    margin: [0, 0, 0, 0],
+  },
+  xAxis: {
+    ...commonChartOptions.xAxis,
+    labels: {
+      style: bodySmallSecondary,
+    },
+    lineWidth: 0,
+    tickmarkPlacement: 'on',
+  },
+  yAxis: {
+    labels: {
+      style: bodySmallSecondary,
+    },
+    gridLineInterpolation: 'polygon',
+    lineWidth: 0,
+  },
+  legend: {
+    ...commonChartOptions.legend,
+    ...rightLineLegendColumn,
+    symbolWidth: 18,
+  },
+  pane: {
+    center: ['30%', '50%'],
+    size: '70%',
+  },
+  tooltip: {...commonChartOptions.tooltip, followPointer: false, shared: true},
+});

package/lib/utils/charts/typography.d.ts

@@ -0,0 +1,42 @@
+import {colorTextPrimary} from '../../styles/variables/_color';
+import {
+  fontLetterSpacing0,
+  fontLetterSpacing1,
+  fontLetterSpacing4,
+  fontSize12,
+  fontWeightBook,
+  fontWeightMedium,
+} from '../../styles/variables/_font';
+export const baseType = {
+  fontFamily: 'Centra No 2',
+  fontStyle: 'normal',
+  margin: 0,
+  color: colorTextPrimary,
+  letterSpacing: fontLetterSpacing0,
+  fontWeight: fontWeightMedium,
+  display: 'flex',
+  alignItems: 'center',
+};
+export const bodySmall = {
+  ...baseType,
+  fontSize: fontSize12,
+  fontWeight: fontWeightBook,
+  letterSpacing: fontLetterSpacing4,
+};
+export const formLabelSmall = {
+  ...baseType,
+  fontSize: fontSize12, // Removing the font height as its breaking the chart axis labels
+};
+export const buttonTextExtraSmall = {
+  ...baseType,
+  fontSize: fontSize12,
+  letterSpacing: fontLetterSpacing1, // Removing the font height as its breaking the chart axis labels
+};
+export const underline = {
+  textDecoration: 'underline',
+};
+export const subTitleExtraSmall = {
+  ...baseType,
+  fontSize: fontSize12,
+  letterSpacing: fontLetterSpacing0, // Removing the font height as its breaking the chart axis labels
+};

package/lib/utils/classify/index.d.ts

@@ -0,0 +1,27 @@
+import isPlainObject from 'lodash/isPlainObject';
+import map from 'lodash/map';
+export function classify(...args: Array<unknown>): string {
+  return args
+    .map((arg) => {
+      let mappedArg = arg;
+
+      if (isPlainObject(arg)) {
+        // $FlowFixMe[incompatible-call]
+        mappedArg = map(arg, (test, name: string) => (test ? name : null));
+      }
+
+      return mappedArg;
+    })
+    .reduce((array, current) => {
+      if (Array.isArray(current)) {
+        array.push(...current);
+      } else {
+        array.push(current);
+      }
+
+      return array;
+    }, [])
+    .filter((val) => val)
+    .join(' ');
+}
+export default classify;

package/lib/utils/click-away/click-away.d.ts

@@ -0,0 +1,194 @@
+import * as React from 'react';
+import invariant from 'invariant';
+import {pageHeight} from '../dom';
+type BoundaryRefType<T> = {
+  current: T | null | undefined;
+};
+type TriggerRefType<T> = {
+  current: T | null | undefined;
+};
+export type ChildProps = {
+  onOpen: () => void;
+  isOpen: boolean;
+  height: number | null | undefined;
+  pageBottom: number | null | undefined;
+  clickAway: () => void;
+  boundaryRef: BoundaryRefType<HTMLElement | null | undefined>;
+  triggerRef: TriggerRefType<HTMLElement | null | undefined>;
+};
+export type ClickAwayRefType =
+  | {
+      current:
+        | {
+            forceClose: () => void;
+            forceOpen: () => void;
+          }
+        | null
+        | undefined;
+    }
+  | null
+  | undefined;
+export type ClickAwayProps = {
+  closeOnEscapeKeypress?: boolean;
+  children: (props: ChildProps) => React.ReactNode;
+  onChange?: (isOpen: boolean) => unknown;
+  clickAwayRef?: ClickAwayRefType;
+};
+type ClickAwayState = {
+  isOpen: boolean;
+  height: number | null | undefined;
+  pageBottom: number | null | undefined;
+};
+// TODO(Nishant): Make this a functional component
+export class ClickAway extends React.Component<ClickAwayProps, ClickAwayState> {
+  static defaultProps: {
+    closeOnEscapeKeypress?: boolean;
+  } = {
+    closeOnEscapeKeypress: true,
+  };
+  state: ClickAwayState = {
+    isOpen: false,
+    height: null,
+    pageBottom: null,
+  };
+  el: HTMLElement | null | undefined = null;
+  boundaryRef: BoundaryRefType<HTMLElement | null | undefined> =
+    React.createRef();
+  triggerRef: TriggerRefType<HTMLElement | null | undefined> =
+    React.createRef();
+
+  componentDidMount() {
+    if (this.el) {
+      this.setState({
+        height: this.el.offsetHeight,
+        pageBottom: this.pageBottom(),
+      });
+    }
+  }
+
+  componentDidUpdate(prevProps: ClickAwayProps, prevState: ClickAwayState) {
+    const {isOpen} = this.state;
+
+    if (prevState.isOpen !== isOpen) {
+      if (this.state.isOpen) {
+        window.document.addEventListener('click', this.handleCloseClick, {
+          capture: true,
+        });
+
+        if (this.props.closeOnEscapeKeypress) {
+          window.document.addEventListener(
+            'keyup',
+            this.handleCloseOnEscapeKeypress,
+          );
+        }
+      } else {
+        window.document.removeEventListener('click', this.handleCloseClick, {
+          capture: true,
+        });
+        window.document.removeEventListener(
+          'keyup',
+          this.handleCloseOnEscapeKeypress,
+        );
+      }
+    }
+  }
+
+  componentWillUnmount() {
+    window.document.removeEventListener('click', this.handleCloseClick, {
+      capture: true,
+    });
+    window.document.removeEventListener(
+      'keyup',
+      this.handleCloseOnEscapeKeypress,
+    );
+  }
+
+  render(): React.ReactNode {
+    const {height, isOpen, pageBottom} = this.state;
+    const {clickAwayRef} = this.props;
+
+    if (clickAwayRef) {
+      clickAwayRef.current = {
+        forceClose: this.forceClose,
+        forceOpen: this.handleOpenClick,
+      };
+    }
+
+    return this.props.children({
+      onOpen: this.handleOpenClick,
+      isOpen,
+      height,
+      pageBottom,
+      clickAway: this.forceClose,
+      boundaryRef: this.boundaryRef,
+      triggerRef: this.triggerRef,
+    });
+  }
+
+  handleOpenClick: () => void = () => {
+    // NOTE (kyle): we recalculate the position on click because sibling and niece components
+    // could have changed.
+    let {pageBottom} = this.state;
+
+    if (this.el) {
+      pageBottom = this.pageBottom();
+    }
+
+    this.setState(
+      {
+        isOpen: !this.state.isOpen,
+        pageBottom,
+      },
+      this.handleOnChange,
+    );
+  };
+  handleCloseClick: (evt: MouseEvent) => void = (evt: MouseEvent) => {
+    if (
+      evt.target instanceof Node &&
+      this.boundaryRef &&
+      (this.boundaryRef === evt.target ||
+        this.boundaryRef.current?.contains(evt.target))
+    ) {
+      return;
+    }
+
+    if (
+      evt.target instanceof Node &&
+      this.triggerRef &&
+      (this.triggerRef === evt.target ||
+        this.triggerRef.current?.contains(evt.target))
+    ) {
+      return;
+    }
+
+    this.setState(
+      {
+        isOpen: false,
+      },
+      this.handleOnChange,
+    );
+  };
+  handleCloseOnEscapeKeypress: (
+    evt?: React.KeyboardEvent<EventTarget>,
+  ) => void = (evt?: React.KeyboardEvent<EventTarget>) => {
+    if (evt?.key === 'Escape') {
+      this.forceClose();
+    }
+  };
+  forceClose: () => void = () => {
+    this.setState(
+      {
+        isOpen: false,
+      },
+      this.handleOnChange,
+    );
+  };
+  handleOnChange: () => unknown = () =>
+    this.props.onChange && this.props.onChange(this.state.isOpen);
+
+  pageBottom(): any {
+    invariant(this.el, 'pageBottom() requires that this.el not be null');
+    const bottomBound = this.el ? this.el.getBoundingClientRect().bottom : 0;
+    return pageHeight() - bottomBound + window.scrollY;
+  }
+}

package/lib/utils/click-away/index.d.ts

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