From 08077513906592d32800827b5c3d8f0bd508739c Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Wed, 27 Nov 2019 00:10:43 +0100
Subject: [PATCH]  REFACTOR: poll-pie-chart widget (#8415)

This commit mostly get rid of the later() call and encapsulate all pie chart display logic inside discourse-poll-pie-canvas widget instead of sharing it between discourse-poll-pie-chart and discourse-poll-pie-canvas
---
 .../discourse/widgets/widget.js.es6           |  2 +-
 .../javascripts/widgets/discourse-poll.js.es6 | 30 +++++++++----------
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/app/assets/javascripts/discourse/widgets/widget.js.es6 b/app/assets/javascripts/discourse/widgets/widget.js.es6
index 159727522b1..cb75df16ae8 100644
--- a/app/assets/javascripts/discourse/widgets/widget.js.es6
+++ b/app/assets/javascripts/discourse/widgets/widget.js.es6
@@ -118,7 +118,7 @@ export default class Widget {
     this.appEvents = register.lookup("service:app-events");
     this.keyValueStore = register.lookup("key-value-store:main");
 
-    this.init();
+    this.init(this.attrs);
 
     // Helps debug widgets
     if (Discourse.Environment === "development" || ENV.environment === "test") {
diff --git a/plugins/poll/assets/javascripts/widgets/discourse-poll.js.es6 b/plugins/poll/assets/javascripts/widgets/discourse-poll.js.es6
index f6c5cdeb5e5..2932c8ecad7 100644
--- a/plugins/poll/assets/javascripts/widgets/discourse-poll.js.es6
+++ b/plugins/poll/assets/javascripts/widgets/discourse-poll.js.es6
@@ -10,7 +10,6 @@ import round from "discourse/lib/round";
 import { relativeAge } from "discourse/lib/formatter";
 import loadScript from "discourse/lib/load-script";
 import { getColors } from "../lib/chart-colors";
-import { later } from "@ember/runloop";
 import { classify } from "@ember/string";
 import { PIE_CHART_TYPE } from "../controllers/poll-ui-builder";
 
@@ -542,6 +541,18 @@ function clearPieChart(id) {
 createWidget("discourse-poll-pie-canvas", {
   tagName: "canvas.poll-results-canvas",
 
+  init(attrs) {
+    loadScript("/javascripts/Chart.min.js").then(() => {
+      const data = attrs.poll.options.mapBy("votes");
+      const labels = attrs.poll.options.mapBy("html");
+      const config = pieChartConfig(data, labels);
+
+      const el = document.getElementById(`poll-results-chart-${attrs.id}`);
+      // eslint-disable-next-line
+      new Chart(el.getContext("2d"), config);
+    });
+  },
+
   buildAttributes(attrs) {
     return {
       id: `poll-results-chart-${attrs.id}`
@@ -555,7 +566,7 @@ createWidget("discourse-poll-pie-chart", {
     const contents = [];
 
     if (!attrs.showResults) {
-      clearPieChart(this.attrs.id);
+      clearPieChart(attrs.id);
       return contents;
     }
 
@@ -563,7 +574,7 @@ createWidget("discourse-poll-pie-chart", {
     let chart;
     if (attrs.groupResults && attrs.groupableUserFields.length > 0) {
       chart = this.attach("discourse-poll-grouped-pies", attrs);
-      clearPieChart(this.attrs.id);
+      clearPieChart(attrs.id);
     } else {
       if (attrs.groupableUserFields.length) {
         btn = this.attach("button", {
@@ -574,18 +585,7 @@ createWidget("discourse-poll-pie-chart", {
           action: "toggleGroupedPieCharts"
         });
       }
-      const data = attrs.poll.options.mapBy("votes");
-      const labels = attrs.poll.options.mapBy("html");
-      loadScript("/javascripts/Chart.min.js").then(() => {
-        later(() => {
-          const el = document.querySelector(
-            `#poll-results-chart-${this.attrs.id}`
-          );
-          const config = pieChartConfig(data, labels);
-          // eslint-disable-next-line
-          new Chart(el.getContext("2d"), config);
-        });
-      });
+
       chart = this.attach("discourse-poll-pie-canvas", attrs);
     }
     contents.push(btn);