@gitlab/ui
Version:
GitLab UI Components
252 lines (240 loc) • 7.83 kB
JavaScript
import { merge } from 'lodash-es';
import { defaultChartOptions, dataZoomAdjustments, mergeSeriesToOptions } from '../../../utils/charts/config';
import { colorFromDefaultPalette } from '../../../utils/charts/theme';
import { HEIGHT_AUTO_CLASSES } from '../../../utils/charts/constants';
import TooltipDefaultFormat from '../shared/tooltip/tooltip_default_format/tooltip_default_format';
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;
}
}
var script = {
name: 'GlDiscreteScatterChart',
components: {
Chart,
ChartTooltip,
TooltipDefaultFormat
},
inheritAttrs: false,
props: {
data: {
type: Array,
required: true
},
option: {
type: Object,
required: false,
default: () => ({})
},
yAxisTitle: {
type: String,
required: true
},
xAxisTitle: {
type: String,
required: true
},
symbolSize: {
type: Number,
required: false,
default: 8
},
formatTooltipText: {
type: Function,
required: false,
default: null
},
disableTooltip: {
type: Boolean,
required: false,
default: false
},
/**
* 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,
tooltipTitle: '',
tooltipContent: {},
tooltipPosition: {
left: '0',
top: '0'
},
selectedFormatTooltipText: this.formatTooltipText || this.defaultFormatTooltipText
};
},
computed: {
series() {
return this.data.map((series, index) => {
const defaultColor = colorFromDefaultPalette(index);
const getColor = type => series[type] && series[type].color ? series[type].color : defaultColor;
return merge({
symbolSize: this.symbolSize,
lineStyle: {
color: getColor('lineStyle')
},
itemStyle: {
color: getColor('itemStyle')
}
}, series);
});
},
options() {
const mergedOptions = merge({}, defaultChartOptions, {
tooltip: this.disableTooltip ? undefined : {
formatter: this.onLabelChange
},
xAxis: {
type: 'category',
name: this.xAxisTitle,
axisTick: {
alignWithLabel: true,
show: true,
lineStyle: {
color: 'var(--gl-chart-axis-line-color)'
}
},
axisLabel: {
margin: 20,
verticalAlign: 'bottom'
}
},
yAxis: {
type: 'value',
name: this.yAxisTitle
}
}, this.option, dataZoomAdjustments(this.option.dataZoom));
// All chart options can be merged but series
// needs to be handled specially
return mergeSeriesToOptions(mergedOptions, this.series);
},
autoHeight() {
return this.height === 'auto';
}
},
methods: {
defaultFormatTooltipText(params) {
const data = this.getChartData(params);
const _data = _slicedToArray(data, 2),
title = _data[0],
content = _data[1];
this.tooltipTitle = title;
const seriesName = this.yAxisTitle;
const tooltipContent = {
[seriesName]: {
value: content,
color: ''
}
};
this.$set(this, 'tooltipContent', tooltipContent);
},
onCreated(chart) {
this.chart = chart;
this.$emit('created', chart);
},
onLabelChange(params) {
this.selectedFormatTooltipText(params);
const data = this.getChartData(params);
if (data.length) {
const _this$chart$convertTo = this.chart.convertToPixel('grid', data),
_this$chart$convertTo2 = _slicedToArray(_this$chart$convertTo, 2),
left = _this$chart$convertTo2[0],
top = _this$chart$convertTo2[1];
this.tooltipPosition = {
left: `${left}px`,
top: `${top}px`
};
}
},
getChartData(_ref) {
let data = _ref.data;
const chartData = (data === null || data === void 0 ? void 0 : data.value) || data;
return Array.isArray(chartData) ? chartData : [];
}
},
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}},'chart',_vm.$attrs,false),_vm.$listeners)),_vm._v(" "),(!_vm.disableTooltip && _vm.chart)?_c('chart-tooltip',{attrs:{"chart":_vm.chart,"top":_vm.tooltipPosition.top,"left":_vm.tooltipPosition.left},scopedSlots:_vm._u([{key:"title",fn:function(){return [_vm._t("tooltip-title",function(){return [_vm._v(_vm._s(_vm.tooltipTitle)+" ("+_vm._s(_vm.xAxisTitle)+")")]})]},proxy:true}],null,true)},[_vm._v(" "),_vm._t("tooltip-content",function(){return [_c('tooltip-default-format',{attrs:{"tooltip-content":_vm.tooltipContent}})]})],2):_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 };