Add zoom to metrics dashboard
Adds the ability to change data zoom for metrics graphs
This commit is contained in:
parent
d40b55c296
commit
64abbb78cd
|
@ -57,7 +57,7 @@ export default {
|
|||
},
|
||||
width: 0,
|
||||
height: 0,
|
||||
scatterSymbol: undefined,
|
||||
svgs: {},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
@ -78,25 +78,25 @@ export default {
|
|||
axisPointer: {
|
||||
snap: true,
|
||||
},
|
||||
nameTextStyle: {
|
||||
padding: [18, 0, 0, 0],
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
name: this.yAxisLabel,
|
||||
axisLabel: {
|
||||
formatter: value => value.toFixed(3),
|
||||
},
|
||||
nameTextStyle: {
|
||||
padding: [0, 0, 36, 0],
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
formatter: this.xAxisLabel,
|
||||
},
|
||||
series: this.scatterSeries,
|
||||
dataZoom: this.dataZoomConfig,
|
||||
};
|
||||
},
|
||||
dataZoomConfig() {
|
||||
const handleIcon = this.svgs['scroll-handle'];
|
||||
|
||||
return handleIcon ? { handleIcon } : {};
|
||||
},
|
||||
earliestDatapoint() {
|
||||
return Object.values(this.chartData).reduce((acc, data) => {
|
||||
const [[timestamp]] = data.sort(([a], [b]) => {
|
||||
|
@ -131,7 +131,7 @@ export default {
|
|||
return {
|
||||
type: 'scatter',
|
||||
data: this.recentDeployments.map(deployment => [deployment.createdAt, 0]),
|
||||
symbol: this.scatterSymbol,
|
||||
symbol: this.svgs.rocket,
|
||||
symbolSize: 14,
|
||||
};
|
||||
},
|
||||
|
@ -151,7 +151,8 @@ export default {
|
|||
created() {
|
||||
debouncedResize = debounceByAnimationFrame(this.onResize);
|
||||
window.addEventListener('resize', debouncedResize);
|
||||
this.getScatterSymbol();
|
||||
this.setSvg('rocket');
|
||||
this.setSvg('scroll-handle');
|
||||
},
|
||||
methods: {
|
||||
formatTooltipText(params) {
|
||||
|
@ -167,11 +168,11 @@ export default {
|
|||
this.tooltip.content = `${this.yAxisLabel} ${seriesData.value[1].toFixed(3)}`;
|
||||
}
|
||||
},
|
||||
getScatterSymbol() {
|
||||
getSvgIconPathContent('rocket')
|
||||
setSvg(name) {
|
||||
getSvgIconPathContent(name)
|
||||
.then(path => {
|
||||
if (path) {
|
||||
this.scatterSymbol = `path://${path}`;
|
||||
this.$set(this.svgs, name, `path://${path}`);
|
||||
}
|
||||
})
|
||||
.catch(() => {});
|
||||
|
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
title: Add zoom and scroll to metrics dashboard
|
||||
merge_request: 25388
|
||||
author:
|
||||
type: added
|
|
@ -7,6 +7,7 @@ import MonitoringMock, { deploymentData } from '../mock_data';
|
|||
|
||||
describe('Area component', () => {
|
||||
const mockWidgets = 'mockWidgets';
|
||||
const mockSvgPathContent = 'mockSvgPathContent';
|
||||
let mockGraphData;
|
||||
let areaChart;
|
||||
let spriteSpy;
|
||||
|
@ -30,7 +31,7 @@ describe('Area component', () => {
|
|||
});
|
||||
|
||||
spriteSpy = spyOnDependency(Area, 'getSvgIconPathContent').and.callFake(
|
||||
() => new Promise(resolve => resolve()),
|
||||
() => new Promise(resolve => resolve(mockSvgPathContent)),
|
||||
);
|
||||
});
|
||||
|
||||
|
@ -146,13 +147,22 @@ describe('Area component', () => {
|
|||
});
|
||||
});
|
||||
|
||||
describe('getScatterSymbol', () => {
|
||||
describe('setSvg', () => {
|
||||
const mockSvgName = 'mockSvgName';
|
||||
|
||||
beforeEach(() => {
|
||||
areaChart.vm.getScatterSymbol();
|
||||
areaChart.vm.setSvg(mockSvgName);
|
||||
});
|
||||
|
||||
it('gets rocket svg path content for use as deployment data symbol', () => {
|
||||
expect(spriteSpy).toHaveBeenCalledWith('rocket');
|
||||
it('gets svg path content', () => {
|
||||
expect(spriteSpy).toHaveBeenCalledWith(mockSvgName);
|
||||
});
|
||||
|
||||
it('sets svg path content', done => {
|
||||
areaChart.vm.$nextTick(() => {
|
||||
expect(areaChart.vm.svgs[mockSvgName]).toBe(`path://${mockSvgPathContent}`);
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
|
Loading…
Reference in New Issue