FIX: makes charts more resilient to resizing (#6758)

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");
+      this._renderChart(this.get("model"), this.$(".chart-canvas"));
-      if (!$chartCanvas || !$chartCanvas.length) return;
+    });
+  },
 
-      const context = $chartCanvas[0].getContext("2d");
+  _renderChart(model, $chartCanvas) {
-      const model = this.get("model");
+    if (!$chartCanvas || !$chartCanvas.length) return;
-      const chartData = Ember.makeArray(
-        model.get("chartData") || model.get("data")
-      );
-      const prevChartData = Ember.makeArray(
-        model.get("prevChartData") || model.get("prev_data")
-      );
 
-      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 = {
+    const labels = chartData.map(d => d.x);
-        labels,
-        datasets: [
-          {
-            data: chartData.map(d => Math.round(parseFloat(d.y))),
-            backgroundColor: prevChartData.length
-              ? "transparent"
-              : model.secondary_color,
-            borderColor: model.primary_color
-          }
-        ]
-      };
 
-      if (prevChartData.length) {
+    const data = {
-        data.datasets.push({
+      labels,
-          data: prevChartData.map(d => Math.round(parseFloat(d.y))),
+      datasets: [
-          borderColor: model.primary_color,
+        {
-          borderDash: [5, 5],
+          data: chartData.map(d => Math.round(parseFloat(d.y))),
-          backgroundColor: "transparent",
+          backgroundColor: prevChartData.length
-          borderWidth: 1,
+            ? "transparent"
-          pointRadius: 0
+            : model.secondary_color,
-        });
+          borderColor: model.primary_color
-      }
+        }
+      ]
+    };
 
-      loadScript("/javascripts/Chart.min.js").then(() => {
+    if (prevChartData.length) {
-        this._resetChart();
+      data.datasets.push({
-        this._chart = new window.Chart(context, this._buildChartConfig(data));
+        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));
     });
   },