1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
|
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 = 75;
// 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: 63, // larger gap than gitlab-ui's default to fit with formatted numbers
scale: true,
boundaryGap: yAxisBoundaryGap,
...getDataAxisOptions({
name,
format,
precision,
}),
};
};
export const getTimeAxisOptions = ({ timezone = timezones.LOCAL } = {}) => ({
name: __('Time'),
type: axisTypes.time,
axisLabel: {
formatter: date => formatDate(date, { format: formats.shortTime, timezone }),
},
axisPointer: {
snap: false,
},
});
// Chart grid
/**
* Grid with enough room to display chart.
*/
export const getChartGrid = ({ left = chartGridLeft } = {}) => ({ left });
// Tooltip options
export const getTooltipFormatter = ({
format = defaultTooltipFormat,
precision = defaultTooltipPrecision,
} = {}) => {
const formatter = getFormatter(format);
return num => formatter(num, precision);
};
|
