@spaced-out/ui-design-system/lib/utils/charts/charts.js.flow

Sense UI components library

// @flow strict

import {
  colorDataViz1,
  colorDataViz2,
  colorDataViz3,
  colorDataViz4,
  colorDataViz5,
  colorDataViz6,
  colorDataViz7,
  colorDataViz8,
  colorFillInversePrimary,
  colorTextSecondary,
  colorTooltipFill,
} from '../../styles/variables/_color';
import type {ChartOptions} from '../../types/charts';

import {deepMerge} from './helpers';
import {formLabelSmall, subTitleExtraSmall} from './typography';

import css from '../../components/Charts/ChartTooltip/ChartTooltip.module.css';
import typographyCss from '../../styles/typography.module.css';


export const DATA_VIZ_COLORS = [
  colorDataViz1,
  colorDataViz2,
  colorDataViz3,
  colorDataViz4,
  colorDataViz5,
  colorDataViz6,
  colorDataViz7,
  colorDataViz8,
];

export const getDataVizColor = (dataIndex: number): string => {
  const colorIndex = dataIndex % DATA_VIZ_COLORS.length;
  return DATA_VIZ_COLORS[colorIndex];
};

export const breadcrumbStyle = {
  ...subTitleExtraSmall,
  color: colorTextSecondary,
};

export const commonChartOptions: $Shape<ChartOptions> = {
  chart: {
    spacingBottom: 0,
    spacingLeft: 0,
    spacingRight: 0,
  },
  title: {
    text: null,
  },
  exporting: {
    buttons: {
      contextButton: {
        enabled: false,
      },
    },
  },
  credits: {
    enabled: false,
  },
  tooltip: {
    followPointer: false,
    backgroundColor: colorTooltipFill,
    useHTML: true,
    outside: true,
    headerFormat: `<span class="${typographyCss.bodySmall} ${css.tooltipHeader}">{point.key}</span>`,
    pointFormat: `<span class=${css.tooltipPoint}>
        <span style="background-color:{point.color};" class=${css.indicatorCircle}></span>
        <span class="${css.tooltipContent} ${typographyCss.bodyMedium}"> {series.name}: {point.y}</span>
      </span>`,
  },
  drilldown: {
    breadcrumbs: {
      floating: true,
      style: breadcrumbStyle,
      buttonTheme: {
        style: breadcrumbStyle,
      },
    },
  },
  legend: {
    itemStyle: {...formLabelSmall, paddingTop: '1px'},
    symbolHeight: 8,
    enabled: true,
  },
  xAxis: {
    type: 'category',
    padding: 0,
  },
  navigation: {
    breadcrumbs: {
      buttonTheme: {
        style: {
          color: colorFillInversePrimary,
        },
      },
      separator: {
        text: '>',
      },
    },
  },
};

export const mergeChartUserOptions = (
  defaultoptions: ChartOptions,
  userOptions: ChartOptions,
): ChartOptions => deepMerge(defaultoptions, userOptions);