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

Sense UI components library

// @flow strict

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,
  },
});