From 9aafca03f53093b9e98a54d8f218134b737fdefa Mon Sep 17 00:00:00 2001 From: Keegan George Date: Tue, 25 Feb 2025 07:47:30 -0800 Subject: [PATCH] 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 --- .../sentiment/sentiment_controller.rb | 1 + .../ai_sentiment_post_serializer.rb | 5 ++-- .../admin-report-sentiment-analysis.gjs | 9 +++--- .../discourse/components/doughnut-chart.gjs | 11 +++---- .../modules/sentiment/common/dashboard.scss | 30 ++++++++++++------- 5 files changed, 33 insertions(+), 23 deletions(-) diff --git a/app/controllers/discourse_ai/sentiment/sentiment_controller.rb b/app/controllers/discourse_ai/sentiment/sentiment_controller.rb index 5173c007..57fa4d33 100644 --- a/app/controllers/discourse_ai/sentiment/sentiment_controller.rb +++ b/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, diff --git a/app/serializers/ai_sentiment_post_serializer.rb b/app/serializers/ai_sentiment_post_serializer.rb index f6420352..faefcba7 100644 --- a/app/serializers/ai_sentiment_post_serializer.rb +++ b/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 diff --git a/assets/javascripts/discourse/components/admin-report-sentiment-analysis.gjs b/assets/javascripts/discourse/components/admin-report-sentiment-analysis.gjs index 7dcda1ae..a1ca1e6f 100644 --- a/assets/javascripts/discourse/components/admin-report-sentiment-analysis.gjs +++ b/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}} /> {{/each}} @@ -265,15 +266,13 @@ export default class AdminReportSentimentAnalysis extends Component { class="btn-flat" @action={{this.backToAllCharts}} /> -

- {{this.selectedChart.title}} -

diff --git a/assets/javascripts/discourse/components/doughnut-chart.gjs b/assets/javascripts/discourse/components/doughnut-chart.gjs index a9327d48..79c16076 100644 --- a/assets/javascripts/discourse/components/doughnut-chart.gjs +++ b/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 { diff --git a/assets/stylesheets/modules/sentiment/common/dashboard.scss b/assets/stylesheets/modules/sentiment/common/dashboard.scss index 5e3747fe..b3e2ef74 100644 --- a/assets/stylesheets/modules/sentiment/common/dashboard.scss +++ b/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;