debian-mirror-gitlab/app/assets/javascripts/monitoring/components/charts/heatmap.vue

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

75 lines
1.6 KiB
Vue
Raw Normal View History

2019-12-26 22:10:19 +05:30
<script>
import { GlHeatmap } from '@gitlab/ui/dist/charts';
2020-06-23 00:09:42 +05:30
import { formatDate, timezones, formats } from '../../format_date';
2021-03-11 19:13:27 +05:30
import { graphDataValidatorForValues } from '../../utils';
2019-12-26 22:10:19 +05:30
export default {
components: {
GlHeatmap,
},
props: {
graphData: {
type: Object,
required: true,
validator: graphDataValidatorForValues.bind(null, false),
},
2020-06-23 00:09:42 +05:30
timezone: {
type: String,
required: false,
default: timezones.LOCAL,
},
2020-03-13 15:44:24 +05:30
},
data() {
return {
width: 0,
};
2019-12-26 22:10:19 +05:30
},
computed: {
chartData() {
2020-01-01 13:55:28 +05:30
return this.metrics.result.reduce(
2019-12-26 22:10:19 +05:30
(acc, result, i) => [...acc, ...result.values.map((value, j) => [i, j, value[1]])],
[],
);
},
xAxisName() {
2020-10-24 23:57:45 +05:30
return this.graphData.xLabel || '';
2019-12-26 22:10:19 +05:30
},
yAxisName() {
return this.graphData.y_label || '';
},
xAxisLabels() {
2021-03-08 18:12:59 +05:30
return this.metrics.result.map((res) => Object.values(res.metric)[0]);
2019-12-26 22:10:19 +05:30
},
yAxisLabels() {
2021-03-08 18:12:59 +05:30
return this.result.values.map((val) => {
2019-12-26 22:10:19 +05:30
const [yLabel] = val;
2020-07-28 23:09:34 +05:30
return formatDate(new Date(yLabel), {
format: formats.shortTime,
timezone: this.timezone,
});
2019-12-26 22:10:19 +05:30
});
},
result() {
2020-01-01 13:55:28 +05:30
return this.metrics.result[0];
2019-12-26 22:10:19 +05:30
},
2020-01-01 13:55:28 +05:30
metrics() {
return this.graphData.metrics[0];
2019-12-26 22:10:19 +05:30
},
},
};
</script>
<template>
2022-05-07 20:08:51 +05:30
<gl-heatmap
ref="heatmapChart"
v-bind="$attrs"
:responsive="true"
:data-series="chartData"
:x-axis-name="xAxisName"
:y-axis-name="yAxisName"
:x-axis-labels="xAxisLabels"
:y-axis-labels="yAxisLabels"
:width="width"
/>
2019-12-26 22:10:19 +05:30
</template>