@gitlab/ui/dist/utils/charts/theme.js

GitLab UI Components

import { hexToRgba } from '../utils';

var whiteNormal = '#f0f0f0';
var red500 = '#dd2b0e';
var gray100 = '#dbdbdb';
var gray200 = '#bfbfbf';
var gray300 = '#999';
var gray600 = '#5e5e5e';
var gray700 = '#525252';
var gray900 = '#303030';
var dataVizGreen500 = '#608b2f';
var dataVizGreen600 = '#487900';
var dataVizGreen700 = '#366800';
var dataVizGreen800 = '#275600';
var dataVizGreen900 = '#1a4500';
var dataVizGreen950 = '#0f3300';
var dataVizAqua500 = '#0094b6';
var dataVizAqua600 = '#0080a1';
var dataVizAqua700 = '#006887';
var dataVizAqua800 = '#004d67';
var dataVizAqua900 = '#003f57';
var dataVizAqua950 = '#00293d';
var dataVizBlue200 = '#b7c6ff';
var dataVizBlue400 = '#748eff';
var dataVizBlue500 = '#5772ff';
var dataVizBlue600 = '#445cf2';
var dataVizBlue700 = '#3547de';
var dataVizBlue800 = '#232fcf';
var dataVizBlue900 = '#1e23a8';
var dataVizBlue950 = '#11118a';
var dataVizMagenta500 = '#d84280';
var dataVizMagenta600 = '#c52c6b';
var dataVizMagenta700 = '#b31756';
var dataVizMagenta800 = '#950943';
var dataVizMagenta900 = '#7a0033';
var dataVizMagenta950 = '#570028';
var dataVizOrange500 = '#d14e00';
var dataVizOrange600 = '#b24800';
var dataVizOrange700 = '#944100';
var dataVizOrange800 = '#6f3500';
var dataVizOrange900 = '#5c2b00';
var dataVizOrange950 = '#421e00';

var themeName = 'gitlab';
var heatmapHues = [gray100, dataVizBlue200, dataVizBlue400, dataVizBlue600, dataVizBlue800];
/**
 * The default palette is based on the Categorical data palette
 * Categorical data (also known as qualitative or thematic) uses hue to
 * differentiate qualitative data, and lightness to differentiate quantitive data.
 * More info: https://gitlab.com/gitlab-org/gitlab-design/-/issues/719#categorical
 */

var colorPaletteDefault = [dataVizBlue500, dataVizOrange600, dataVizAqua500, dataVizGreen700, dataVizMagenta800, dataVizBlue700, dataVizOrange800, dataVizAqua700, dataVizGreen900, dataVizMagenta950, dataVizBlue900, dataVizOrange950, dataVizAqua900, dataVizGreen600, dataVizMagenta700, dataVizBlue600, dataVizOrange700, dataVizAqua600, dataVizGreen800, dataVizMagenta900, dataVizBlue800, dataVizOrange900, dataVizAqua800, dataVizGreen950, dataVizMagenta500, dataVizBlue950, dataVizOrange500, dataVizAqua950, dataVizGreen500, dataVizMagenta600];
var colorFromDefaultPalette = function colorFromDefaultPalette(index) {
  return colorPaletteDefault[index % colorPaletteDefault.length];
};
var sparkline = {
  // additional colors are TBD - see issue: https://gitlab.com/gitlab-org/gitlab-ui/issues/484
  variants: {
    gray900: gray900
  },
  defaultVariant: 'gray900'
};
var axes = {
  axisLabel: {
    margin: 8,
    show: true,
    color: gray600,
    textStyle: {
      color: gray600
    }
  },
  axisLine: {
    show: false
  },
  axisPointer: {
    lineStyle: {
      color: gray600
    },
    label: {
      show: false
    }
  },
  axisTick: {
    show: true,
    alignWithLabel: true,
    lineStyle: {
      color: gray200
    }
  },
  nameGap: 30,
  nameTextStyle: {
    fontStyle: 'bold'
  },
  splitLine: {
    lineStyle: {
      color: [gray200]
    }
  },
  splitArea: {
    show: false,
    areaStyle: {
      color: [hexToRgba(whiteNormal, 0.3), hexToRgba(gray300, 0.3)]
    }
  }
};
var theme = {
  color: colorPaletteDefault,
  backgroundColor: 'transparent',
  textStyle: {
    color: gray900
  },
  markLine: {
    silent: true,
    symbol: 'none',
    label: {
      show: false
    },
    lineStyle: {
      color: red500,
      width: 1,
      type: 'dashed'
    }
  },
  markArea: {
    silent: true,
    itemStyle: {
      color: hexToRgba(red500, 0.1)
    }
  },
  dataZoom: {
    borderColor: 'transparent',
    filterMode: 'none',
    dataBackground: {
      lineStyle: {
        color: gray100,
        opacity: 1
      },
      areaStyle: {
        color: gray100,
        opacity: 1
      }
    },
    fillerColor: hexToRgba(gray300, 0.2),
    handleColor: gray700,
    handleSize: '50%',
    labelFormatter: function labelFormatter() {
      return null;
    },
    textStyle: {
      color: gray600
    }
  },
  toolbox: {
    top: '-5',
    left: 'center',
    itemSize: 14,
    iconStyle: {
      color: gray200,
      borderWidth: 0,
      emphasis: {
        borderWidth: 0,
        color: gray700
      }
    },
    itemGap: 8,
    feature: {
      dataZoom: {
        title: {
          zoom: 'Click to zoom in on a portion of the graph',
          back: 'Remove selection'
        }
      },
      restore: {
        title: 'Remove all selections and return chart to default state'
      },
      saveAsImage: {
        title: 'Save chart as an image',
        name: 'graph'
      }
    }
  },
  markPoint: {
    label: {
      normal: {
        textStyle: {
          color: whiteNormal
        }
      },
      emphasis: {
        textStyle: {
          color: whiteNormal
        }
      }
    }
  },
  line: {
    itemStyle: {
      normal: {
        borderWidth: 1
      }
    },
    lineStyle: {
      normal: {
        width: 2
      }
    },
    symbolSize: '6',
    symbol: 'circle',
    showSymbol: false,
    smooth: false
  },
  categoryAxis: axes,
  valueAxis: axes,
  logAxis: axes,
  timeAxis: axes
};

export default theme;
export { colorFromDefaultPalette, colorPaletteDefault, heatmapHues, sparkline, themeName };