UNPKG

@gitlab/ui

Version:
363 lines (351 loc) • 11.6 kB
import merge from 'lodash/merge'; import { yAxis, generateBarSeries, generateLineSeries, gridWithSecondaryYAxis, grid, defaultChartOptions, dataZoomAdjustments, mergeSeriesToOptions } from '../../../utils/charts/config'; import { LEGEND_AVERAGE_TEXT, LEGEND_MAX_TEXT, LEGEND_MIN_TEXT, LEGEND_CURRENT_TEXT, LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE, CHART_DEFAULT_SERIES_STACK, CHART_DEFAULT_SERIES_SECONDARY_STACK, CHART_TYPE_LINE, HEIGHT_AUTO_CLASSES } from '../../../utils/charts/constants'; import { colorFromDefaultPalette } from '../../../utils/charts/theme'; import { stackedPresentationOptions } from '../../../utils/constants'; import TooltipDefaultFormat from '../shared/tooltip/tooltip_default_format/tooltip_default_format'; import Chart from '../chart/chart'; import ChartLegend from '../legend/legend'; import ChartTooltip from '../shared/tooltip/tooltip'; import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js'; const yAxisDefaults = { ...yAxis, nameLocation: 'center', axisTick: { show: false } }; var script = { name: 'GlStackedColumnChart', components: { Chart, ChartTooltip, ChartLegend, TooltipDefaultFormat }, inheritAttrs: false, props: { bars: { type: Array, required: false, default: () => [] }, lines: { type: Array, required: false, default: () => [] }, secondaryData: { type: Array, required: false, default: () => [] }, option: { type: Object, required: false, default: () => ({}) }, presentation: { type: String, required: false, default: stackedPresentationOptions.stacked, validator: value => Object.values(stackedPresentationOptions).indexOf(value) !== -1 }, groupBy: { type: Array, required: true }, xAxisType: { type: String, required: true, validator: value => ['value', 'category', 'time', 'log'].indexOf(value) !== -1 }, xAxisTitle: { type: String, required: true }, yAxisTitle: { type: String, required: true }, secondaryDataTitle: { type: String, required: false, default: '' }, seriesNames: { type: Array, required: false, default: () => [] }, includeLegendAvgMax: { type: Boolean, required: false, default: true }, legendAverageText: { type: String, required: false, default: LEGEND_AVERAGE_TEXT }, legendMaxText: { type: String, required: false, default: LEGEND_MAX_TEXT }, legendMinText: { type: String, required: false, default: LEGEND_MIN_TEXT }, legendCurrentText: { type: String, required: false, default: LEGEND_CURRENT_TEXT }, legendLayout: { type: String, required: false, default: LEGEND_LAYOUT_INLINE, validator(layout) { return [LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE].indexOf(layout) !== -1; } }, /** * Callback called when showing or refreshing a tooltip. * **Deprecated:** Use slots `#tooltip-title`, `#tooltip-content` or `#tooltip-value`. * * @deprecated Use slots `#tooltip-title`, `#tooltip-content` or `#tooltip-value`. */ formatTooltipText: { type: Function, required: false, default: null }, customPalette: { type: Array, required: false, default: null }, /** * Sets the chart's height in pixels. Set to `"auto"` to use the height of the container. */ height: { type: [Number, String], required: false, default: null } }, data() { return { chart: null, compiledOptions: null }; }, computed: { hasSecondaryAxis() { return Boolean(this.secondaryData.length); }, barSeries() { return this.bars.map((_ref, index) => { let { name, data, stack } = _ref; const color = this.getColor(index); const seriesStack = this.presentation === stackedPresentationOptions.stacked ? stack || CHART_DEFAULT_SERIES_STACK : null; return generateBarSeries({ stack: seriesStack, name, data, color }); }); }, lineSeries() { const offset = this.bars.length; return this.lines.map((_ref2, index) => { let { name, data } = _ref2; const color = this.getColor(offset + index); return generateLineSeries({ name, data, color }); }); }, secondarySeries() { const offset = this.bars.length + this.lines.length; return this.secondaryData.map((_ref3, index) => { let { name, data, type, stack } = _ref3; const color = this.getColor(offset + index); const seriesStack = this.presentation === stackedPresentationOptions.stacked ? stack || CHART_DEFAULT_SERIES_SECONDARY_STACK : null; return type === CHART_TYPE_LINE ? generateLineSeries({ color, name, data, yAxisIndex: 1 }) : generateBarSeries({ color, name, data, stack: seriesStack, yAxisIndex: 1 }); }); }, series() { return [...this.barSeries, ...this.lineSeries, ...this.secondarySeries]; }, options() { const stackedColumnChartOptions = { grid: this.hasSecondaryAxis ? gridWithSecondaryYAxis : grid, xAxis: { boundaryGap: true, axisLabel: { margin: 20, verticalAlign: 'bottom' }, axisLine: { show: false }, axisPointer: { type: 'none' }, data: this.groupBy, name: this.xAxisTitle, type: this.xAxisType }, yAxis: [{ ...yAxisDefaults, name: this.yAxisTitle }, { ...yAxisDefaults, name: this.secondaryDataTitle, show: this.hasSecondaryAxis }] }; // `formatTooltipText` is deprecated, these added options should be // removed when `formatTooltipText` is removed. const deprecatedTooltipFormatterOptions = { xAxis: { axisPointer: { show: true, label: { formatter: this.formatTooltipText } } } }; const mergedOptions = merge({}, defaultChartOptions, stackedColumnChartOptions, this.formatTooltipText ? deprecatedTooltipFormatterOptions : {}, this.option, dataZoomAdjustments(this.option.dataZoom)); // All chart options can be merged but series // needs to be handled specially return mergeSeriesToOptions(mergedOptions, this.series); }, legendStyle() { return { paddingLeft: `${grid.left}px` }; }, seriesInfo() { var _this$compiledOptions; const compiledSeries = ((_this$compiledOptions = this.compiledOptions) === null || _this$compiledOptions === void 0 ? void 0 : _this$compiledOptions.series) || []; return compiledSeries.reduce((acc, series, index) => { acc.push({ name: series.name, type: series.type, color: this.getColor(index), data: this.includeLegendAvgMax ? series.data.map(data => data) : undefined, yAxisIndex: series.yAxisIndex }); return acc; }, []); }, autoHeight() { return this.height === 'auto'; } }, methods: { getColor(index) { var _this$customPalette; return this.customPalette ? (_this$customPalette = this.customPalette) === null || _this$customPalette === void 0 ? void 0 : _this$customPalette[index] : colorFromDefaultPalette(index); }, onCreated(chart) { this.chart = chart; this.$emit('created', chart); }, onUpdated() { this.compiledOptions = this.chart.getOption(); }, getTooltipTitle(_ref4) { var _options$xAxis, _options$xAxis$; let { params } = _ref4; if (!params) return ''; const options = this.chart.getOption(); const titleAxisName = options === null || options === void 0 ? void 0 : (_options$xAxis = options.xAxis) === null || _options$xAxis === void 0 ? void 0 : (_options$xAxis$ = _options$xAxis[0]) === null || _options$xAxis$ === void 0 ? void 0 : _options$xAxis$.name; return titleAxisName ? `${params.value} (${titleAxisName})` : params.value; }, getTooltipContent(_ref5) { let { params } = _ref5; if (!params) return {}; const tooltipContentEntries = params.seriesData.toSorted((a, b) => b.seriesIndex - a.seriesIndex) // Invert stacking order so it matches chart (see https://github.com/apache/echarts/issues/14700) .map(_ref6 => { let { seriesName = '', value, borderColor } = _ref6; return [seriesName, { value, color: borderColor }]; }); return Object.fromEntries(tooltipContentEntries); } }, HEIGHT_AUTO_CLASSES }; /* script */ const __vue_script__ = script; /* template */ var __vue_render__ = function () { var _obj; var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-relative",class:( _obj = {}, _obj[_vm.$options.HEIGHT_AUTO_CLASSES] = _vm.autoHeight, _obj )},[_c('chart',_vm._g(_vm._b({class:{ 'gl-grow': _vm.autoHeight },attrs:{"height":_vm.height,"options":_vm.options},on:{"created":_vm.onCreated,"updated":_vm.onUpdated}},'chart',_vm.$attrs,false),_vm.$listeners)),_vm._v(" "),(_vm.chart)?_c('chart-tooltip',{attrs:{"chart":_vm.chart,"use-default-tooltip-formatter":!_vm.formatTooltipText},scopedSlots:_vm._u([{key:"title",fn:function(scope){return [_vm._t("tooltip-title",function(){return [_vm._v(_vm._s(_vm.getTooltipTitle(scope)))]},null,scope)]}},{key:"default",fn:function(scope){return [_vm._t("tooltip-content",function(){return [_c('tooltip-default-format',{attrs:{"tooltip-content":_vm.getTooltipContent(scope)},scopedSlots:_vm._u([(_vm.$scopedSlots['tooltip-value'])?{key:"tooltip-value",fn:function(valueScope){return [_vm._t("tooltip-value",null,null,valueScope)]}}:null],null,true)})]},null,scope)]}}],null,true)}):_vm._e(),_vm._v(" "),(_vm.compiledOptions)?_c('chart-legend',{style:(_vm.legendStyle),attrs:{"chart":_vm.chart,"series-info":_vm.seriesInfo,"text-style":_vm.compiledOptions.textStyle,"min-text":_vm.legendMinText,"max-text":_vm.legendMaxText,"average-text":_vm.legendAverageText,"current-text":_vm.legendCurrentText,"layout":_vm.legendLayout}}):_vm._e()],1)}; var __vue_staticRenderFns__ = []; /* style */ const __vue_inject_styles__ = undefined; /* scoped */ const __vue_scope_id__ = undefined; /* module identifier */ const __vue_module_identifier__ = undefined; /* functional template */ const __vue_is_functional_template__ = false; /* style inject */ /* style inject SSR */ /* style inject shadow dom */ const __vue_component__ = /*#__PURE__*/__vue_normalize__( { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ }, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined ); export { __vue_component__ as default };