All files / app/assets/javascripts/monitoring/components/charts heatmap.vue

85% Statements 17/20
33.33% Branches 2/6
92.86% Functions 13/14
85% Lines 17/20

Press n or j to go to the next uncovered block, b, p or k for the previous block.

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  11x 11x 11x 11x                                           11x           11x 88x         11x     11x     33x   11x 11x 33x   33x             11x     11x                       66x                            
<script>
import { GlResizeObserverDirective } from '@gitlab/ui';
import { GlHeatmap } from '@gitlab/ui/dist/charts';
import { formatDate, timezones, formats } from '../../format_date';
import { graphDataValidatorForValues } from '../../utils';
 
export default {
  components: {
    GlHeatmap,
  },
  directives: {
    GlResizeObserverDirective,
  },
  props: {
    graphData: {
      type: Object,
      required: true,
      validator: graphDataValidatorForValues.bind(null, false),
    },
    timezone: {
      type: String,
      required: false,
      default: timezones.LOCAL,
    },
  },
  data() {
    return {
      width: 0,
    };
  },
  computed: {
    chartData() {
      return this.metrics.result.reduce(
        (acc, result, i) => [...acc, ...result.values.map((value, j) => [i, j, value[1]])],
        [],
      );
    },
    xAxisName() {
      return this.graphData.xLabel || '';
    },
    yAxisName() {
      return this.graphData.y_label || '';
    },
    xAxisLabels() {
      return this.metrics.result.map((res) => Object.values(res.metric)[0]);
    },
    yAxisLabels() {
      return this.result.values.map((val) => {
        const [yLabel] = val;
 
        return formatDate(new Date(yLabel), {
          format: formats.shortTime,
          timezone: this.timezone,
        });
      });
    },
    result() {
      return this.metrics.result[0];
    },
    metrics() {
      return this.graphData.metrics[0];
    },
  },
  methods: {
    onResize() {
      if (this.$refs.heatmapChart) return;
      const { width } = this.$refs.heatmapChart.$el.getBoundingClientRect();
      this.width = width;
    },
  },
};
</script>
<template>
  <div v-gl-resize-observer-directive="onResize">
    <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="width"
    />
  </div>
</template>