WIP...

Author: keegangeorge

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

@@ -6,23 +6,66 @@ export default class AdminReportSentimentAnalysis extends Component {
     return {
       type: "doughnut",
       data: {
-        labels: ["Positive", "Negative", "Neutral"],
+        labels: ["Positive", "Neutral", "Negative"],
         datasets: [
           {
             data: [300, 50, 100],
-            backgroundColor: ["#28a745", "#dc3545", "#ffc107"],
+            backgroundColor: ["#2ecc71", "#95a5a6", "#e74c3c"],
           },
         ],
       },
+      options: {
+        responsive: true,
+        plugins: {
+          legend: {
+            position: "bottom",
+          },
+        },
+      },
+      plugins: [
+        {
+          id: "centerText",
+          afterDraw: function (chart) {
+            const cssVarColor =
+              getComputedStyle(document.documentElement).getPropertyValue(
+                "--primary"
+              ) || "#000";
+            const cssFontSize =
+              getComputedStyle(document.documentElement).getPropertyValue(
+                "--font-down-2"
+              ) || "1.3em";
+            const cssFontFamily =
+              getComputedStyle(document.documentElement).getPropertyValue(
+                "--font-family"
+              ) || "sans-serif";
+
+            const { ctx, chartArea } = chart;
+            const centerX = (chartArea.left + chartArea.right) / 2;
+            const centerY = (chartArea.top + chartArea.bottom) / 2;
+
+            ctx.restore();
+            ctx.textAlign = "center";
+            ctx.textBaseline = "middle";
+            ctx.fillStyle = cssVarColor.trim();
+            ctx.font = `${cssFontSize.trim()} ${cssFontFamily.trim()}`;
+
+            // TODO: populate with actual tag / category title
+            ctx.fillText("member-experience", centerX, centerY);
+            ctx.save();
+          },
+        },
+      ],
     };
   }
 
   <template>
-    <div>
-      <Chart
-        @chartConfig={{this.chartConfig}}
-        class="admin-report-chart admin-report-doughnut"
-      />
+    {{! TODO each-loop based on data, display doughnut component }}
+    <div class="admin-report-sentiment-analysis">
+      <Chart @chartConfig={{this.chartConfig}} class="admin-report-doughnut" />
+      <Chart @chartConfig={{this.chartConfig}} class="admin-report-doughnut" />
+      <Chart @chartConfig={{this.chartConfig}} class="admin-report-doughnut" />
+      <Chart @chartConfig={{this.chartConfig}} class="admin-report-doughnut" />
+      <Chart @chartConfig={{this.chartConfig}} class="admin-report-doughnut" />
     </div>
   </template>
 }

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

@@ -9,3 +9,27 @@
     }
   }
 }
+
+.admin-report.sentiment-analyis {
+  .filters {
+    order: 1;
+    width: 100%;
+  }
+
+  .main {
+    order: 2;
+  }
+}
+
+.admin-report-sentiment-analysis {
+  margin-top: 1rem;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 2.5rem;
+  justify-items: center;
+
+  .admin-report-doughnut {
+    max-width: 300px; /* Adjust size */
+    max-height: 300px;
+  }
+}