Read about our upcoming Code of Conduct on this issue

heatmap.vue 1.83 KB
Newer Older
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
<script>
import { GlHeatmap } from '@gitlab/ui/dist/charts';
import dateformat from 'dateformat';
import PrometheusHeader from '../shared/prometheus_header.vue';
import ResizableChartContainer from '~/vue_shared/components/resizable_chart/resizable_chart_container.vue';
import { graphDataValidatorForValues } from '../../utils';

export default {
  components: {
    GlHeatmap,
    ResizableChartContainer,
    PrometheusHeader,
  },
  props: {
    graphData: {
      type: Object,
      required: true,
      validator: graphDataValidatorForValues.bind(null, false),
    },
    containerWidth: {
      type: Number,
      required: true,
    },
  },
  computed: {
    chartData() {
27
      return this.metrics.result.reduce(
28
29
30
31
32
33
34
35
36
37
38
        (acc, result, i) => [...acc, ...result.values.map((value, j) => [i, j, value[1]])],
        [],
      );
    },
    xAxisName() {
      return this.graphData.x_label || '';
    },
    yAxisName() {
      return this.graphData.y_label || '';
    },
    xAxisLabels() {
39
      return this.metrics.result.map(res => Object.values(res.metric)[0]);
40
41
42
43
44
45
46
47
48
    },
    yAxisLabels() {
      return this.result.values.map(val => {
        const [yLabel] = val;

        return dateformat(new Date(yLabel), 'HH:MM:ss');
      });
    },
    result() {
49
      return this.metrics.result[0];
50
    },
51
52
    metrics() {
      return this.graphData.metrics[0];
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
    },
  },
};
</script>
<template>
  <div class="prometheus-graph col-12 col-lg-6">
    <prometheus-header :graph-title="graphData.title" />
    <resizable-chart-container>
      <gl-heatmap
        ref="heatmapChart"
        v-bind="$attrs"
        :data-series="chartData"
        :x-axis-name="xAxisName"
        :y-axis-name="yAxisName"
        :x-axis-labels="xAxisLabels"
        :y-axis-labels="yAxisLabels"
        :width="containerWidth"
      />
    </resizable-chart-container>
  </div>
</template>