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

81.48% Statements 22/27
44.44% Branches 4/9
78.57% Functions 11/14
81.48% Lines 22/27

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 88 89 90 91 92 93 94 95 96 97 98  11x 11x 11x 11x 11x                                 2x               2x     4x         2x 2x     2x 2x     2x 2x     4x   4x       2x                     2x 2x   2x 2x                     45x                              
<script>
import { GlResizeObserverDirective } from '@gitlab/ui';
import { GlBarChart } from '@gitlab/ui/dist/charts';
import { getSvgIconPathContent } from '~/lib/utils/icon_utils';
import { chartHeight } from '../../constants';
import { barChartsDataParser, graphDataValidatorForValues } from '../../utils';
 
export default {
  components: {
    GlBarChart,
  },
  directives: {
    GlResizeObserverDirective,
  },
  props: {
    graphData: {
      type: Object,
      required: true,
      validator: graphDataValidatorForValues.bind(null, false),
    },
  },
  data() {
    return {
      width: 0,
      height: chartHeight,
      svgs: {},
    };
  },
  computed: {
    chartData() {
      return barChartsDataParser(this.graphData.metrics);
    },
    chartOptions() {
      return {
        dataZoom: [this.dataZoomConfig],
      };
    },
    xAxisTitle() {
      const { xLabel = '' } = this.graphData;
      return xLabel;
    },
    yAxisTitle() {
      const { y_label = '' } = this.graphData;
      return y_label; // eslint-disable-line babel/camelcase
    },
    xAxisType() {
      const { x_type = 'value' } = this.graphData;
      return x_type; // eslint-disable-line babel/camelcase
    },
    dataZoomConfig() {
      const handleIcon = this.svgs['scroll-handle'];
 
      return handleIcon ? { handleIcon } : {};
    },
  },
  created() {
    this.setSvg('scroll-handle');
  },
  methods: {
    formatLegendLabel(query) {
      return query.label;
    },
    onResize() {
      if (!this.$refs.barChart) return;
      const { width } = this.$refs.barChart.$el.getBoundingClientRect();
      this.width = width;
    },
    setSvg(name) {
      getSvgIconPathContent(name)
        .then((path) => {
E          if (path) {
            this.$set(this.svgs, name, `path://${path}`);
          }
        })
        .catch((e) => {
          // eslint-disable-next-line no-console, @gitlab/require-i18n-strings
          console.error('SVG could not be rendered correctly: ', e);
        });
    },
  },
};
</script>
<template>
  <div v-gl-resize-observer-directive="onResize">
    <gl-bar-chart
      ref="barChart"
      v-bind="$attrs"
      :data="chartData"
      :option="chartOptions"
      :width="width"
      :height="height"
      :x-axis-title="xAxisTitle"
      :y-axis-title="yAxisTitle"
      :x-axis-type="xAxisType"
    />
  </div>
</template>