DEV: Varying sized doughnuts

Author: keegangeorge

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

@@ -1,9 +1,33 @@
 import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
 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)
+    );
+  }
+
   get config() {
     const totalScore = this.args.totalScore || "";
+    // const radius = this.calculateRadius(this.args.totalScore)
+    // Temporary for tesitng:
+    const radius = this.calculateRadius(Math.floor(Math.random() * (100 + 1)));
+
+    const paddingTop = 30;
+    const paddingBottom = 0;
+    const canvasSize = 2 * radius + paddingTop + paddingBottom;
+    this.canvasSize = canvasSize;
 
     return {
       type: "doughnut",
@@ -13,14 +37,25 @@ export default class DoughnutChart extends Component {
           {
             data: this.args.data,
             backgroundColor: this.args.colors,
+            cutout: "70%",
+            radius,
           },
         ],
       },
       options: {
         responsive: true,
+        maintainAspectRatio: false,
+        layout: {
+          padding: {
+            top: paddingTop,
+            left: 0,
+            right: 0,
+            bottom: 0,
+          },
+        },
         plugins: {
           legend: {
-            position: this.args.legendPosition || "bottom",
+            display: false,
           },
         },
       },
@@ -55,13 +90,26 @@ export default class DoughnutChart extends Component {
             ctx.save();
           },
         },
+        {
+          id: "resizeCanvas",
+          afterDraw: function (chart) {
+            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">{{@doughnutTitle}}</h3>
+      <h3
+        class="doughnut-chart-title"
+        style="max-width: {{this.canvasSize}}px"
+      >{{@doughnutTitle}}</h3>
       <Chart @chartConfig={{this.config}} class="admin-report-doughnut" />
     {{/if}}
   </template>

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

@@ -39,11 +39,6 @@
       flex: 1;
     }
 
-    .control:nth-of-type(n + 6) {
-      flex-basis: 49%;
-      align-self: flex-end;
-    }
-
     // Hides tag selector when showing subcategories selector
     .control:nth-of-type(6):nth-last-of-type(3) {
       display: none;
@@ -59,7 +54,6 @@
     display: flex;
     flex-flow: row wrap;
     order: 2;
-    gap: 1rem;
     align-items: flex-start;
     max-height: 100vh;
   }
@@ -70,29 +64,29 @@
   flex: 2;
   display: flex;
   flex-flow: row wrap;
-  gap: 3rem;
 
   .admin-report-doughnut {
-    max-width: 300px;
-    max-height: 300px;
     padding: 0.25rem;
   }
 
   &__chart-wrapper {
-    width: auto;
+    height: fit-content;
+    position: relative;
+    transition: transform 0.25s ease, box-shadow 0.25s ease;
+    border-radius: var(--d-border-radius);
+
     .doughnut-chart-title {
       @include ellipsis;
-      margin: 0 auto;
-      text-align: center;
-      margin-bottom: 1rem;
-      max-width: 300px;
+      position: absolute;
+      top: 3%;
+      left: 50%;
+      transform: translateX(-50%);
+      font-size: var(--font-0);
+      z-index: 999;
     }
-    transition: transform 0.25s ease, box-shadow 0.25s ease;
-    border-radius: var(--d-border-radius);
 
     &:hover {
       transform: translateY(-1rem);
-      box-shadow: var(--shadow-card);
       cursor: pointer;
     }
   }
@@ -125,7 +119,7 @@
   @include report-container-box();
   flex: 1 1 300px;
   min-width: 300px;
-
+  margin-left: 1rem;
   display: flex;
   flex-flow: column nowrap;
   overflow-y: auto;