hover on donut shows percentage

knadh · Oct 31, 2024 · 9f0e1e3 · 9f0e1e3
1 parent 2c02e01
commit 9f0e1e3
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 5 deletions.
diff --git a/frontend/src/components/Chart.vue b/frontend/src/components/Chart.vue
@@ -29,6 +29,21 @@ const DEFAULT_DONUT = {
         },
         bodySpacing: 10,
         padding: 10,
+        callbacks: {
+          label: (item) => {
+            const data = item.chart.data.datasets[item.datasetIndex];
+            const total = data.data.reduce((acc, val) => acc + val, 0);
+            const val = data.data[item.dataIndex];
+            const percentage = ((val / total) * 100).toFixed(2);
+            const MAX_LABEL_LENGTH = 20;
+            let displayLabel = item.label;
+            if (displayLabel.length > MAX_LABEL_LENGTH) {
+              displayLabel = `${displayLabel.slice(0, MAX_LABEL_LENGTH)}...`; // Truncate
+              return [`${displayLabel}:`, `${val} (${percentage}%)`];
+            }
+            return `${displayLabel}: ${val} (${percentage}%)`;
+          },
+        },
       },
     },
   },
@@ -128,7 +143,7 @@ export default {
     type: { type: String, default: 'line' },
     onClick: { type: Function, default: () => { } },
   },
-
+  
   mounted() {
     const ctx = this.$el.querySelector('.chart-canvas');
 

diff --git a/frontend/src/views/CampaignAnalytics.vue b/frontend/src/views/CampaignAnalytics.vue
@@ -209,9 +209,7 @@ export default Vue.extend({
         out[c.id] = c;
         return out;
       }, {});
-
       const campIDs = Object.keys(camps);
-
       // datasets[] array for line chart.
       const lines = campIDs.map((id, n) => {
         const cId = parseInt(id, 10);
@@ -242,7 +240,6 @@ export default Vue.extend({
           data: points, backgroundColor: chartColors, borderWidth: 6,
         }],
       };
-
       return { points: { datasets: lines }, donut };
     },
 
@@ -269,7 +266,6 @@ export default Vue.extend({
 
     getData(typ, camps) {
       this.charts[typ].loading = true;
-
       // Call the HTTP API.
       this.charts[typ].fn({
         id: camps.map((c) => c.id),