@gitlab/ui
Version:
GitLab UI Components
193 lines (189 loc) • 7.42 kB
JavaScript
import { GRAY_600, GRAY_200, GRAY_50, GRAY_300, GRAY_100, DATA_VIZ_BLUE_200, DATA_VIZ_BLUE_400, DATA_VIZ_BLUE_600, DATA_VIZ_BLUE_800, GRAY_900, GRAY_500, DATA_VIZ_BLUE_500, DATA_VIZ_BLUE_900, DATA_VIZ_ORANGE_500, DATA_VIZ_ORANGE_600, DATA_VIZ_AQUA_500, DATA_VIZ_GREEN_600, DATA_VIZ_MAGENTA_500, DATA_VIZ_BLUE_700, DATA_VIZ_ORANGE_800, DATA_VIZ_AQUA_700, DATA_VIZ_GREEN_800, DATA_VIZ_MAGENTA_700, DATA_VIZ_ORANGE_950, DATA_VIZ_AQUA_900, DATA_VIZ_GREEN_950, DATA_VIZ_MAGENTA_900, DATA_VIZ_ORANGE_700, DATA_VIZ_AQUA_600, DATA_VIZ_GREEN_700, DATA_VIZ_MAGENTA_600, DATA_VIZ_ORANGE_900, DATA_VIZ_AQUA_800, DATA_VIZ_GREEN_900, DATA_VIZ_MAGENTA_800, DATA_VIZ_BLUE_950, DATA_VIZ_AQUA_950, DATA_VIZ_GREEN_500, DATA_VIZ_MAGENTA_950, DATA_VIZ_ORANGE_400, DATA_VIZ_GREEN_400, DATA_VIZ_BLUE_300, DATA_VIZ_ORANGE_200, DATA_VIZ_AQUA_300, DATA_VIZ_GREEN_200, DATA_VIZ_MAGENTA_300, DATA_VIZ_BLUE_100, DATA_VIZ_ORANGE_50, DATA_VIZ_AQUA_100, DATA_VIZ_GREEN_50, DATA_VIZ_MAGENTA_100, DATA_VIZ_ORANGE_300, DATA_VIZ_AQUA_400, DATA_VIZ_GREEN_300, DATA_VIZ_MAGENTA_400, DATA_VIZ_ORANGE_100, DATA_VIZ_AQUA_200, DATA_VIZ_GREEN_100, DATA_VIZ_MAGENTA_200, DATA_VIZ_BLUE_50, DATA_VIZ_AQUA_50, DATA_VIZ_MAGENTA_50, RED_500, WHITE } from '../../../dist/tokens/js/tokens';
import { scrollHandleSvgPath } from '../svgs/svg_paths';
import { hexToRgba } from '../utils';
const GL_BORDER_RADIUS_BASE = '0.25rem';
const themeName = 'gitlab';
const heatmapHues = [GRAY_100, DATA_VIZ_BLUE_200, DATA_VIZ_BLUE_400, DATA_VIZ_BLUE_600, DATA_VIZ_BLUE_800];
const gaugeNeutralHues = [GRAY_900, GRAY_500];
const gaugeSafeHues = [DATA_VIZ_BLUE_500, DATA_VIZ_BLUE_900];
const gaugeWarningHue = DATA_VIZ_ORANGE_500;
/**
* 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://design.gitlab.com/data-visualization/color#categorical-data
*/
const colorPaletteDefault = [DATA_VIZ_BLUE_500, DATA_VIZ_ORANGE_600, DATA_VIZ_AQUA_500, DATA_VIZ_GREEN_600, DATA_VIZ_MAGENTA_500, DATA_VIZ_BLUE_700, DATA_VIZ_ORANGE_800, DATA_VIZ_AQUA_700, DATA_VIZ_GREEN_800, DATA_VIZ_MAGENTA_700, DATA_VIZ_BLUE_900, DATA_VIZ_ORANGE_950, DATA_VIZ_AQUA_900, DATA_VIZ_GREEN_950, DATA_VIZ_MAGENTA_900, DATA_VIZ_BLUE_600, DATA_VIZ_ORANGE_700, DATA_VIZ_AQUA_600, DATA_VIZ_GREEN_700, DATA_VIZ_MAGENTA_600, DATA_VIZ_BLUE_800, DATA_VIZ_ORANGE_900, DATA_VIZ_AQUA_800, DATA_VIZ_GREEN_900, DATA_VIZ_MAGENTA_800, DATA_VIZ_BLUE_950, DATA_VIZ_ORANGE_500, DATA_VIZ_AQUA_950, DATA_VIZ_GREEN_500, DATA_VIZ_MAGENTA_950];
const colorFromDefaultPalette = index => colorPaletteDefault[index % colorPaletteDefault.length];
const colorPaletteDark = [DATA_VIZ_BLUE_500, DATA_VIZ_ORANGE_400, DATA_VIZ_AQUA_500, DATA_VIZ_GREEN_400, DATA_VIZ_MAGENTA_500, DATA_VIZ_BLUE_300, DATA_VIZ_ORANGE_200, DATA_VIZ_AQUA_300, DATA_VIZ_GREEN_200, DATA_VIZ_MAGENTA_300, DATA_VIZ_BLUE_100, DATA_VIZ_ORANGE_50, DATA_VIZ_AQUA_100, DATA_VIZ_GREEN_50, DATA_VIZ_MAGENTA_100, DATA_VIZ_BLUE_400, DATA_VIZ_ORANGE_300, DATA_VIZ_AQUA_400, DATA_VIZ_GREEN_300, DATA_VIZ_MAGENTA_400, DATA_VIZ_BLUE_200, DATA_VIZ_ORANGE_100, DATA_VIZ_AQUA_200, DATA_VIZ_GREEN_100, DATA_VIZ_MAGENTA_200, DATA_VIZ_BLUE_50, DATA_VIZ_ORANGE_500, DATA_VIZ_AQUA_50, DATA_VIZ_GREEN_500, DATA_VIZ_MAGENTA_50];
const colorFromDarkPalette = index => colorPaletteDark[index % colorPaletteDark.length];
const axes = {
axisLabel: {
margin: 8,
show: true,
color: `var(--gray-600, ${GRAY_600})`,
hideOverlap: true
},
axisLine: {
show: false
},
axisPointer: {
lineStyle: {
type: 'solid',
color: GRAY_600
},
label: {
show: false
}
},
axisTick: {
show: true,
alignWithLabel: true,
lineStyle: {
color: GRAY_200
}
},
nameGap: 30,
nameTextStyle: {
fontWeight: 'bold'
},
splitLine: {
lineStyle: {
color: [GRAY_200]
}
},
splitArea: {
show: false,
areaStyle: {
color: [hexToRgba(GRAY_50, 0.3), hexToRgba(GRAY_300, 0.3)]
}
}
};
const isLineChartWithoutArea = options => Array.isArray(options === null || options === void 0 ? void 0 : options.series) && options.series.some(series => series.type === 'line' && !series.areaStyle);
const createTheme = function () {
let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
return {
color: colorPaletteDefault,
backgroundColor: 'transparent',
textStyle: {
color: `var(--gl-text-color, ${GRAY_900})`
},
markLine: {
silent: true,
symbol: 'none',
label: {
show: false
},
lineStyle: {
color: RED_500,
width: 1,
type: 'dashed'
}
},
markArea: {
silent: true,
itemStyle: {
color: hexToRgba(RED_500, 0.1)
}
},
dataZoom: {
borderColor: 'transparent',
filterMode: 'none',
brushSelect: false,
dataBackground: {
lineStyle: {
width: 2,
color: GRAY_200,
opacity: 1
},
// render unfilled zoom-graph if the series is a line chart without area styles
// more details: https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2364#note_666637306
areaStyle: isLineChartWithoutArea(options) ? {} // Use empty object instead of null, see https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2185#note_707711029 for more context
: {
color: GRAY_50,
opacity: 1
}
},
fillerColor: hexToRgba(GRAY_200, 0.23),
handleIcon: scrollHandleSvgPath,
handleStyle: {
borderColor: 'transparent',
color: GRAY_500
},
handleSize: '50%',
labelFormatter: () => null,
textStyle: {
color: GRAY_600
}
},
toolbox: {
top: '-5',
left: 'center',
itemSize: 14,
emphasis: {
iconStyle: {
borderWidth: 0,
color: GRAY_900,
textBackgroundColor: WHITE,
textBorderRadius: GL_BORDER_RADIUS_BASE,
textPadding: [8, 12]
}
},
iconStyle: {
color: GRAY_500,
borderWidth: 0
},
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: GRAY_50
}
},
emphasis: {
textStyle: {
color: GRAY_50
}
}
}
},
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 { colorFromDarkPalette, colorFromDefaultPalette, colorPaletteDark, colorPaletteDefault, createTheme, gaugeNeutralHues, gaugeSafeHues, gaugeWarningHue, heatmapHues, themeName };