From 793f1274d10be5a5bcf296de70777e0a0b6a4b56 Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Wed, 12 Dec 2018 11:11:56 +0100
Subject: [PATCH] FIX: makes charts more resilient to resizing (#6758)

---
 .../components/admin-report-chart.js.es6      | 93 ++++++++++++-------
 1 file changed, 57 insertions(+), 36 deletions(-)

diff --git a/app/assets/javascripts/admin/components/admin-report-chart.js.es6 b/app/assets/javascripts/admin/components/admin-report-chart.js.es6
index 8994c9d9b4d..d103e6f9121 100644
--- a/app/assets/javascripts/admin/components/admin-report-chart.js.es6
+++ b/app/assets/javascripts/admin/components/admin-report-chart.js.es6
@@ -6,58 +6,79 @@ export default Ember.Component.extend({
   limit: 8,
   total: 0,
 
+  init() {
+    this._super(...arguments);
+
+    this.resizeHandler = () =>
+      Ember.run.debounce(this, this._scheduleChartRendering, 500);
+  },
+
+  didInsertElement() {
+    this._super(...arguments);
+
+    $(window).on("resize.chart", this.resizeHandler);
+  },
+
   willDestroyElement() {
     this._super(...arguments);
 
+    $(window).off("resize.chart", this.resizeHandler);
+
     this._resetChart();
   },
 
   didReceiveAttrs() {
     this._super(...arguments);
 
+    Ember.run.debounce(this, this._scheduleChartRendering, 100);
+  },
+
+  _scheduleChartRendering() {
     Ember.run.schedule("afterRender", () => {
-      const $chartCanvas = this.$(".chart-canvas");
-      if (!$chartCanvas || !$chartCanvas.length) return;
+      this._renderChart(this.get("model"), this.$(".chart-canvas"));
+    });
+  },
 
-      const context = $chartCanvas[0].getContext("2d");
-      const model = this.get("model");
-      const chartData = Ember.makeArray(
-        model.get("chartData") || model.get("data")
-      );
-      const prevChartData = Ember.makeArray(
-        model.get("prevChartData") || model.get("prev_data")
-      );
+  _renderChart(model, $chartCanvas) {
+    if (!$chartCanvas || !$chartCanvas.length) return;
 
-      const labels = chartData.map(d => d.x);
+    const context = $chartCanvas[0].getContext("2d");
+    const chartData = Ember.makeArray(
+      model.get("chartData") || model.get("data")
+    );
+    const prevChartData = Ember.makeArray(
+      model.get("prevChartData") || model.get("prev_data")
+    );
 
-      const data = {
-        labels,
-        datasets: [
-          {
-            data: chartData.map(d => Math.round(parseFloat(d.y))),
-            backgroundColor: prevChartData.length
-              ? "transparent"
-              : model.secondary_color,
-            borderColor: model.primary_color
-          }
-        ]
-      };
+    const labels = chartData.map(d => d.x);
 
-      if (prevChartData.length) {
-        data.datasets.push({
-          data: prevChartData.map(d => Math.round(parseFloat(d.y))),
-          borderColor: model.primary_color,
-          borderDash: [5, 5],
-          backgroundColor: "transparent",
-          borderWidth: 1,
-          pointRadius: 0
-        });
-      }
+    const data = {
+      labels,
+      datasets: [
+        {
+          data: chartData.map(d => Math.round(parseFloat(d.y))),
+          backgroundColor: prevChartData.length
+            ? "transparent"
+            : model.secondary_color,
+          borderColor: model.primary_color
+        }
+      ]
+    };
 
-      loadScript("/javascripts/Chart.min.js").then(() => {
-        this._resetChart();
-        this._chart = new window.Chart(context, this._buildChartConfig(data));
+    if (prevChartData.length) {
+      data.datasets.push({
+        data: prevChartData.map(d => Math.round(parseFloat(d.y))),
+        borderColor: model.primary_color,
+        borderDash: [5, 5],
+        backgroundColor: "transparent",
+        borderWidth: 1,
+        pointRadius: 0
       });
+    }
+
+    loadScript("/javascripts/Chart.min.js").then(() => {
+      this._resetChart();
+      this._chart = new window.Chart(context, this._buildChartConfig(data));
     });
   },