zoom autoselected by default fixes #18

apexcharts · Aug 12, 2018 · eae1b12 · eae1b12
1 parent 1366d10
commit eae1b12
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 3 deletions.
diff --git a/dist/apexcharts.min.js b/dist/apexcharts.min.js
diff --git a/samples/line/zoomable-timeseries.html b/samples/line/zoomable-timeseries.html
@@ -46,6 +46,9 @@
         zoom: {
           enabled: true
         },
+        toolbar: {
+          autoSelected: 'zoom'
+        }
       },
       plotOptions: {
         line: {

diff --git a/src/apexcharts.js b/src/apexcharts.js
@@ -405,6 +405,8 @@ class ApexCharts {
       w.config = Utils.extend(w.config, options)
     }
 
+    w.globals.isDirty = true
+
     return this.update()
   }
 
@@ -428,6 +430,8 @@ class ApexCharts {
 
     me.w.config.series = newSeries.slice()
 
+    me.w.globals.isDirty = true
+
     return this.update()
   }
 
@@ -456,6 +460,8 @@ class ApexCharts {
     }
     me.w.config.series = newSeries
 
+    me.w.globals.isDirty = true
+
     return this.update()
   }
 

diff --git a/src/modules/Toolbar.js b/src/modules/Toolbar.js
@@ -108,6 +108,12 @@ class Toolbar {
       this.elToolbarWrap.appendChild(toolbarControls[i].el)
     }
 
+    if (!w.globals.isDirty) {
+      w.globals.zoomEnabled = w.config.chart.toolbar.autoSelected === 'zoom'
+      w.globals.panEnabled = w.config.chart.toolbar.autoSelected === 'pan'
+      w.globals.selectionEnabled = w.config.chart.toolbar.autoSelected === 'selection'
+    }
+
     if (w.globals.zoomEnabled) {
       this.elZoom.classList.add('selected')
     } else if (w.globals.panEnabled) {

diff --git a/src/modules/settings/Globals.js b/src/modules/settings/Globals.js
@@ -30,6 +30,7 @@ export default class Globals {
       markers: {
         colors: []
       },
+      isDirty: false, // chart has been updated after the initial render
       initialConfig: null, // we will store the first config user has set to go back when user finishes interactions like zooming and come out of it
       series: [], // the MAIN series array (y values)
       seriesPercent: [], // the percentage values of the given series
@@ -50,6 +51,7 @@ export default class Globals {
       maxValsInArrayIndex: 0,
       zoomEnabled: false,
       panEnabled: false,
+      selectionEnabled: false,
       yaxis: null,
       minY: Number.MIN_VALUE, //  is 5e-324, i.e. the smallest positive number
       // NOTE: If there are multiple y axis, the first yaxis array element will be considered for all y values calculations. Rest all will be calculated based on that

diff --git a/src/modules/settings/Options.js b/src/modules/settings/Options.js
@@ -265,7 +265,8 @@ export default class Options {
             zoomout: true,
             pan: true,
             reset: true
-          }
+          },
+          autoSelected: 'zoom' // accepts -> zoom, pan, selection
         },
         type: 'line',
         width: '100%',