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
104
105
106
107
108
109
110
|
<script>
import { GlGaugeChart } from '@gitlab/ui/dist/charts';
import { isFinite, isArray, isInteger } from 'lodash';
import { getFormatter, SUPPORTED_FORMATS } from '~/lib/utils/unit_format';
import { graphDataValidatorForValues } from '../../utils';
import { getValidThresholds } from './options';
export default {
components: {
GlGaugeChart,
},
props: {
graphData: {
type: Object,
required: true,
validator: graphDataValidatorForValues.bind(null, true),
},
},
data() {
return {
width: 0,
};
},
computed: {
rangeValues() {
let min = 0;
let max = 100;
const { minValue, maxValue } = this.graphData;
const isValidMinMax = () => {
return isFinite(minValue) && isFinite(maxValue) && minValue < maxValue;
};
if (isValidMinMax()) {
min = minValue;
max = maxValue;
}
return {
min,
max,
};
},
validThresholds() {
const { mode, values } = this.graphData?.thresholds || {};
const range = this.rangeValues;
if (!isArray(values)) {
return [];
}
return getValidThresholds({ mode, range, values });
},
queryResult() {
return this.graphData?.metrics[0]?.result[0]?.value[1];
},
splitValue() {
const { split } = this.graphData;
const defaultValue = 10;
return isInteger(split) && split > 0 ? split : defaultValue;
},
textValue() {
const formatFromPanel = this.graphData.format;
const defaultFormat = SUPPORTED_FORMATS.engineering;
const format = SUPPORTED_FORMATS[formatFromPanel] ?? defaultFormat;
const { queryResult } = this;
const formatter = getFormatter(format);
return isFinite(queryResult) ? formatter(queryResult) : '--';
},
thresholdsValue() {
/**
* If there are no valid thresholds, a default threshold
* will be set at 90% of the gauge arcs' max value
*/
const { min, max } = this.rangeValues;
const defaultThresholdValue = [(max - min) * 0.95];
return this.validThresholds.length ? this.validThresholds : defaultThresholdValue;
},
value() {
/**
* The gauge chart gitlab-ui component expects a value
* of type number.
*
* So, if the query result is undefined,
* we pass the gauge chart a value of NaN.
*/
return this.queryResult || NaN;
},
},
};
</script>
<template>
<gl-gauge-chart
ref="gaugeChart"
v-bind="$attrs"
:responsive="true"
:value="value"
:min="rangeValues.min"
:max="rangeValues.max"
:thresholds="thresholdsValue"
:text="textValue"
:split-number="splitValue"
:width="width"
/>
</template>
|
