Read about our upcoming Code of Conduct on this issue

single_stat.vue 980 Bytes
Newer Older
1
2
<script>
import { GlSingleStat } from '@gitlab/ui/dist/charts';
3
4
import { roundOffFloat } from '~/lib/utils/common_utils';
import { graphDataValidatorForValues } from '../../utils';
5
6
7
8
9
10
11

export default {
  components: {
    GlSingleStat,
  },
  inheritAttrs: false,
  props: {
12
13
    graphData: {
      type: Object,
14
      required: true,
15
      validator: graphDataValidatorForValues.bind(null, true),
16
17
18
    },
  },
  computed: {
19
    queryInfo() {
20
      return this.graphData.metrics[0];
21
22
23
24
25
26
    },
    engineeringNotation() {
      return `${roundOffFloat(this.queryInfo.result[0].value[1], 1)}${this.queryInfo.unit}`;
    },
    graphTitle() {
      return this.queryInfo.label;
27
28
29
30
31
    },
  },
};
</script>
<template>
32
  <div class="prometheus-graph">
33
    <div class="prometheus-graph-header">
34
      <h5 ref="graphTitle" class="prometheus-graph-title">{{ graphTitle }}</h5>
35
    </div>
36
    <gl-single-stat :value="engineeringNotation" :title="graphTitle" variant="success" />
37
38
  </div>
</template>