@gitlab/ui
Version:
GitLab UI Components
249 lines (221 loc) • 10.5 kB
JavaScript
import echarts from 'echarts';
import GlChartSeriesLabel from '../series_label/series_label';
import { engineeringNotation, average } from '../../../utils/number_utils';
import { defaultFontSize } from '../../../utils/charts/config';
import { LEGEND_AVERAGE_TEXT, LEGEND_CURRENT_TEXT, LEGEND_MIN_TEXT, LEGEND_MAX_TEXT, LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE } from '../../../utils/charts/constants';
import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
function _defineProperty(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
function ownKeys(object, enumerableOnly) {
var keys = Object.keys(object);
if (Object.getOwnPropertySymbols) {
var symbols = Object.getOwnPropertySymbols(object);
if (enumerableOnly) symbols = symbols.filter(function (sym) {
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
});
keys.push.apply(keys, symbols);
}
return keys;
}
function _objectSpread2(target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i] != null ? arguments[i] : {};
if (i % 2) {
ownKeys(Object(source), true).forEach(function (key) {
_defineProperty(target, key, source[key]);
});
} else if (Object.getOwnPropertyDescriptors) {
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
} else {
ownKeys(Object(source)).forEach(function (key) {
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
});
}
}
return target;
}
function _toConsumableArray(arr) {
return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
}
function _arrayWithoutHoles(arr) {
if (Array.isArray(arr)) return _arrayLikeToArray(arr);
}
function _iterableToArray(iter) {
if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
}
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 _nonIterableSpread() {
throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
var gray200 = '#bfbfbf';
var script = {
components: {
GlChartSeriesLabel: GlChartSeriesLabel
},
props: {
chart: {
type: Object,
required: true,
validator: function validator(chart) {
return Object.is(chart, echarts.getInstanceByDom(chart.getDom()));
}
},
seriesInfo: {
type: Array,
required: true,
validator: function validator(seriesInfo) {
return seriesInfo.every(function (series) {
return series.type && series.name && series.color;
});
}
},
textStyle: {
type: Object,
required: false,
default: function _default() {
return {};
}
},
averageText: {
type: String,
required: false,
default: LEGEND_AVERAGE_TEXT
},
currentText: {
type: String,
required: false,
default: LEGEND_CURRENT_TEXT
},
minText: {
type: String,
required: false,
default: LEGEND_MIN_TEXT
},
maxText: {
type: String,
required: false,
default: LEGEND_MAX_TEXT
},
layout: {
type: String,
required: false,
default: LEGEND_LAYOUT_INLINE,
validator: function validator(layout) {
return [LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE].indexOf(layout) !== -1;
}
}
},
data: function data() {
return {
disabledSeries: {}
};
},
computed: {
fontStyle: function fontStyle() {
return {
fontFamily: this.textStyle.fontFamily || 'sans-serif',
fontSize: "".concat(this.textStyle.fontSize || defaultFontSize, "px")
};
}
},
methods: {
sanitizeSeriesData: function sanitizeSeriesData(seriesData) {
return seriesData.filter(function (d) {
return !Number.isNaN(d);
});
},
seriesAverage: function seriesAverage(seriesData) {
var sanitized = this.sanitizeSeriesData(seriesData);
return engineeringNotation(average.apply(void 0, _toConsumableArray(sanitized)));
},
seriesMax: function seriesMax(seriesData) {
var sanitized = this.sanitizeSeriesData(seriesData);
return engineeringNotation(Math.max.apply(Math, _toConsumableArray(sanitized)));
},
seriesMin: function seriesMin(seriesData) {
var sanitized = this.sanitizeSeriesData(seriesData);
return engineeringNotation(Math.min.apply(Math, _toConsumableArray(sanitized)));
},
seriesLast: function seriesLast(seriesData) {
var sanitized = this.sanitizeSeriesData(seriesData);
return engineeringNotation(sanitized[sanitized.length - 1]);
},
seriesNameIsLong: function seriesNameIsLong(seriesName) {
return seriesName.length > 120;
},
handleClick: function handleClick(name, key) {
this.chart.dispatchAction({
type: 'legendToggleSelect',
name: name
});
this.disabledSeries = _objectSpread2(_objectSpread2({}, this.disabledSeries), {}, _defineProperty({}, key, !this.disabledSeries[key]));
},
handleMouseEnter: function handleMouseEnter(name) {
this.chart.dispatchAction({
type: 'highlight',
seriesName: name
});
},
handleMouseLeave: function handleMouseLeave(name) {
this.chart.dispatchAction({
type: 'downplay',
seriesName: name
});
},
getColor: function getColor(color, key) {
return this.disabledSeries[key] ? gray200 : color;
}
}
};
/* 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',[(_vm.layout === 'inline')?[_c('div',{staticClass:"gl-legend-inline"},_vm._l((_vm.seriesInfo),function(series,key){return _c('div',{key:key,staticClass:"gl-legend-inline-series",class:{ 'text-muted': _vm.disabledSeries[key], 'w-100': _vm.seriesNameIsLong(series.name) },style:(_vm.fontStyle),attrs:{"role":"button"},on:{"click":function($event){return _vm.handleClick(series.name, key)},"mouseenter":function($event){return _vm.handleMouseEnter(series.name)},"mouseleave":function($event){return _vm.handleMouseLeave(series.name)}}},[_c('gl-chart-series-label',{staticClass:"gl-legend-inline-series-label",class:{ 'w-75': _vm.seriesNameIsLong(series.name) },attrs:{"color":_vm.getColor(series.color, key),"type":series.type}},[_c('strong',[_vm._v(_vm._s(series.name))])]),_vm._v(" "),(series.data && series.data.length)?_c('span',{class:{ 'w-100 gl-white-space-nowrap': _vm.seriesNameIsLong(series.name) }},[_vm._v("\n "+_vm._s(_vm.averageText)+": "+_vm._s(_vm.seriesAverage(series.data))+" · "+_vm._s(_vm.maxText)+":\n "+_vm._s(_vm.seriesMax(series.data))+"\n ")]):_vm._e()],1)}),0)]:_vm._e(),_vm._v(" "),(_vm.layout === 'table')?[_c('div',{staticClass:"gl-legend-tabular",style:(_vm.fontStyle)},[_c('header',{staticClass:"gl-legend-tabular-header"},[_c('div',{staticClass:"gl-legend-tabular-header-cell"},[_vm._v(_vm._s(_vm.minText))]),_vm._v(" "),_c('div',{staticClass:"gl-legend-tabular-header-cell"},[_vm._v(_vm._s(_vm.maxText))]),_vm._v(" "),_c('div',{staticClass:"gl-legend-tabular-header-cell"},[_vm._v(_vm._s(_vm.averageText))]),_vm._v(" "),_c('div',{staticClass:"gl-legend-tabular-header-cell"},[_vm._v(_vm._s(_vm.currentText))])]),_vm._v(" "),_c('section',{staticClass:"gl-legend-tabular-body"},_vm._l((_vm.seriesInfo),function(series,key){return _c('div',{key:key,staticClass:"gl-legend-tabular-row",class:{ 'text-muted': _vm.disabledSeries[key] },style:(_vm.fontStyle),attrs:{"role":"button"},on:{"click":function($event){return _vm.handleClick(series.name, key)},"mouseenter":function($event){return _vm.handleMouseEnter(series.name)},"mouseleave":function($event){return _vm.handleMouseLeave(series.name)}}},[_c('div',{staticClass:"gl-legend-tabular-title-cell"},[_c('gl-chart-series-label',{style:(_vm.fontStyle),attrs:{"color":_vm.getColor(series.color, key),"type":series.type}},[_c('strong',[_vm._v(_vm._s(series.name))])])],1),_vm._v(" "),(series.data && series.data.length)?[_c('div',{staticClass:"gl-legend-tabular-details-cell"},[_vm._v(_vm._s(_vm.seriesMin(series.data)))]),_vm._v(" "),_c('div',{staticClass:"gl-legend-tabular-details-cell"},[_vm._v(_vm._s(_vm.seriesMax(series.data)))]),_vm._v(" "),_c('div',{staticClass:"gl-legend-tabular-details-cell"},[_vm._v(_vm._s(_vm.seriesAverage(series.data)))]),_vm._v(" "),_c('div',{staticClass:"gl-legend-tabular-details-cell"},[_vm._v(_vm._s(_vm.seriesLast(series.data)))])]:[_c('div',{staticClass:"gl-legend-tabular-details-cell"},[_vm._v("-")]),_vm._v(" "),_c('div',{staticClass:"gl-legend-tabular-details-cell"},[_vm._v("-")]),_vm._v(" "),_c('div',{staticClass:"gl-legend-tabular-details-cell"},[_vm._v("-")]),_vm._v(" "),_c('div',{staticClass:"gl-legend-tabular-details-cell"},[_vm._v("-")])]],2)}),0)])]:_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__;