FIX: Poll breakdown regressions (#22957)

Some related to the modal api change, some due to chart.js updates

app/assets/javascripts/discourse/app/components/d-modal.hbs

@@ -55,9 +55,9 @@
                     {{/if}}
                   </div>
                 {{/if}}
-
-                {{yield to="headerBelowTitle"}}
               </div>
+
+              {{yield to="headerBelowTitle"}}
             </div>
           {{/if}}
 

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

@@ -2,21 +2,21 @@
 <DModal
   @title={{i18n "poll.breakdown.title"}}
   @closeModal={{@closeModal}}
-  class="has-tabs"
+  class="poll-breakdown has-tabs"
 >
   <:headerBelowTitle>
     <ul class="modal-tabs">
       <li
         class={{concat-class
           "modal-tab percentage"
-          (if (eq this.displayMode "percentage") "active")
+          (if (eq this.displayMode "percentage") "is-active")
         }}
         {{on "click" (fn (mut this.displayMode) "percentage")}}
       >{{i18n "poll.breakdown.percentage"}}</li>
       <li
         class={{concat-class
           "modal-tab count"
-          (if (eq this.displayMode "count") "active")
+          (if (eq this.displayMode "count") "is-active")
         }}
         {{on "click" (fn (mut this.displayMode) "count")}}
       >{{i18n "poll.breakdown.count"}}</li>

plugins/poll/assets/javascripts/discourse/components/poll-breakdown-chart.js

@@ -135,14 +135,11 @@ export default class PollBreakdownChart extends Component {
             return;
           }
 
-          const sliceIndex = activeElements[0]._index;
+          const sliceIndex = activeElements[0].index;
           const optionIndex = Object.keys(this._optionToSlice).find(
             (option) => this._optionToSlice[option] === sliceIndex
           );
 
-          // Clear the array to avoid issues in Chart.js
-          activeElements.length = 0;
-
           next(() => {
             this.setHighlightedOption(Number(optionIndex));
           });
@@ -163,28 +160,17 @@ export default class PollBreakdownChart extends Component {
   }
 
   _updateHighlight() {
-    const meta = this._chart.getDatasetMeta(0);
+    const activeElements = [];
 
-    if (this._previousHighlightedSliceIndex !== null) {
-      const slice = meta.data[this._previousHighlightedSliceIndex];
-      meta.controller.removeHoverStyle(slice);
-      this._chart.draw();
+    if (this.highlightedOption) {
+      const index = this._optionToSlice[this.highlightedOption];
+
+      if (index !== undefined) {
+        activeElements.push({ datasetIndex: 0, index });
+      }
     }
 
-    if (this.highlightedOption === null) {
-      this._previousHighlightedSliceIndex = null;
-      return;
-    }
-
-    const sliceIndex = this._optionToSlice[this.highlightedOption];
-    if (typeof sliceIndex === "undefined") {
-      this._previousHighlightedSliceIndex = null;
-      return;
-    }
-
-    const slice = meta.data[sliceIndex];
-    this._previousHighlightedSliceIndex = sliceIndex;
-    meta.controller.setHoverStyle(slice);
-    this._chart.draw();
+    this._chart.setActiveElements(activeElements);
+    this._chart.update();
   }
 }

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

@@ -2,7 +2,6 @@ import { tagName } from "@ember-decorators/component";
 import { equal } from "@ember/object/computed";
 import Component from "@ember/component";
 import I18n from "I18n";
-import { action } from "@ember/object";
 import discourseComputed from "discourse-common/utils/decorators";
 import { getColors } from "discourse/plugins/poll/lib/chart-colors";
 import { htmlSafe } from "@ember/template";
@@ -49,13 +48,4 @@ export default class PollBreakdownOption extends Component {
 
     return htmlSafe(`background: ${color};`);
   }
-
-  @action
-  onHover(active) {
-    if (active) {
-      this.onMouseOver();
-    } else {
-      this.onMouseOut();
-    }
-  }
 }

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

@@ -1,4 +1,4 @@
-.poll-breakdown-modal {
+.poll-breakdown.modal {
   .modal-inner-container {
     max-width: unset;
     width: 90vw;
@@ -11,7 +11,7 @@
   .modal-body {
     display: grid;
     height: 80vh;
-    grid: auto-flow / 1fr 2fr;
+    grid: auto-flow / 2fr 5fr;
     padding: 0;
   }
 }