DEV: Sentiment follow-up updates (#1172)

keegangeorge · web-flow · commit 94e0834b8887 · 2025-03-10T09:25:55.000-07:00
### ✨ What's new?
- [X] show sentiment counts by color on doughnut without needing to hover
- [X] minor UI padding adjustments
- [X] hide filters that are not allowed to be adjusted in selected chart view
- [X] fix z-index issues with drill-down filters
diff --git a/assets/javascripts/discourse/components/admin-report-sentiment-analysis.gjs b/assets/javascripts/discourse/components/admin-report-sentiment-analysis.gjs
@@ -10,6 +10,7 @@ import { and } from "truth-helpers";
 import DButton from "discourse/components/d-button";
 import HorizontalOverflowNav from "discourse/components/horizontal-overflow-nav";
 import PostList from "discourse/components/post-list";
+import bodyClass from "discourse/helpers/body-class";
 import dIcon from "discourse/helpers/d-icon";
 import replaceEmoji from "discourse/helpers/replace-emoji";
 import { ajax } from "discourse/lib/ajax";
@@ -318,6 +319,7 @@ export default class AdminReportSentimentAnalysis extends Component {
     {{/unless}}
 
     {{#if (and this.selectedChart this.showingSelectedChart)}}
+      {{bodyClass "showing-sentiment-analysis-chart"}}
       <div class="admin-report-sentiment-analysis__selected-chart">
         <div class="admin-report-sentiment-analysis__selected-chart-actions">
           <DButton
diff --git a/assets/javascripts/discourse/components/doughnut-chart.gjs b/assets/javascripts/discourse/components/doughnut-chart.gjs
@@ -62,6 +62,40 @@ export default class DoughnutChart extends Component {
             ctx.save();
           },
         },
+        {
+          // Custom plugin to draw labels inside the doughnut chart
+          id: "doughnutLabels",
+          afterDraw(chart) {
+            const ctx = chart.ctx;
+            const dataset = chart.data.datasets[0];
+            const meta = chart.getDatasetMeta(0);
+            const cssFontSize =
+              getComputedStyle(document.documentElement).getPropertyValue(
+                "--font-down-2"
+              ) || "1.3em";
+            const cssFontFamily =
+              getComputedStyle(document.documentElement).getPropertyValue(
+                "--font-family"
+              ) || "sans-serif";
+
+            ctx.font = `${cssFontSize.trim()} ${cssFontFamily.trim()}`;
+            ctx.fillStyle = "#fafafa";
+            ctx.textAlign = "center";
+            ctx.textBaseline = "middle";
+
+            meta.data.forEach((element, index) => {
+              const { x, y } = element.tooltipPosition();
+              const value = dataset.data[index];
+              const nonZeroCount = dataset.data.filter((v) => v > 0).length;
+
+              if (value === 0 || nonZeroCount === 1) {
+                return;
+              }
+
+              ctx.fillText(value, x, y);
+            });
+          },
+        },
       ],
     };
   }
diff --git a/assets/stylesheets/modules/sentiment/common/dashboard.scss b/assets/stylesheets/modules/sentiment/common/dashboard.scss
@@ -44,6 +44,13 @@
       display: none;
     }
 
+    .control:last-child {
+      align-self: flex-end;
+
+      input {
+      }
+    }
+
     .control:has(.export-csv-btn) {
       display: none;
     }
@@ -63,10 +70,12 @@
   @include report-container-box();
   flex: 2;
   display: flex;
-  gap: 1rem;
-  justify-content: space-around;
+  gap: 2rem 1rem;
+  justify-content: space-evenly;
   align-items: center;
   flex-flow: row wrap;
+  padding-inline: 0;
+  padding-block: 1.5rem;
 
   .admin-report-doughnut {
     padding: 0.25rem;
@@ -87,7 +96,7 @@
 
     &:hover {
       box-shadow: var(--shadow-card);
-      transform: translateY(-1rem);
+      transform: translateY(-0.5rem);
       cursor: pointer;
     }
   }
@@ -219,6 +228,20 @@
     position: sticky;
     top: 0;
     padding-top: 1rem;
-    z-index: z("header");
+    z-index: z("timeline");
+  }
+}
+
+.showing-sentiment-analysis-chart
+  .admin-report.sentiment-analysis
+  .body
+  .filters {
+  // Hide elements 2 - 6 when showing selected chart
+  // as they're not supported being changed in this view
+  .control:first-of-type {
+    flex: unset;
+  }
+  .control:nth-of-type(n + 2):nth-of-type(-n + 6) {
+    display: none;
   }
 }
