@gitlab/ui
Version:
GitLab UI Components
363 lines (351 loc) • 11.6 kB
JavaScript
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 };