All files / ee/app/assets/javascripts/analytics/contribution_analytics/components column_chart.vue

0% Statements 0/13
0% Branches 0/3
0% Functions 0/10
0% Lines 0/13

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 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116                                                                                                                                                                                                                                       
<script>
import { GlColumnChart } from '@gitlab/ui/dist/charts';
import { getDataZoomOption } from '~/analytics/shared/utils';
import { getSvgIconPathContent } from '~/lib/utils/icon_utils';
import { truncateWidth } from '~/lib/utils/text_utility';
 
import {
  CHART_HEIGHT,
  CHART_X_AXIS_NAME_TOP_PADDING,
  CHART_X_AXIS_ROTATE,
  INNER_CHART_HEIGHT,
} from '../constants';
 
export default {
  components: {
    GlColumnChart,
  },
  props: {
    chartData: {
      type: Array,
      required: true,
    },
    xAxisTitle: {
      type: String,
      required: false,
      default: '',
    },
    yAxisTitle: {
      type: String,
      required: false,
      default: '',
    },
  },
  data() {
    return {
      width: 0,
      height: CHART_HEIGHT,
      svgs: {},
    };
  },
  computed: {
    handleIcon() {
      return this.svgs['scroll-handle'] ? { handleIcon: this.svgs['scroll-handle'] } : {};
    },
    dataZoomOption() {
      const dataZoom = [
        {
          type: 'slider',
          bottom: 10,
          start: 0,
          ...this.handleIcon,
        },
      ];
 
      return {
        dataZoom: getDataZoomOption({ totalItems: this.chartData.length, dataZoom }),
      };
    },
    chartOptions() {
      return {
        ...this.dataZoomOption,
        height: INNER_CHART_HEIGHT,
        xAxis: {
          axisLabel: {
            rotate: CHART_X_AXIS_ROTATE,
            formatter(value) {
              return truncateWidth(value);
            },
          },
          nameTextStyle: {
            padding: [CHART_X_AXIS_NAME_TOP_PADDING, 0, 0, 0],
          },
        },
      };
    },
    seriesData() {
      return [{ name: 'full', data: this.chartData }];
    },
  },
  methods: {
    setSvg(name) {
      return getSvgIconPathContent(name)
        .then((path) => {
          Iif (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);
        });
    },
    onChartCreated(columnChart) {
      this.setSvg('scroll-handle');
      columnChart.on('datazoom', this.updateAxisNamePadding);
    },
  },
};
</script>
 
<template>
  <gl-column-chart
    ref="columnChart"
    v-bind="$attrs"
    :width="width"
    :height="height"
    :bars="seriesData"
    :responsive="true"
    :x-axis-title="xAxisTitle"
    :y-axis-title="yAxisTitle"
    x-axis-type="category"
    :option="chartOptions"
    @created="onChartCreated"
  />
</template>