From 728d781843433fe036fcac77f037f724a42fa6a2 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Wed, 10 Jan 2018 09:39:53 -0800
Subject: [PATCH] Fix history jump (#792)

---
 src/components/state-history-chart-line.html  | 27 ++++++++++++++-----
 .../state-history-chart-timeline.html         | 27 ++++++++++++++-----
 2 files changed, 42 insertions(+), 12 deletions(-)

diff --git a/src/components/state-history-chart-line.html b/src/components/state-history-chart-line.html
index 0f5e12e7cd..3d0594eed6 100644
--- a/src/components/state-history-chart-line.html
+++ b/src/components/state-history-chart-line.html
@@ -1,5 +1,5 @@
 <link rel="import" href="../../bower_components/polymer/polymer.html">
-<link rel="import" href="../../bower_components/iron-resizable-behavior/iron-resizable-behavior.html">
+<link rel="import" href="../../bower_components/polymer/lib/utils/debounce.html">
 
 <script>
 {
@@ -19,8 +19,7 @@
     return !isNaN(parsed) && isFinite(parsed) ? parsed : null;
   }
 
-  class StateHistoryChartLine extends
-    Polymer.mixinBehaviors([Polymer.IronResizableBehavior], Polymer.Element) {
+  class StateHistoryChartLine extends Polymer.Element {
     static get is() { return 'state-history-chart-line'; }
     static get properties() {
       return {
@@ -55,9 +54,25 @@
       super.connectedCallback();
       this._isAttached = true;
       this.drawChart();
-      this.addEventListener('iron-resize', () => {
-        setTimeout(() => this.drawChart(), 10);
-      });
+
+      this._resizeListener = () => {
+        this._debouncer = Polymer.Debouncer.debounce(
+          this._debouncer,
+          Polymer.Async.timeOut.after(10),
+          () => {
+            if (this._isAttached) {
+              this.drawChart();
+            }
+          }
+        );
+      };
+      window.addEventListener('resize', this._resizeListener);
+    }
+
+    disconnectedCallback() {
+      super.disconnectedCallback();
+      this._isAttached = false;
+      window.removeEventListener('resize', this._resizeListener);
     }
 
     dataChanged() {
diff --git a/src/components/state-history-chart-timeline.html b/src/components/state-history-chart-timeline.html
index dcedf39ca2..15c5f3b9a2 100644
--- a/src/components/state-history-chart-timeline.html
+++ b/src/components/state-history-chart-timeline.html
@@ -1,9 +1,8 @@
 <link rel="import" href="../../bower_components/polymer/polymer-element.html">
-<link rel="import" href="../../bower_components/iron-resizable-behavior/iron-resizable-behavior.html">
+<link rel="import" href="../../bower_components/polymer/lib/utils/debounce.html">
 
 <script>
-class StateHistoryChartTimeline extends
-  Polymer.mixinBehaviors([Polymer.IronResizableBehavior], Polymer.Element) {
+class StateHistoryChartTimeline extends Polymer.Element {
   static get is() { return 'state-history-chart-timeline'; }
   static get properties() {
     return {
@@ -23,9 +22,25 @@ class StateHistoryChartTimeline extends
     super.connectedCallback();
     this._isAttached = true;
     this.drawChart();
-    this.addEventListener('iron-resize', () => {
-      setTimeout(() => this.drawChart(), 10);
-    });
+
+    this._resizeListener = () => {
+      this._debouncer = Polymer.Debouncer.debounce(
+        this._debouncer,
+        Polymer.Async.timeOut.after(10),
+        () => {
+          if (this._isAttached) {
+            this.drawChart();
+          }
+        }
+      );
+    };
+    window.addEventListener('resize', this._resizeListener);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._isAttached = false;
+    window.removeEventListener('resize', this._resizeListener);
   }
 
   dataChanged() {