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>

plugins/poll/assets/stylesheets/common/poll-breakdown.scss

@@ -28,7 +28,6 @@
   background: hsl(0, 0%, 92%);
   box-sizing: border-box;
   display: flex;
-  flex-basis: 30%;
   flex-direction: column;
   flex-shrink: 0;
   height: 100%;
@@ -57,15 +56,30 @@
 .poll-breakdown-option {
   align-items: center;
   display: grid;
-  grid: auto / auto-flow;
   column-gap: 0.66rem;
-  justify-content: flex-start;
+  grid-template-columns: 2.5rem 1fr;
+  justify-content: start;
 }
 
 .poll-breakdown-option-color {
+  align-self: end;
   border: 1px solid rgba(0, 0, 0, 0.15);
-  height: 0.5rem;
-  width: 0.8rem;
+  grid-column: 1;
+  height: 0.6rem;
+  justify-self: center;
+  width: 1.2rem;
+}
+
+.poll-breakdown-option-count {
+  align-self: start;
+  font-size: 0.9rem;
+  grid-column: 1;
+  justify-self: center;
+}
+
+.poll-breakdown-option-text {
+  grid-column: 2;
+  grid-row: 1/3;
 }
 
 .poll-breakdown-body {