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> |