diff options
author | Adriel Santiago <asantiago@gitlab.com> | 2019-03-06 15:28:42 +0300 |
---|---|---|
committer | Clement Ho <clemmakesapps@gmail.com> | 2019-03-06 15:28:42 +0300 |
commit | 64abbb78cd3ac467c7a87bd43dbadefc597603e7 (patch) | |
tree | 6e89dfebfb98891bb6d122dfeacea979bf4c7d9c | |
parent | d40b55c296707f3b1366f39274acceb499dd9511 (diff) |
Add zoom to metrics dashboard
Adds the ability to change data zoom for metrics graphs
3 files changed, 33 insertions, 17 deletions
diff --git a/app/assets/javascripts/monitoring/components/charts/area.vue b/app/assets/javascripts/monitoring/components/charts/area.vue index 9e031b03579..17e4f325b08 100644 --- a/app/assets/javascripts/monitoring/components/charts/area.vue +++ b/app/assets/javascripts/monitoring/components/charts/area.vue @@ -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(() => {}); diff --git a/changelogs/unreleased/57085-introduce-zoom-and-scroll-functionality-on-metrics-charts.yml b/changelogs/unreleased/57085-introduce-zoom-and-scroll-functionality-on-metrics-charts.yml new file mode 100644 index 00000000000..1d07666dfb1 --- /dev/null +++ b/changelogs/unreleased/57085-introduce-zoom-and-scroll-functionality-on-metrics-charts.yml @@ -0,0 +1,5 @@ +--- +title: Add zoom and scroll to metrics dashboard +merge_request: 25388 +author: +type: added diff --git a/spec/javascripts/monitoring/charts/area_spec.js b/spec/javascripts/monitoring/charts/area_spec.js index d334ef7ba4f..1b6fc456ceb 100644 --- a/spec/javascripts/monitoring/charts/area_spec.js +++ b/spec/javascripts/monitoring/charts/area_spec.js @@ -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(); + }); }); }); |