superset2/caravel/assets/javascripts/components/VictoryTheme.js

const { assign } = Object;

const A11Y_BABU = '#00A699';
const AXIS_LINE_GRAY = '#484848';

// Colors
const colors = [
  '#ffffff',
  '#f0f0f0',
  '#d9d9d9',
  '#bdbdbd',
  '#969696',
  '#737373',
  '#525252',
  '#252525',
  '#000000',
];

const charcoal = '#484848';

// Typography
const sansSerif = '"Roboto", sans-serif';
const letterSpacing = 'normal';
const fontSize = 8;

// Layout
const baseProps = {
  width: 450,
  height: 300,
  padding: 50,
  colorScale: colors,
};

// Labels
const baseLabelStyles = {
  fontFamily: sansSerif,
  fontSize,
  letterSpacing,
  padding: 10,
  fill: charcoal,
  stroke: 'transparent',
};

// Strokes
const strokeLinecap = 'round';
const strokeLinejoin = 'round';

// Create the theme
const theme = {
  area: assign({
    style: {
      data: {
        fill: charcoal,
      },
      labels: baseLabelStyles,
    },
  }, baseProps),
  axis: assign({
    style: {
      axis: {
        fill: 'none',
        stroke: AXIS_LINE_GRAY,
        strokeWidth: 1,
        strokeLinecap,
        strokeLinejoin,
      },
      axisLabel: assign({}, baseLabelStyles, {
        padding: 25,
      }),
      grid: {
        fill: 'none',
        stroke: 'transparent',
      },
      ticks: {
        fill: 'none',
        padding: 10,
        size: 1,
        stroke: 'transparent',
      },
      tickLabels: baseLabelStyles,
    },
  }, baseProps),
  bar: assign({
    style: {
      data: {
        fill: A11Y_BABU,
        padding: 10,
        stroke: 'transparent',
        strokeWidth: 0,
        width: 8,
      },
      labels: baseLabelStyles,
    },
  }, baseProps),
  candlestick: assign({
    style: {
      data: {
        stroke: A11Y_BABU,
        strokeWidth: 1,
      },
      labels: assign({}, baseLabelStyles, {
        padding: 25,
        textAnchor: 'end',
      }),
    },
    candleColors: {
      positive: '#ffffff',
      negative: charcoal,
    },
  }, baseProps),
  chart: baseProps,
  errorbar: assign({
    style: {
      data: {
        fill: 'none',
        stroke: charcoal,
        strokeWidth: 2,
      },
      labels: assign({}, baseLabelStyles, {
        textAnchor: 'start',
      }),
    },
  }, baseProps),
  group: assign({
    colorScale: colors,
  }, baseProps),
  line: assign({
    style: {
      data: {
        fill: 'none',
        stroke: A11Y_BABU,
        strokeWidth: 2,
      },
      labels: assign({}, baseLabelStyles, {
        textAnchor: 'start',
      }),
    },
  }, baseProps),
  pie: {
    style: {
      data: {
        padding: 10,
        stroke: 'none',
        strokeWidth: 1,
      },
      labels: assign({}, baseLabelStyles, {
        padding: 200,
        textAnchor: 'middle',
      }),
    },
    colorScale: colors,
    width: 400,
    height: 400,
    padding: 50,
  },
  scatter: assign({
    style: {
      data: {
        fill: charcoal,
        stroke: 'transparent',
        strokeWidth: 0,
      },
      labels: assign({}, baseLabelStyles, {
        textAnchor: 'middle',
      }),
    },
  }, baseProps),
  stack: assign({
    colorScale: colors,
  }, baseProps),
};

export default theme;