UX: Improvements to sentiment analysis report (#1150)

This update improves some of the UI around sentiment analysis reports:

1. Improve titles so it is above and truncated when long
2. Change doughnut to only show total count
3. Ensures sentiment posts have dates
4. Ensure expand post doesn't appear on short posts

app/controllers/discourse_ai/sentiment/sentiment_controller.rb

@@ -41,6 +41,7 @@ module DiscourseAi
             p.cooked as post_cooked,
             p.user_id,
             p.post_number,
+            p.created_at AS created_at,
             u.username,
             u.name,
             u.uploaded_avatar_id,

app/serializers/ai_sentiment_post_serializer.rb

@@ -11,7 +11,8 @@ class AiSentimentPostSerializer < ApplicationSerializer
              :excerpt,
              :sentiment,
              :truncated,
-             :category
+             :category,
+             :created_at
 
   def avatar_template
     User.avatar_template(object.username, object.uploaded_avatar_id)
@@ -22,7 +23,7 @@ class AiSentimentPostSerializer < ApplicationSerializer
   end
 
   def truncated
-    true
+    object.post_cooked.length > SiteSetting.post_excerpt_maxlength
   end
 
   def category

assets/javascripts/discourse/components/admin-report-sentiment-analysis.gjs

@@ -250,7 +250,8 @@ export default class AdminReportSentimentAnalysis extends Component {
               @labels={{@model.labels}}
               @colors={{this.colors}}
               @data={{data.scores}}
-              @doughnutTitle={{this.doughnutTitle data}}
+              @totalScore={{data.total_score}}
+              @doughnutTitle={{data.title}}
             />
           </div>
         {{/each}}
@@ -265,15 +266,13 @@ export default class AdminReportSentimentAnalysis extends Component {
           class="btn-flat"
           @action={{this.backToAllCharts}}
         />
-        <h3 class="admin-report-sentiment-analysis-details__title">
-          {{this.selectedChart.title}}
-        </h3>
 
         <DoughnutChart
           @labels={{@model.labels}}
           @colors={{this.colors}}
           @data={{this.selectedChart.scores}}
-          @doughnutTitle={{this.doughnutTitle this.selectedChart}}
+          @totalScore={{this.selectedChart.total_score}}
+          @doughnutTitle={{this.selectedChart.title}}
         />
       </div>
       <div class="admin-report-sentiment-analysis-details">

assets/javascripts/discourse/components/doughnut-chart.gjs

@@ -3,7 +3,7 @@ import Chart from "admin/components/chart";
 
 export default class DoughnutChart extends Component {
   get config() {
-    const doughnutTitle = this.args.doughnutTitle || "";
+    const totalScore = this.args.totalScore || "";
 
     return {
       type: "doughnut",
@@ -30,11 +30,11 @@ export default class DoughnutChart extends Component {
           afterDraw: function (chart) {
             const cssVarColor =
               getComputedStyle(document.documentElement).getPropertyValue(
-                "--primary"
+                "--primary-high"
               ) || "#000";
             const cssFontSize =
               getComputedStyle(document.documentElement).getPropertyValue(
-                "--font-down-2"
+                "--font-up-4"
               ) || "1.3em";
             const cssFontFamily =
               getComputedStyle(document.documentElement).getPropertyValue(
@@ -49,9 +49,9 @@ export default class DoughnutChart extends Component {
             ctx.textAlign = "center";
             ctx.textBaseline = "middle";
             ctx.fillStyle = cssVarColor.trim();
-            ctx.font = `${cssFontSize.trim()} ${cssFontFamily.trim()}`;
+            ctx.font = `bold ${cssFontSize.trim()} ${cssFontFamily.trim()}`;
 
-            ctx.fillText(doughnutTitle, centerX, centerY);
+            ctx.fillText(totalScore, centerX, centerY);
             ctx.save();
           },
         },
@@ -61,6 +61,7 @@ export default class DoughnutChart extends Component {
 
   <template>
     {{#if this.config}}
+      <h3 class="doughnut-chart-title">{{@doughnutTitle}}</h3>
       <Chart @chartConfig={{this.config}} class="admin-report-doughnut" />
     {{/if}}
   </template>

assets/stylesheets/modules/sentiment/common/dashboard.scss

@@ -75,6 +75,14 @@
   }
 
   &__chart-wrapper {
+    width: auto;
+    .doughnut-chart-title {
+      @include ellipsis;
+      margin: 0 auto;
+      text-align: center;
+      margin-bottom: 1rem;
+      max-width: 300px;
+    }
     transition: transform 0.25s ease, box-shadow 0.25s ease;
     border-radius: var(--d-border-radius);
 
@@ -89,6 +97,17 @@
     border: 1px solid var(--primary-low);
     border-radius: var(--d-border-radius);
     padding: 1rem;
+
+    .doughnut-chart-title {
+      font-size: var(--font-up-2);
+      margin: 0 auto;
+      text-align: center;
+      margin-bottom: 1rem;
+      margin-top: 0.3rem;
+      padding-top: 2rem;
+      padding-bottom: 1rem;
+      border-top: 1px solid var(--primary-low);
+    }
   }
 }
 
@@ -119,17 +138,6 @@
     }
   }
 
-  &__title {
-    font-size: var(--font-up-2);
-    margin: 0 auto;
-    text-align: center;
-    margin-bottom: 1rem;
-    margin-top: 0.3rem;
-    padding-top: 2rem;
-    padding-bottom: 1rem;
-    border-top: 1px solid var(--primary-low);
-  }
-
   &__scores {
     display: flex;
     flex-flow: column wrap;