From 3e5946335d430c50726a2bfddaf50e0fc43192e2 Mon Sep 17 00:00:00 2001
From: Laura Montemayor <lmontemayor@gitlab.com>
Date: Fri, 23 Aug 2019 10:12:18 +0000
Subject: [PATCH] fix charts scroll handle icon

---
 .../javascripts/monitoring/components/charts/area.vue     | 2 +-
 .../64385-charts-scroll-handle-icon-has-disappeared.yml   | 5 +++++
 spec/javascripts/monitoring/charts/area_spec.js           | 8 ++++++++
 3 files changed, 14 insertions(+), 1 deletion(-)
 create mode 100644 changelogs/unreleased/64385-charts-scroll-handle-icon-has-disappeared.yml

diff --git a/app/assets/javascripts/monitoring/components/charts/area.vue b/app/assets/javascripts/monitoring/components/charts/area.vue
index 78d97a3c122..cac10474d06 100644
--- a/app/assets/javascripts/monitoring/components/charts/area.vue
+++ b/app/assets/javascripts/monitoring/components/charts/area.vue
@@ -126,7 +126,7 @@ export default {
           },
         },
         series: this.scatterSeries,
-        dataZoom: this.dataZoomConfig,
+        dataZoom: [this.dataZoomConfig],
       };
     },
     dataZoomConfig() {
diff --git a/changelogs/unreleased/64385-charts-scroll-handle-icon-has-disappeared.yml b/changelogs/unreleased/64385-charts-scroll-handle-icon-has-disappeared.yml
new file mode 100644
index 00000000000..93ed2ff4619
--- /dev/null
+++ b/changelogs/unreleased/64385-charts-scroll-handle-icon-has-disappeared.yml
@@ -0,0 +1,5 @@
+---
+title: fix charts scroll handle icon to use gitlab svg
+merge_request: 31825
+author:
+type: fixed
diff --git a/spec/javascripts/monitoring/charts/area_spec.js b/spec/javascripts/monitoring/charts/area_spec.js
index 57f99a09002..1e49a955815 100644
--- a/spec/javascripts/monitoring/charts/area_spec.js
+++ b/spec/javascripts/monitoring/charts/area_spec.js
@@ -225,6 +225,14 @@ describe('Area component', () => {
     });
 
     describe('chartOptions', () => {
+      describe('dataZoom', () => {
+        it('contains an svg object within an array to properly render icon', () => {
+          const dataZoomObject = [{}];
+
+          expect(areaChart.vm.chartOptions.dataZoom).toEqual(dataZoomObject);
+        });
+      });
+
       describe('yAxis formatter', () => {
         let format;