2020-03-13 15:44:24 +05:30
|
|
|
<script>
|
|
|
|
import { GlResizeObserverDirective } from '@gitlab/ui';
|
|
|
|
import { GlStackedColumnChart } from '@gitlab/ui/dist/charts';
|
|
|
|
import { getSvgIconPathContent } from '~/lib/utils/icon_utils';
|
|
|
|
import { chartHeight } from '../../constants';
|
|
|
|
import { graphDataValidatorForValues } from '../../utils';
|
|
|
|
|
|
|
|
export default {
|
|
|
|
components: {
|
|
|
|
GlStackedColumnChart,
|
|
|
|
},
|
|
|
|
directives: {
|
|
|
|
GlResizeObserverDirective,
|
|
|
|
},
|
|
|
|
props: {
|
|
|
|
graphData: {
|
|
|
|
type: Object,
|
|
|
|
required: true,
|
|
|
|
validator: graphDataValidatorForValues.bind(null, false),
|
|
|
|
},
|
|
|
|
},
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
width: 0,
|
|
|
|
height: chartHeight,
|
|
|
|
svgs: {},
|
|
|
|
};
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
chartData() {
|
|
|
|
return this.graphData.metrics.map(metric => metric.result[0].values.map(val => val[1]));
|
|
|
|
},
|
|
|
|
xAxisTitle() {
|
|
|
|
return this.graphData.x_label !== undefined ? this.graphData.x_label : '';
|
|
|
|
},
|
|
|
|
yAxisTitle() {
|
|
|
|
return this.graphData.y_label !== undefined ? this.graphData.y_label : '';
|
|
|
|
},
|
|
|
|
xAxisType() {
|
|
|
|
return this.graphData.x_type !== undefined ? this.graphData.x_type : 'category';
|
|
|
|
},
|
|
|
|
groupBy() {
|
|
|
|
return this.graphData.metrics[0].result[0].values.map(val => val[0]);
|
|
|
|
},
|
|
|
|
dataZoomConfig() {
|
|
|
|
const handleIcon = this.svgs['scroll-handle'];
|
|
|
|
|
|
|
|
return handleIcon ? { handleIcon } : {};
|
|
|
|
},
|
|
|
|
chartOptions() {
|
|
|
|
return {
|
|
|
|
dataZoom: this.dataZoomConfig,
|
|
|
|
};
|
|
|
|
},
|
|
|
|
seriesNames() {
|
|
|
|
return this.graphData.metrics.map(metric => metric.series_name);
|
|
|
|
},
|
|
|
|
},
|
|
|
|
created() {
|
|
|
|
this.setSvg('scroll-handle');
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
setSvg(name) {
|
|
|
|
getSvgIconPathContent(name)
|
|
|
|
.then(path => {
|
|
|
|
if (path) {
|
|
|
|
this.$set(this.svgs, name, `path://${path}`);
|
|
|
|
}
|
|
|
|
})
|
|
|
|
.catch(e => {
|
2020-04-22 19:07:51 +05:30
|
|
|
// eslint-disable-next-line no-console, @gitlab/require-i18n-strings
|
2020-03-13 15:44:24 +05:30
|
|
|
console.error('SVG could not be rendered correctly: ', e);
|
|
|
|
});
|
|
|
|
},
|
|
|
|
onResize() {
|
|
|
|
if (!this.$refs.chart) return;
|
|
|
|
const { width } = this.$refs.chart.$el.getBoundingClientRect();
|
|
|
|
this.width = width;
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
<template>
|
2020-04-08 14:13:33 +05:30
|
|
|
<div v-gl-resize-observer-directive="onResize">
|
2020-03-13 15:44:24 +05:30
|
|
|
<gl-stacked-column-chart
|
|
|
|
ref="chart"
|
|
|
|
v-bind="$attrs"
|
|
|
|
:data="chartData"
|
|
|
|
:option="chartOptions"
|
|
|
|
:x-axis-title="xAxisTitle"
|
|
|
|
:y-axis-title="yAxisTitle"
|
|
|
|
:x-axis-type="xAxisType"
|
|
|
|
:group-by="groupBy"
|
|
|
|
:width="width"
|
|
|
|
:height="height"
|
|
|
|
:series-names="seriesNames"
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</template>
|