From 268efcccdd2df66762d116d01ad62e7641a503c6 Mon Sep 17 00:00:00 2001
From: Jarek Radosz <jradosz@gmail.com>
Date: Thu, 3 Aug 2023 17:17:09 +0200
Subject: [PATCH] FIX: Poll breakdown regressions (#22957)

Some related to the modal api change, some due to chart.js updates
---
 .../discourse/app/components/d-modal.hbs      |  4 +--
 .../components/modal/poll-breakdown.hbs       |  6 ++--
 .../components/poll-breakdown-chart.js        | 34 ++++++-------------
 .../components/poll-breakdown-option.js       | 10 ------
 .../stylesheets/common/poll-breakdown.scss    |  4 +--
 5 files changed, 17 insertions(+), 41 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/d-modal.hbs b/app/assets/javascripts/discourse/app/components/d-modal.hbs
index 467813988db..333e88b20d5 100644
--- a/app/assets/javascripts/discourse/app/components/d-modal.hbs
+++ b/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}}
 
diff --git a/plugins/poll/assets/javascripts/discourse/components/modal/poll-breakdown.hbs b/plugins/poll/assets/javascripts/discourse/components/modal/poll-breakdown.hbs
index 697922c1dce..5f38a458782 100644
--- a/plugins/poll/assets/javascripts/discourse/components/modal/poll-breakdown.hbs
+++ b/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>
diff --git a/plugins/poll/assets/javascripts/discourse/components/poll-breakdown-chart.js b/plugins/poll/assets/javascripts/discourse/components/poll-breakdown-chart.js
index 17d0aa6932d..2a2dc6d6e8f 100644
--- a/plugins/poll/assets/javascripts/discourse/components/poll-breakdown-chart.js
+++ b/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();
   }
 }
diff --git a/plugins/poll/assets/javascripts/discourse/components/poll-breakdown-option.js b/plugins/poll/assets/javascripts/discourse/components/poll-breakdown-option.js
index 354e9c37327..ba1ca9adc07 100644
--- a/plugins/poll/assets/javascripts/discourse/components/poll-breakdown-option.js
+++ b/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();
-    }
-  }
 }
diff --git a/plugins/poll/assets/stylesheets/common/poll-breakdown.scss b/plugins/poll/assets/stylesheets/common/poll-breakdown.scss
index c178c7bd386..16bbcc61daf 100644
--- a/plugins/poll/assets/stylesheets/common/poll-breakdown.scss
+++ b/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;
   }
 }