import { SUPPORTED_FORMATS, getFormatter } from '~/lib/utils/unit_format'; import { __, s__ } from '~/locale'; import { formatDate, timezones, formats } from '../../format_date'; const yAxisBoundaryGap = [0.1, 0.1]; /** * Max string length of formatted axis tick */ const maxDataAxisTickLength = 8; // Defaults const defaultFormat = SUPPORTED_FORMATS.engineering; const defaultYAxisFormat = defaultFormat; const defaultYAxisPrecision = 2; const defaultTooltipFormat = defaultFormat; const defaultTooltipPrecision = 3; // Give enough space for y-axis with units and name. const chartGridLeft = 63; // larger gap than gitlab-ui's default to fit formatted numbers const chartGridRight = 10; // half of the scroll-handle icon for data zoom const yAxisNameGap = chartGridLeft - 12; // offset the axis label line-height // Axis options /** * Axis types * @see https://echarts.apache.org/en/option.html#xAxis.type */ export const axisTypes = { /** * Category axis, suitable for discrete category data. */ category: 'category', /** * Time axis, suitable for continuous time series data. */ time: 'time', }; /** * Converts .yml parameters to echarts axis options for data axis * @param {Object} param - Dashboard .yml definition options */ const getDataAxisOptions = ({ format, precision, name }) => { const formatter = getFormatter(format); // default to engineeringNotation, same as gitlab-ui return { name, nameLocation: 'center', // same as gitlab-ui's default scale: true, axisLabel: { formatter: val => formatter(val, precision, maxDataAxisTickLength), }, }; }; /** * Converts .yml parameters to echarts y-axis options * @param {Object} param - Dashboard .yml definition options */ export const getYAxisOptions = ({ name = s__('Metrics|Values'), format = defaultYAxisFormat, precision = defaultYAxisPrecision, } = {}) => { return { nameGap: yAxisNameGap, scale: true, boundaryGap: yAxisBoundaryGap, ...getDataAxisOptions({ name, format, precision, }), }; }; export const getTimeAxisOptions = ({ timezone = timezones.LOCAL, format = formats.shortDateTime, } = {}) => ({ name: __('Time'), type: axisTypes.time, axisLabel: { formatter: date => formatDate(date, { format, timezone }), }, axisPointer: { snap: false, }, }); // Chart grid /** * Grid with enough room to display chart. */ export const getChartGrid = ({ left = chartGridLeft, right = chartGridRight } = {}) => ({ left, right, }); // Tooltip options export const getTooltipFormatter = ({ format = defaultTooltipFormat, precision = defaultTooltipPrecision, } = {}) => { const formatter = getFormatter(format); return num => formatter(num, precision); };