DEV: Revert sizing and make header sticky

Author: keegangeorge

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

@@ -310,6 +310,7 @@ export default class AdminReportSentimentAnalysis extends Component {
               @data={{data.scores}}
               @totalScore={{data.total_score}}
               @doughnutTitle={{data.title}}
+              @displayLegend={{true}}
             />
           </div>
         {{/each}}
@@ -342,9 +343,7 @@ export default class AdminReportSentimentAnalysis extends Component {
           @data={{this.selectedChart.scores}}
           @totalScore={{this.selectedChart.total_score}}
           @doughnutTitle={{this.selectedChart.title}}
-          @skipCanvasResize={{true}}
           @displayLegend={{true}}
-          @radius={{100}}
         />
 
       </div>

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

@@ -8,38 +8,8 @@ import Chart from "admin/components/chart";
 export default class DoughnutChart extends Component {
   @tracked canvasSize = null;
 
-  calculateRadius(postCount) {
-    const minPosts = 0;
-    const maxPosts = 100;
-    const minRadius = 30;
-    const maxRadius = 100;
-    const clampedPostCount = Math.min(Math.max(postCount, minPosts), maxPosts);
-    return (
-      minRadius +
-      ((clampedPostCount - minPosts) / (maxPosts - minPosts)) *
-        (maxRadius - minRadius)
-    );
-  }
-
-  getRadius() {
-    if (this.args.radius) {
-      return this.args.radius;
-    } else if (isDevelopment()) {
-      return this.calculateRadius(Math.floor(Math.random() * (100 + 1)));
-    } else {
-      return this.calculateRadius(this.args.totalScore);
-    }
-  }
-
   get config() {
     const totalScore = this.args.totalScore || "";
-    const skipCanvasResize = this.args.skipCanvasResize || false;
-    const radius = this.getRadius();
-
-    const paddingTop = 30;
-    const paddingBottom = 0;
-    const canvasSize = 2 * radius + paddingTop + paddingBottom;
-    this.canvasSize = canvasSize;
 
     return {
       type: "doughnut",
@@ -49,22 +19,14 @@ export default class DoughnutChart extends Component {
           {
             data: this.args.data,
             backgroundColor: this.args.colors,
-            cutout: "70%",
-            radius,
+            cutout: "50%",
+            radius: 100,
           },
         ],
       },
       options: {
         responsive: true,
         maintainAspectRatio: false,
-        layout: {
-          padding: {
-            top: paddingTop,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          },
-        },
         plugins: {
           legend: {
             display: this.args.displayLegend || false,
@@ -103,29 +65,13 @@ export default class DoughnutChart extends Component {
             ctx.save();
           },
         },
-        {
-          id: "resizeCanvas",
-          afterDraw: function (chart) {
-            if (skipCanvasResize) {
-              return;
-            }
-            const size = `${canvasSize}px`;
-            chart.canvas.style.width = size;
-            chart.canvas.style.height = size;
-
-            chart.resize();
-          },
-        },
       ],
     };
   }
 
   <template>
     {{#if this.config}}
-      <h3
-        class="doughnut-chart-title"
-        style={{htmlSafe (concat "max-width: " this.canvasSize "px")}}
-      >{{@doughnutTitle}}</h3>
+      <h3 class="doughnut-chart-title">{{@doughnutTitle}}</h3>
       <Chart @chartConfig={{this.config}} class="admin-report-doughnut" />
     {{/if}}
   </template>

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

@@ -63,6 +63,9 @@
   @include report-container-box();
   flex: 2;
   display: flex;
+  gap: 1rem;
+  justify-content: space-around;
+  align-items: center;
   flex-flow: row wrap;
 
   .admin-report-doughnut {
@@ -77,15 +80,13 @@
 
     .doughnut-chart-title {
       @include ellipsis;
-      position: absolute;
-      top: 3%;
-      left: 50%;
-      transform: translateX(-50%);
-      font-size: var(--font-0);
-      z-index: 999;
+      margin: 0 auto;
+      margin-top: 1rem;
+      text-align: center;
     }
 
     &:hover {
+      box-shadow: var(--shadow-card);
       transform: translateY(-1rem);
       cursor: pointer;
     }
@@ -136,6 +137,7 @@
   flex-flow: column nowrap;
   overflow-y: auto;
   height: 100%;
+  padding-top: 0;
 
   &__filters {
     border-bottom: 1px solid var(--primary-low);
@@ -210,3 +212,13 @@
     }
   }
 }
+
+.admin-reports.admin-contents .sentiment-analysis {
+  .horizontal-overflow-nav {
+    background: var(--secondary);
+    position: sticky;
+    top: 0;
+    padding-top: 1rem;
+    z-index: z("header");
+  }
+}