FEATURE: Poll breakdown 2.0 (#10345)

The poll breakdown modal replaces the grouped pie charts feature. Includes: * MODAL: Untangle `onSelectPanel` Previously modal-tab component would call on click the onSelectPanel callback with itself (modal-tab) as `this` which severely limited its usefulness. Now showModal binds the callback to its controller. "The PR includes a fix/change to d-modal (b7f6ec6) that hasn't been extracted to a separate PR because it's not currently possible to test a change like this in abstract, i.e. with dynamically created controllers/components in tests. The percentage/count toggle test for the poll breakdown feature is essentially a test for that d-modal modification."
2020-08-06 17:57:06 +02:00
parent 76c02cac65
commit cd4f251891
26 changed files with 708 additions and 294 deletions
@@ -0,0 +1,2 @@
+<label class="poll-breakdown-chart-label">{{@group}}</label>
+<canvas class="poll-breakdown-chart-chart"></canvas>
@@ -0,0 +1,17 @@
+<li
+  class="poll-breakdown-option"
+  style={{this.colorBackgroundStyle}}
+  {{on "mouseover" @onMouseOver}}
+  {{on "mouseout" @onMouseOut}}
+>
+  <span class="poll-breakdown-option-color" style={{this.colorPreviewStyle}}></span>
+
+  <span class="poll-breakdown-option-count">
+    {{#if showPercentage}}
+      {{this.percent}}%
+    {{else}}
+      {{@option.votes}}
+    {{/if}}
+  </span>
+  <span class="poll-breakdown-option-text">{{{@option.html}}}</span>
+</li>
@@ -0,0 +1,49 @@
+{{#d-modal-body title="poll.breakdown.title"}}
+  <div class="poll-breakdown-sidebar">
+    {{!-- TODO: replace with the (optional) poll title --}}
+    <p class="poll-breakdown-title">{{this.model.post.topic.title}}</p>
+
+    <div class="poll-breakdown-total-votes">{{i18n "poll.breakdown.votes" count=this.model.poll.voters}}</div>
+
+    <ul class="poll-breakdown-options">
+      {{#each this.model.poll.options as |option index|}}
+        {{poll-breakdown-option
+          option=option
+          index=index
+          totalVotes=this.totalVotes
+          optionsCount=this.model.poll.options.length
+          displayMode=this.displayMode
+          highlightedOption=this.highlightedOption
+          onMouseOver=(fn (mut this.highlightedOption) index)
+          onMouseOut=(fn (mut this.highlightedOption) null)
+        }}
+      {{/each}}
+    </ul>
+  </div>
+
+  <div class="poll-breakdown-body">
+    <div class="poll-breakdown-body-header">
+      <label class="poll-breakdown-body-header-label">{{i18n "poll.breakdown.breakdown"}}</label>
+
+      {{combo-box
+        content=this.groupableUserFields
+        value=this.groupedBy
+        nameProperty="label"
+        class="poll-breakdown-dropdown"
+        onChange=(action this.setGrouping)
+      }}
+    </div>
+
+    <div class="poll-breakdown-charts">
+      {{#each this.charts as |chart|}}
+        {{poll-breakdown-chart
+          group=(get chart "group")
+          options=(get chart "options")
+          displayMode=this.displayMode
+          highlightedOption=this.highlightedOption
+          setHighlightedOption=(fn (mut this.highlightedOption))
+        }}
+      {{/each}}
+    </div>
+  </div>
+{{/d-modal-body}}