Commit dbd245c8 authored by Clement Ho's avatar Clement Ho

Merge branch '57085-introduce-zoom-and-scroll-functionality-on-metrics-charts' into 'master'

Resolve "Introduce zoom and scroll functionality on metrics charts"

Closes #57085

See merge request gitlab-org/gitlab-ce!25388
parents d40b55c2 64abbb78
......@@ -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