Add % on campaign analytics pie chart hover (#2124)

Co-authored-by: Kailash Nadh <[email protected]>
knadh · Nov 5, 2024 · 0392582 · 0392582
1 parent c35ed68
commit 0392582
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/frontend/src/components/Chart.vue b/frontend/src/components/Chart.vue
@@ -29,6 +29,15 @@ 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);
+            return `${val} (${percentage}%)`;
+          },
+        },
       },
     },
   },

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),