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

Sense UI components library

// @flow strict

import {colorBorderPrimary} from '../../styles/variables/_color.js';
import type {ChartOptions} from '../../types/charts';

import {commonChartOptions} from './charts';
import {
  activeLabelStyle,
  bottomLegendRow,
  xAxisLabelStyle,
  xAxisTitleStyle,
  yAxisLabelStyle,
  yAxisTitleStyle,
} from './helpers';

/**
 * This function modifies the the common chart behavior to column chart default behavior.
 * It will not take userPassed option into account.
 */

export const getColumnChartOptions = (): ChartOptions => ({
  ...commonChartOptions,
  chart: {
    ...commonChartOptions.chart,
    type: 'column',
  },
  legend: {
    ...commonChartOptions.legend,
    ...bottomLegendRow,
    symbolWidth: 18,
  },
  xAxis: {
    ...commonChartOptions.xAxis,
    labels: {
      style: xAxisLabelStyle,
    },
    title: {
      margin: 12,
      style: xAxisTitleStyle,
    },
    lineColor: colorBorderPrimary,
  },
  yAxis: {
    labels: {
      align: 'right',
      distance: 12,
      style: yAxisLabelStyle,
    },
    title: {
      margin: 12,
      style: yAxisTitleStyle,
    },
  },
  drilldown: {
    activeAxisLabelStyle: activeLabelStyle,
    activeDataLabelStyle: activeLabelStyle,
    breadcrumbs: {
      floating: true,
    },
  },
});

export const columnPlotWidth = 28;