@gitlab/ui
Version:
GitLab UI Components
280 lines (252 loc) • 9 kB
JavaScript
import merge from 'lodash/merge';
import Chart from '../chart/chart';
import ChartTooltip from '../tooltip/tooltip';
import defaultChartOptions, { mergeSeriesToOptions, symbolSize } from '../../../utils/charts/config';
import resizeObserver from '../../../directives/resize_observer/resize_observer';
import { sparkline } from '../../../utils/charts/theme';
import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
function _slicedToArray(arr, i) {
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
}
function _arrayWithHoles(arr) {
if (Array.isArray(arr)) return arr;
}
function _iterableToArrayLimit(arr, i) {
if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
var _arr = [];
var _n = true;
var _d = false;
var _e = undefined;
try {
for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
_arr.push(_s.value);
if (i && _arr.length === i) break;
}
} catch (err) {
_d = true;
_e = err;
} finally {
try {
if (!_n && _i["return"] != null) _i["return"]();
} finally {
if (_d) throw _e;
}
}
return _arr;
}
function _unsupportedIterableToArray(o, minLen) {
if (!o) return;
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
var n = Object.prototype.toString.call(o).slice(8, -1);
if (n === "Object" && o.constructor) n = o.constructor.name;
if (n === "Map" || n === "Set") return Array.from(o);
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}
function _arrayLikeToArray(arr, len) {
if (len == null || len > arr.length) len = arr.length;
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
return arr2;
}
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.");
}
var variants = sparkline.variants,
defaultVariant = sparkline.defaultVariant; // the padding is needed so the mark points don't overflow when visible
var gridPadding = symbolSize / 2;
var script = {
components: {
Chart: Chart,
ChartTooltip: ChartTooltip
},
directives: {
resizeObserver: resizeObserver
},
props: {
data: {
type: Array,
required: true
},
tooltipLabel: {
type: String,
required: false,
default: ''
},
height: {
type: Number,
required: false,
default: 50
},
variant: {
type: String,
required: false,
default: defaultVariant,
validator: function validator(value) {
return Object.keys(variants).includes(value);
}
},
showLastYValue: {
type: Boolean,
required: false,
default: true
}
},
data: function data() {
return {
chartInstance: null,
tooltip: {
show: false,
title: '',
content: '',
position: {
left: '0',
top: '0'
}
}
};
},
computed: {
options: function options() {
var 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.xAxisLabelFormatter
}
}
},
yAxis: {
type: 'value',
show: false,
min: 'datamin'
}
};
var mergedOptions = merge({}, defaultChartOptions, sparkLineChartOptions);
return mergeSeriesToOptions(mergedOptions, this.series);
},
series: function series() {
var data = this.data;
return {
type: 'line',
symbol: 'circle',
hoverAnimation: false,
animation: true,
cursor: 'auto',
lineStyle: {
color: this.variantColor
},
itemStyle: {
color: this.variantColor
},
symbolSize: symbolSize,
markPoint: {
symbol: 'circle',
cursor: 'auto',
animation: false,
symbolSize: symbolSize,
data: [{
xAxis: data.length - 1,
yAxis: data[data.length - 1][1]
}]
},
data: data
};
},
lastYValue: function lastYValue() {
var latestEntry = this.data.slice(-1)[0];
return latestEntry[1];
},
variantColor: function variantColor() {
return variants[this.variant];
}
},
methods: {
onChartCreated: function onChartCreated(chartInstance) {
this.chartInstance = chartInstance;
this.$emit('chartCreated', chartInstance);
},
handleResize: function handleResize() {
this.chartInstance.resize();
},
hideTooltip: function hideTooltip() {
this.tooltip.show = false;
},
formatTooltipText: function formatTooltipText(_ref) {
var _ref2 = _slicedToArray(_ref, 2),
xValue = _ref2[0],
yValue = _ref2[1];
this.tooltip.title = xValue;
this.tooltip.content = yValue;
},
setTooltipPosition: function setTooltipPosition(data) {
var _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: "".concat(left, "px"),
top: "".concat(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.
xAxisLabelFormatter: function xAxisLabelFormatter(_ref3) {
var _ref3$seriesData = _ref3.seriesData,
seriesData = _ref3$seriesData === void 0 ? [] : _ref3$seriesData;
// 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
var _seriesData = _slicedToArray(seriesData, 1),
_seriesData$ = _seriesData[0],
firstEntry = _seriesData$ === void 0 ? {} : _seriesData$;
var data = firstEntry.data;
if (data) {
this.tooltip.show = true;
this.formatTooltipText(data);
this.setTooltipPosition(data);
}
}
}
};
/* script */
const __vue_script__ = script;
/* template */
var __vue_render__ = function () {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:"d-flex align-items-center",on:{"mouseleave":_vm.hideTooltip}},[_vm._t("default"),_vm._v(" "),_c('div',{staticClass:"flex-grow-1 position-relative"},[_c('chart',{attrs:{"height":_vm.height,"options":_vm.options},on:{"created":_vm.onChartCreated}}),_vm._v(" "),(_vm.chartInstance)?_c('chart-tooltip',{style:({ pointerEvents: 'none' }),attrs:{"show":_vm.tooltip.show,"chart":_vm.chartInstance,"top":_vm.tooltip.position.top,"left":_vm.tooltip.position.left,"placement":"top"}},[[_c('div',{staticClass:"js-tooltip-title text-nowrap",attrs:{"slot":"title"},slot:"title"},[_vm._v(_vm._s(_vm.tooltip.title))]),_vm._v(" "),_c('div',{staticClass:"js-tooltip-content d-flex",attrs:{"slot":"default"},slot:"default"},[(_vm.tooltipLabel)?_c('span',{staticClass:"pr-4 mr-auto"},[_vm._v(_vm._s(_vm.tooltipLabel))]):_vm._e(),_vm._v(" "),_c('strong',[_vm._v(_vm._s(_vm.tooltip.content))])])]],2):_vm._e()],1),_vm._v(" "),(_vm.showLastYValue)?_c('span',{staticClass:"js-last-y-value d-inline-flex justify-content-center ml-3"},[_vm._v(_vm._s(_vm.lastYValue))]):_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__ = __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 default __vue_component__;