Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
This commit is contained in:
Joffrey JAFFEUX 2019-11-27 00:10:43 +01:00 committed by GitHub
parent 2673cad142
commit 0807751390
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 16 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/javascripts/discourse/widgets/widget.js.es6
View File

@ -118,7 +118,7 @@ export default class Widget {
this.appEvents = register.lookup("service:app-events"); this.appEvents = register.lookup("service:app-events");
this.keyValueStore = register.lookup("key-value-store:main"); this.keyValueStore = register.lookup("key-value-store:main");
this.init(); this.init(this.attrs);
// Helps debug widgets // Helps debug widgets
if (Discourse.Environment === "development" || ENV.environment === "test") { if (Discourse.Environment === "development" || ENV.environment === "test") {

30
plugins/poll/assets/javascripts/widgets/discourse-poll.js.es6
View File

@ -10,7 +10,6 @@ import round from "discourse/lib/round";
import { relativeAge } from "discourse/lib/formatter"; import { relativeAge } from "discourse/lib/formatter";
import loadScript from "discourse/lib/load-script"; import loadScript from "discourse/lib/load-script";
import { getColors } from "../lib/chart-colors"; import { getColors } from "../lib/chart-colors";
import { later } from "@ember/runloop";
import { classify } from "@ember/string"; import { classify } from "@ember/string";
import { PIE_CHART_TYPE } from "../controllers/poll-ui-builder"; import { PIE_CHART_TYPE } from "../controllers/poll-ui-builder";
@ -542,6 +541,18 @@ function clearPieChart(id) {
createWidget("discourse-poll-pie-canvas", { createWidget("discourse-poll-pie-canvas", {
tagName: "canvas.poll-results-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) { buildAttributes(attrs) {
return { return {
id: `poll-results-chart-${attrs.id}` id: `poll-results-chart-${attrs.id}`
@ -555,7 +566,7 @@ createWidget("discourse-poll-pie-chart", {
const contents = []; const contents = [];
if (!attrs.showResults) { if (!attrs.showResults) {
clearPieChart(this.attrs.id); clearPieChart(attrs.id);
return contents; return contents;
} }
@ -563,7 +574,7 @@ createWidget("discourse-poll-pie-chart", {
let chart; let chart;
if (attrs.groupResults && attrs.groupableUserFields.length > 0) { if (attrs.groupResults && attrs.groupableUserFields.length > 0) {
chart = this.attach("discourse-poll-grouped-pies", attrs); chart = this.attach("discourse-poll-grouped-pies", attrs);
clearPieChart(this.attrs.id); clearPieChart(attrs.id);
} else { } else {
if (attrs.groupableUserFields.length) { if (attrs.groupableUserFields.length) {
btn = this.attach("button", { btn = this.attach("button", {
@ -574,18 +585,7 @@ createWidget("discourse-poll-pie-chart", {
action: "toggleGroupedPieCharts" 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); chart = this.attach("discourse-poll-pie-canvas", attrs);
} }
contents.push(btn); contents.push(btn);