Commit 64abbb78 authored by Adriel Santiago's avatar Adriel Santiago Committed by Clement Ho

Add zoom to metrics dashboard

Adds the ability to change data zoom for metrics graphs
parent d40b55c2
......@@ -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(() => {});
......
---
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 svg path content', () => {
expect(spriteSpy).toHaveBeenCalledWith(mockSvgName);
});
it('gets rocket svg path content for use as deployment data symbol', () => {
expect(spriteSpy).toHaveBeenCalledWith('rocket');
it('sets svg path content', done => {
areaChart.vm.$nextTick(() => {
expect(areaChart.vm.svgs[mockSvgName]).toBe(`path://${mockSvgPathContent}`);
done();
});
});
});
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment