fixed bug when hidden parent becomes visible - fixes #239; fixes apex…

…charts/vue-apexcharts#25
apexcharts · Dec 24, 2018 · e96e060 · e96e060
1 parent 5a392df
commit e96e060
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 7 deletions.
diff --git a/src/apexcharts.js b/src/apexcharts.js
@@ -180,15 +180,23 @@ class ApexCharts {
     let gl = this.w.globals
 
     gl.noData = false
+    gl.animationEnded = false
 
     this.responsive.checkResponsiveConfig(opts)
 
     if (this.el === null) {
+      gl.animationEnded = true
       return null
     }
 
     this.core.setupElements()
 
+    if (gl.svgWidth === 0) {
+      // if the element is hidden, skip drawing
+      gl.animationEnded = true
+      return null
+    }
+
     this.coreUtils.checkComboSeries()
 
     if (ser.length === 0 || (ser.length === 1 && ser[0].data && ser[0].data.length === 0)) {
@@ -919,7 +927,7 @@ class ApexCharts {
   }
 
   parentResizeCallback () {
-    if (this.w.config.chart.updateOnElementResize) {
+    if (this.w.globals.animationEnded) {
       this.windowResize()
     }
   }

diff --git a/src/modules/Animations.js b/src/modules/Animations.js
@@ -193,12 +193,13 @@ class Animations {
     el.plot(pathFrom).animate(1, w.globals.easing, delay).plot(pathFrom).animate(speed, w.globals.easing, delay).plot(pathTo).afterAll(() => {
       // a flag to indicate that the original mount function can return true now as animation finished here
 
-      if (typeof w.config.chart.events.animationEnd === 'function') {
-        if (Utils.isNumber(j)) {
-          if (j === w.globals.series[w.globals.maxValsInArrayIndex].length - 2 && w.globals.shouldAnimate) {
-            w.config.chart.events.animationEnd(this.ctx, w)
-          }
-        } else if (w.globals.shouldAnimate) {
+      if (Utils.isNumber(j)) {
+        if (j === w.globals.series[w.globals.maxValsInArrayIndex].length - 2 && w.globals.shouldAnimate) {
+          w.globals.animationEnded = true
+        }
+      } else if (w.globals.shouldAnimate) {
+        w.globals.animationEnded = true
+        if (typeof w.config.chart.events.animationEnd === 'function') {
           w.config.chart.events.animationEnd(this.ctx, w)
         }
       }

diff --git a/src/modules/Core.js b/src/modules/Core.js
@@ -255,6 +255,7 @@ class Core {
         if (elDim[0].width === 0) {
           elDim = Utils.getDimensions(this.el.parentNode)
         }
+
         gl.svgWidth =
           (elDim[0] * parseInt(cnf.chart.width) / 100)
       }

diff --git a/src/modules/settings/Globals.js b/src/modules/settings/Globals.js
@@ -32,6 +32,7 @@ export default class Globals {
         size: config.markers.size,
         largestSize: 0
       },
+      animationEnded: false,
       isTouchDevice: 'ontouchstart' in window || navigator.msMaxTouchPoints,
       isDirty: false, // chart has been updated after the initial render. This is different than dataChanged property. isDirty means user manually called some method to update
       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