@gitlab/ui
Version:
GitLab UI Components
353 lines (339 loc) • 11.6 kB
JavaScript
import { merge, isNil } from 'lodash-es';
import { graphic } from 'echarts';
import { GlResizeObserverDirective } from '../../../directives/resize_observer/resize_observer';
import { defaultChartOptions, mergeSeriesToOptions, symbolSize } from '../../../utils/charts/config';
import { HEIGHT_AUTO_HORIZONTAL_LAYOUT_CLASSES } from '../../../utils/charts/constants';
import Chart from '../chart/chart';
import ChartTooltip from '../shared/tooltip/tooltip';
import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
function _arrayLikeToArray(r, a) {
(null == a || a > r.length) && (a = r.length);
for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
return n;
}
function _arrayWithHoles(r) {
if (Array.isArray(r)) return r;
}
function _iterableToArrayLimit(r, l) {
var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
if (null != t) {
var e,
n,
i,
u,
a = [],
f = !0,
o = !1;
try {
if (i = (t = t.call(r)).next, 0 === l) {
if (Object(t) !== t) return;
f = !1;
} else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
} catch (r) {
o = !0, n = r;
} finally {
try {
if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
} finally {
if (o) throw n;
}
}
return a;
}
}
function _nonIterableRest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _slicedToArray(r, e) {
return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
}
function _unsupportedIterableToArray(r, a) {
if (r) {
if ("string" == typeof r) return _arrayLikeToArray(r, a);
var t = {}.toString.call(r).slice(8, -1);
return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
}
}
// the padding is needed so the mark points don't overflow when visible
const gridPadding = symbolSize / 2;
const generateGradient = colors => {
return new graphic.LinearGradient(0, 0, 0, 1, colors.map((color, index) => {
const offset = index / (colors.length - 1);
return {
offset,
color
};
}));
};
var script = {
name: 'GlSparklineChart',
components: {
Chart,
ChartTooltip
},
directives: {
resizeObserver: GlResizeObserverDirective
},
props: {
/**
* The data that is used to plot the chart.
*/
data: {
type: Array,
required: true
},
/**
* Controls the label that is shown within the chart's tooltip. Use it to describe your data.
*/
tooltipLabel: {
type: String,
required: false,
default: ''
},
/**
* Sets the chart's height in pixels. Set to `"auto"` to use the height of the container.
*/
height: {
type: [Number, String],
required: false,
default: 50
},
/**
* If enabled will show the value of the latest "y" data-point on the side right of the chart.
*/
showLastYValue: {
type: Boolean,
required: false,
default: true
},
/**
* Sets a colour gradient for the sparkline
*/
gradient: {
type: Array,
required: false,
default: () => []
},
/**
* The smoothness of the line, valued from 0 to 1. A smaller value makes it less smooth.
*/
smooth: {
type: Number,
required: false,
default: 0,
validator: x => x >= 0 && x <= 1
},
/**
* Whether to connect the line across null points.
*/
connectNulls: {
type: Boolean,
required: false,
default: false
}
},
data() {
return {
chartInstance: null,
tooltip: {
show: false,
title: '',
content: '',
position: {
left: '0',
top: '0'
}
}
};
},
computed: {
options() {
const sparkLineChartOptions = {
grid: {
top: gridPadding,
bottom: gridPadding,
left: gridPadding,
right: gridPadding
},
xAxis: {
type: 'category',
show: false,
axisLabel: {
show: true
},
axisPointer: {
show: true,
type: 'none',
label: {
formatter: this.generateTooltip
}
}
},
yAxis: {
type: 'value',
show: false,
min: 'datamin'
}
};
const mergedOptions = merge({}, defaultChartOptions, sparkLineChartOptions);
return mergeSeriesToOptions(mergedOptions, this.series);
},
willShowLastYValue() {
return this.showLastYValue && this.data.length;
},
series() {
const data = this.data,
smooth = this.smooth,
itemStyle = this.itemStyle,
willShowLastYValue = this.willShowLastYValue,
connectNulls = this.connectNulls;
const markPoint = willShowLastYValue ? {
symbol: 'circle',
cursor: 'auto',
animation: false,
symbolSize,
data: [{
xAxis: data.length - 1,
yAxis: data[data.length - 1][1]
}]
} : undefined;
return {
type: 'line',
symbol: 'circle',
animation: true,
cursor: 'auto',
symbolSize,
markPoint,
data,
smooth,
itemStyle,
lineStyle: {
cap: 'round'
},
connectNulls
};
},
itemStyle() {
if (this.applyGradient) {
return {
color: generateGradient(this.gradient)
};
}
if (this.gradient.length) {
// If the gradient cannot be used, then apply
// the first colour to the entire line.
return {
color: this.gradient[0]
};
}
return {};
},
applyGradient() {
if (this.gradient.length && this.data.length) {
// Applying a gradient a constant line will cause it to not render,
// so skip the gradient if all values are equal.
const _this$data$ = _slicedToArray(this.data[0], 2),
firstValue = _this$data$[1];
return this.data.some(_ref => {
let _ref2 = _slicedToArray(_ref, 2),
value = _ref2[1];
return firstValue !== value;
});
}
return false;
},
lastYValue() {
if (!this.willShowLastYValue) return undefined;
const latestEntry = this.data.slice(-1)[0];
return latestEntry[1];
},
autoHeight() {
return this.height === 'auto';
}
},
methods: {
onChartCreated(chartInstance) {
this.chartInstance = chartInstance;
this.tooltip.show = false;
/**
* Emitted when the chart is created.
* The payload contains the echarts instance.
* @event chartCreated
* @type {object}
*/
this.$emit('chartCreated', chartInstance);
},
handleResize() {
this.chartInstance.resize();
},
isNilOrBlank(text) {
return isNil(text) || typeof text === 'string' && text.trim() === '';
},
setTooltipPosition(data) {
const _this$chartInstance$c = this.chartInstance.convertToPixel('grid', data),
_this$chartInstance$c2 = _slicedToArray(_this$chartInstance$c, 2),
left = _this$chartInstance$c2[0],
top = _this$chartInstance$c2[1];
this.tooltip.position = {
left: `${left}px`,
top: `${top}px`
};
},
// This function is called any time the axis pointer is changed (the black bubble showing which
// point on the line is selected). Note that it will not trigger if the axis pointer is removed,
// only when it changes from one point to another or is shown for the first time.
generateTooltip(_ref3) {
let _ref3$seriesData = _ref3.seriesData,
seriesData = _ref3$seriesData === void 0 ? [] : _ref3$seriesData;
this.tooltip.show = false;
// seriesData is an array of nearby data point coordinates
// seriesData[0] is the nearest point at which the tooltip is displayed
// https://echarts.apache.org/en/option.html#xAxis.axisPointer.label.formatter
const _seriesData = _slicedToArray(seriesData, 1),
_seriesData$ = _seriesData[0],
firstEntry = _seriesData$ === void 0 ? {} : _seriesData$;
const data = firstEntry.data;
if (!data) return;
const _data = _slicedToArray(data, 2),
title = _data[0],
content = _data[1];
if (this.isNilOrBlank(title) || this.isNilOrBlank(content)) return;
this.tooltip.title = title;
this.tooltip.content = content;
this.setTooltipPosition(data);
this.tooltip.show = null;
}
},
HEIGHT_AUTO_HORIZONTAL_LAYOUT_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',{directives:[{name:"resize-observer",rawName:"v-resize-observer",value:(_vm.handleResize),expression:"handleResize"}],staticClass:"gl-flex gl-items-center",class:{ 'gl-h-full': _vm.autoHeight }},[_vm._t("default"),_vm._v(" "),_c('div',{staticClass:"gl-relative gl-grow",class:( _obj = {}, _obj[_vm.$options.HEIGHT_AUTO_HORIZONTAL_LAYOUT_CLASSES] = _vm.autoHeight, _obj ),attrs:{"data-testid":"chart-container"}},[_c('chart',_vm._g(_vm._b({class:{ 'gl-grow': _vm.autoHeight },attrs:{"height":_vm.height,"options":_vm.options},on:{"created":_vm.onChartCreated}},'chart',_vm.$attrs,false),_vm.$listeners)),_vm._v(" "),(_vm.chartInstance)?_c('chart-tooltip',{attrs:{"show":_vm.tooltip.show,"chart":_vm.chartInstance,"top":_vm.tooltip.position.top,"left":_vm.tooltip.position.left,"placement":"top"},scopedSlots:_vm._u([{key:"title",fn:function(){return [_c('div',{staticClass:"gl-whitespace-nowrap",attrs:{"data-testid":"tooltip-title"}},[_vm._v("\n "+_vm._s(_vm.tooltip.title)+"\n ")])]},proxy:true},{key:"default",fn:function(){return [_c('div',{staticClass:"gl-flex",attrs:{"data-testid":"tooltip-content"}},[(_vm.tooltipLabel)?_c('span',{staticClass:"gl-mr-auto gl-pr-6"},[_vm._v(_vm._s(_vm.tooltipLabel))]):_vm._e(),_vm._v(" "),_c('strong',[_vm._v(_vm._s(_vm.tooltip.content))])])]},proxy:true}],null,false,4012348801)}):_vm._e()],1),_vm._v(" "),(_vm.showLastYValue)?_c('span',{staticClass:"gl-ml-5 gl-inline-flex gl-justify-center",attrs:{"data-testid":"last-y-value"}},[_vm._v("\n "+_vm._s(_vm.lastYValue)+"\n ")]):_vm._e()],2)};
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 };