fix: redraw on window focus (#2495)

spec/c3-helper.js

@@ -3,8 +3,6 @@ import c3 from '../src';
 window.c3 = c3;
 
 window.initDom = function () {
-    'use strict';
-
     var div = document.createElement('div');
     div.id = 'chart';
     div.style.width = '640px';
@@ -14,8 +12,6 @@ window.initDom = function () {
 };
 
 window.setMouseEvent = function(chart, name, x, y, element) {
-    'use strict';
-
     var paddingLeft = chart.internal.main.node().transform.baseVal.getItem(0).matrix.e,
         event = document.createEvent("MouseEvents");
     event.initMouseEvent(name, true, true, window,
@@ -25,8 +21,6 @@ window.setMouseEvent = function(chart, name, x, y, element) {
 };
 
 window.initChart = function (chart, args, done) {
-    'use strict';
-
     if (typeof chart === 'undefined') {
         window.initDom();
     }

spec/core-spec.js

@@ -27,6 +27,20 @@ describe('c3 chart', function () {
             expect(svg).not.toBeNull();
         });
 
+        it('should bind to window focus event', done => {
+            const addEventListener = window.addEventListener;
+            window.addEventListener = (event, handler) => {
+                if (event === 'focus') {
+                    setTimeout(() => {
+                      expect(handler).toBe(chart.internal.windowFocusHandler);
+                      window.addEventListener = addEventListener; // restore the original
+                      done();
+                    }, 10);
+                }
+            };
+            chart = window.initChart(chart, args, () => {});
+        });
+
         describe('should set 3rd party property to Function', function () {
             beforeAll(function () {
                 Function.prototype.$extIsFunction = true;
@@ -194,5 +208,5 @@ describe('c3 chart', function () {
             });
         });
     });
-
 });
+

src/api.chart.js

@@ -33,9 +33,12 @@ Chart.prototype.destroy = function () {
         }
     }
 
-    // remove the inner resize functions
+    // Removes the inner resize functions
     $$.resizeFunction.remove();
 
+    // Unbinds from the window focus event
+    $$.unbindWindowFocus();
+
     $$.selectChart.classed('c3', false).html("");
 
     // MEMO: this is needed because the reference of some elements will not be released, then memory leak will happen.

src/core.js

@@ -336,9 +336,12 @@ ChartInternal.prototype.initWithData = function(data) {
         });
     }
 
-    // Bind resize event
+    // Bind to resize event
     $$.bindResize();
 
+    // Bind to window focus event
+    $$.bindWindowFocus();
+
     // export element of the chart
     $$.api.element = $$.selectChart.node();
 };
@@ -979,6 +982,9 @@ ChartInternal.prototype.observeInserted = function(selection) {
     });
 };
 
+/**
+ * Binds handlers to the window resize event.
+ */
 ChartInternal.prototype.bindResize = function() {
     var $$ = this,
         config = $$.config;
@@ -1049,6 +1055,28 @@ ChartInternal.prototype.bindResize = function() {
     }
 };
 
+/**
+ * Binds handlers to the window focus event.
+ */
+ChartInternal.prototype.bindWindowFocus = function() {
+    if (this.windowFocusHandler) {
+        // The handler is already set
+        return;
+    }
+
+    this.windowFocusHandler = () => { this.redraw(); };
+
+    window.addEventListener('focus', this.windowFocusHandler);
+};
+
+/**
+ * Unbinds from the window focus event.
+ */
+ChartInternal.prototype.unbindWindowFocus = function () {
+    window.removeEventListener('focus', this.windowFocusHandler);
+    delete this.windowFocusHandler;
+};
+
 ChartInternal.prototype.generateResize = function() {
     var resizeFunctions = [];