@gitlab/ui
Version:
GitLab UI Components
264 lines (248 loc) • 7.09 kB
JavaScript
import merge from 'lodash/merge';
import Chart from '../chart/chart';
import ChartLegend from '../legend/legend';
import GlChartTooltip from '../tooltip/tooltip';
import ToolboxMixin from '../../mixins/toolbox_mixin';
import { heatmapHues } from '../../../utils/charts/theme';
import { engineeringNotation } from '../../../utils/number_utils';
import { throttle } from '../../../utils/utils';
import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
var whiteLight = '#fff';
var gray100 = '#f2f2f2';
var defaultOptions = {
visualMap: {
show: false,
inRange: {
color: heatmapHues
}
},
series: {
type: 'heatmap'
}
};
/*
* The series is an array of arrays containing [x, y, value]
* x and y are position, value determines the color
* We want the min and max from value field to make the range of colors
*/
function getRange(series) {
return series.reduce(function (acc, curr) {
var value = curr[2] || 0;
if (value < acc.min) acc.min = value;
if (value > acc.max) acc.max = value;
return acc;
}, {
min: 0,
max: 0
});
}
var script = {
components: {
Chart: Chart,
ChartLegend: ChartLegend,
GlChartTooltip: GlChartTooltip
},
mixins: [ToolboxMixin],
props: {
options: {
type: Object,
required: false,
default: function _default() {
return {};
}
},
dataSeries: {
type: Array,
required: true
},
xAxisLabels: {
type: Array,
required: false,
default: function _default() {
return [];
}
},
yAxisLabels: {
type: Array,
required: false,
default: function _default() {
return [];
}
},
xAxisName: {
type: String,
required: false,
default: ''
},
yAxisName: {
type: String,
required: false,
default: ''
},
legendAverageText: {
type: String,
required: false,
default: 'Avg'
},
legendMaxText: {
type: String,
required: false,
default: 'Max'
}
},
data: function data() {
return {
chart: null,
tooltip: {
content: '',
show: false,
left: '0',
top: '0'
}
};
},
computed: {
computedOptions: function computedOptions() {
var _getRange = getRange(this.dataSeries),
min = _getRange.min,
max = _getRange.max;
return merge({}, defaultOptions, {
series: {
data: this.dataSeries,
z: 2
},
tooltip: {
formatter: this.setTooltipContent,
showContent: true,
transitionDuration: 0
},
grid: {
height: '62.5%',
left: '68px',
show: true,
borderWidth: 0,
backgroundColor: gray100
},
visualMap: {
min: min,
max: max
},
xAxis: {
data: this.xAxisLabels,
z: 3,
axisTick: false,
name: this.xAxisName,
nameGap: 26,
nameLocation: 'middle',
nameTextStyle: {
verticalAlign: 'middle'
},
offset: 6,
splitLine: {
show: true,
interval: 0,
lineStyle: {
color: whiteLight,
width: 2
}
}
},
yAxis: {
data: this.yAxisLabels,
z: 3,
type: 'category',
axisTick: false,
axisLabel: {
margin: 8
},
name: this.yAxisName,
nameLocation: 'middle',
nameGap: 50,
nameRotate: 90,
splitLine: {
show: true,
interval: 0,
lineStyle: {
color: whiteLight,
width: 2
}
}
}
}, this.toolboxAdjustments, this.options);
},
compiledOptions: function compiledOptions() {
return this.chart ? this.chart.getOption() : null;
},
seriesInfo: function seriesInfo() {
var _getRange2 = getRange(this.dataSeries),
min = _getRange2.min,
max = _getRange2.max;
var step = (max - min) / heatmapHues.length;
return heatmapHues.map(function (color, index) {
var lowerBound = engineeringNotation(min + step * index);
var upperBound = engineeringNotation(min + step * (index + 1));
return {
name: "".concat(lowerBound, " - ").concat(upperBound),
color: color,
type: 'solid'
};
});
}
},
beforeDestroy: function beforeDestroy() {
this.chart.getDom().removeEventListener('mousemove', this.throttledMouseMove);
this.chart.getDom().removeEventListener('mouseout', this.hideTooltip);
},
methods: {
onCreated: function onCreated(chart) {
this.chart = chart;
this.throttledMouseMove = throttle(this.mouseMove);
this.chart.getDom().addEventListener('mousemove', this.throttledMouseMove);
this.chart.getDom().addEventListener('mouseout', this.hideTooltip);
},
mouseMove: function mouseMove(mouseEvent) {
var xOffset = 2;
var x = mouseEvent.zrX,
y = mouseEvent.zrY;
this.tooltip.left = "".concat(x + xOffset, "px");
this.tooltip.top = "".concat(y, "px");
this.tooltip.show = this.chart.containPixel('grid', [x, y]);
},
hideTooltip: function hideTooltip() {
this.tooltip.show = false;
},
setTooltipContent: function setTooltipContent(_ref) {
var data = _ref.data;
this.tooltip.content = "".concat(data[2]);
}
}
};
/* 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',[_c('chart',{staticClass:"gl-heatmap",attrs:{"options":_vm.computedOptions},on:{"created":_vm.onCreated}}),_vm._v(" "),(_vm.compiledOptions)?_c('chart-legend',{staticClass:"gl-heatmap-legend",attrs:{"chart":_vm.chart,"series-info":_vm.seriesInfo,"average-text":_vm.legendAverageText,"max-text":_vm.legendMaxText}}):_vm._e(),_vm._v(" "),(_vm.chart)?_c('gl-chart-tooltip',{attrs:{"chart":_vm.chart,"show":_vm.tooltip.show,"top":_vm.tooltip.top,"left":_vm.tooltip.left}},[_c('div',[_vm._v(_vm._s(_vm.tooltip.content))])]):_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__ = __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__;