Add percentages

plugins/poll/assets/javascripts/components/poll-breakdown-option.js.es6

@@ -0,0 +1,24 @@
+import I18n from "I18n";
+import Component from "@ember/component";
+import { htmlSafe } from "@ember/template";
+import discourseComputed from "discourse-common/utils/decorators";
+import { getColors } from "../lib/chart-colors";
+
+export default Component.extend({
+  tagName: "",
+
+  @discourseComputed("option.votes", "totalVotes")
+  percent(votes, total) {
+    return I18n.toNumber((votes / total) * 100.0, { precision: 1 });
+  },
+
+  @discourseComputed("optionsCount")
+  optionColors(optionsCount) {
+    return getColors(optionsCount);
+  },
+
+  @discourseComputed("optionColors", "index")
+  colorStyle(optionColors, index) {
+    return htmlSafe(`background: ${optionColors[index]};`);
+  }
+});

plugins/poll/assets/javascripts/controllers/poll-breakdown.js.es6

@@ -58,9 +58,9 @@ export default Controller.extend(ModalFunctionality, {
     }));
   },
 
-  @discourseComputed("model.poll.options.length")
-  optionColors(optionsCount) {
-    return getColors(optionsCount);
+  @discourseComputed("model.poll.options")
+  totalVotes(options) {
+    return options.reduce((sum, option) => sum + option.votes, 0);
   },
 
   onShow() {

plugins/poll/assets/javascripts/discourse/templates/components/poll-breakdown-option.hbs

@@ -0,0 +1,5 @@
+<li class="poll-breakdown-option">
+  <span class="poll-breakdown-option-color" style={{this.colorStyle}}></span>
+  <span class="poll-breakdown-option-count">{{this.percent}}%</span>
+  <span class="poll-breakdown-option-text">{{{@option.html}}}</span>
+</li>

plugins/poll/assets/javascripts/discourse/templates/modal/poll-breakdown.hbs

@@ -7,13 +7,14 @@
     {{!-- TODO: I18n --}}
     <span class="poll-breakdown-total-votes">{{this.model.poll.voters}} votes</span>
 
-    {{!-- TODO --}}
     <ul class="poll-breakdown-options">
       {{#each this.model.poll.options as |option index|}}
-        <li class="poll-breakdown-option">
-          <span class="poll-breakdown-option-color" style={{html-safe (concat "background: " (get this.optionColors index))}}></span>
-          <span>{{{option.html}}}</span>
-        </li>
+        {{poll-breakdown-option
+          option=option
+          index=index
+          totalVotes=this.totalVotes
+          optionsCount=this.model.poll.options.length
+        }}
       {{/each}}
     </ul>
   </div>