hover on donut shows percentage

knadh · Oct 30, 2024 · b6cd984 · b6cd984
1 parent 2c02e01
commit b6cd984
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 11 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');
 
@@ -146,6 +161,7 @@ export default {
     }
 
     const conf = { ...def, data: this.$props.data };
+    console.log("Inside Chart.vue:",conf);
     if (this.$props.onClick) {
       conf.options.onClick = this.$props.onClick;
     }

diff --git a/frontend/src/views/CampaignAnalytics.vue b/frontend/src/views/CampaignAnalytics.vue
@@ -209,11 +209,9 @@ 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 lines = campIDs.map((id, n) => {1
         const cId = parseInt(id, 10);
         const points = data.filter((item) => item.campaignId === cId);
 
@@ -229,20 +227,23 @@ export default Vue.extend({
 
       // Donut.
       const labels = [];
-      const points = campIDs.map((id) => {
-        labels.push(camps[id].name);
+      const points = [];
+      let totalSent = 0;
+      campIDs.forEach((id) => {
+        // labels.push(camps[id].name);
         const cId = parseInt(id, 10);
         const sum = data.reduce((a, item) => (item.campaignId === cId ? a + item.count : a), 0);
-        return sum;
+        totalSent = camps[id].sent;
+        points.push(sum);
+        points.push(2000-sum);
       });
-
       const donut = {
         labels,
         datasets: [{
-          data: points, backgroundColor: chartColors, borderWidth: 6,
+          data: points, backgroundColor: chartColors, borderWidth: 6, totalSent: totalSent
         }],
       };
-
+      console.log("whats in my donut?",donut);
       return { points: { datasets: lines }, donut };
     },
 
@@ -269,8 +270,8 @@ 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),
         from: this.form.from,