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

GitLab UI Components

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

var whiteNormal = '#f0f0f0';
var green500 = '#1aaa55';
var blue200 = '#b8d6f4';
var blue400 = '#418cd8';
var blue500 = '#1f78d1';
var blue600 = '#1b69b6';
var blue800 = '#134a81';
var orange500 = '#fc9403';
var red500 = '#db3b21';
var gray100 = '#f2f2f2';
var gray200 = '#dfdfdf';
var gray300 = '#ccc';
var gray600 = '#919191';
var gray700 = '#707070';
var gray900 = '#2e2e2e';
var themeIndigo500 = '#6666c4';

var themeName = 'gitlab';
var heatmapHues = [gray100, blue200, blue400, blue600, blue800];
var colorPalette = [blue500, green500, orange500, themeIndigo500];
var colorFromPalette = function colorFromPalette(index) {
  return colorPalette[index % colorPalette.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: colorPalette,
  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 { colorFromPalette, colorPalette, heatmapHues, sparkline, themeName };