UX: Improvements to sentiment analysis report

app/controllers/discourse_ai/sentiment/sentiment_controller.rb

@@ -41,6 +41,7 @@ def posts
             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 @@ def excerpt
   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;