feat: add horizontal bar chart double datalabel

weni-ai · Jan 8, 2025 · 549ac40 · 549ac40
1 parent bc46c88
commit 549ac40
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 17 deletions.
diff --git a/src/components/insights/charts/HorizontalBarChart.vue b/src/components/insights/charts/HorizontalBarChart.vue
@@ -117,6 +117,7 @@ export default {
         scales: {
           x: {
             display: false,
+            grace: 15,
           },
           y: {
             display: true,
@@ -140,6 +141,12 @@ export default {
         backgroundColor: '#00A49F',
         hoverBackgroundColor: '#00DED2',
         plugins: {
+          datalabels: {
+            display: false,
+          },
+          doubleDataLabel: {
+            datalabelsSuffix: this.datalabelsSuffix,
+          },
           horizontalBackgroundColorPlugin: {
             backgroundColor: '#C6FFF7',
           },
@@ -150,20 +157,6 @@ export default {
               label: () => false,
             },
           },
-          datalabels: {
-            formatter: (value) => {
-              return value + this.datalabelsSuffix;
-            },
-            color: '#fff',
-            anchor: 'end',
-            align: 'start',
-            textStrokeColor: '#fff',
-            font: {
-              size: '12',
-              weight: '700',
-              lineHeight: 1.66,
-            },
-          },
         },
       };
     },
@@ -183,11 +176,11 @@ export default {
           ctx.beginPath();
           ctx.fillStyle = plugins.backgroundColor;
 
-          data.datasets[0].data.forEach((_point, index) => {
+          data.datasets[0].data.forEach((_dataPoint, index) => {
             ctx.roundRect(
               left, // start position
               y.getPixelForValue(index) - barThickness / 2, // align background to center bar
-              width - 30, // background padding right
+              width - 160, // background padding right
               barThickness,
               4, // border radius
             );
@@ -197,8 +190,62 @@ export default {
         },
       };
     },
+    doubleDataLabel() {
+      return {
+        id: 'doubleDataLabel',
+        afterDatasetsDraw(chart, _args, plugins) {
+          if (plugins.display === false) return;
+          const {
+            ctx,
+            data: { datasets },
+            chartArea: { width },
+          } = chart;
+
+          ctx.save();
+
+          chart.getDatasetMeta(0).data.forEach((dataPoint, index) => {
+            const { data, fullValues } = datasets[0];
+
+            ctx.textBaseline = 'middle';
+            ctx.font = 'bold 16px Lato';
+            ctx.fillStyle = '#4E5666';
+
+            const startTextPosition = width - 42;
+
+            ctx.fillText(
+              `${data[index]} ${plugins.datalabelsSuffix}`,
+              startTextPosition,
+              dataPoint.y,
+            );
+
+            const valueCharCount = String(data[index]).length;
+
+            const widthCompensationMap = {
+              1: 30,
+              3: 40,
+              4: 50,
+              5: 60,
+            };
+
+            ctx.font = 'normal 14px Lato';
+            ctx.fillStyle = '#67738B';
+
+            ctx.fillText(
+              `| ${fullValues[index]}`,
+              startTextPosition + widthCompensationMap[valueCharCount] || 0,
+              dataPoint.y,
+            );
+          });
+        },
+      };
+    },
     chartPlugins() {
-      return [ChartDataLabels, Tooltip, this.horizontalBackgroundColorPlugin];
+      return [
+        ChartDataLabels,
+        Tooltip,
+        this.horizontalBackgroundColorPlugin,
+        this.doubleDataLabel,
+      ];
     },
     graphContainerHeight() {
       const barSpacingY = 4;

diff --git a/src/components/insights/charts/LineChart.vue b/src/components/insights/charts/LineChart.vue
@@ -68,6 +68,7 @@ export default {
     },
     isLoading: Boolean,
   },
+
   emits: ['seeMore'],
 
   setup() {
@@ -159,6 +160,9 @@ export default {
               },
             },
           },
+          doubleDataLabel: {
+            display: false,
+          },
           datalabels: {
             display: false,
           },

diff --git a/src/components/insights/widgets/DynamicWidget.vue b/src/components/insights/widgets/DynamicWidget.vue
@@ -187,12 +187,14 @@ export default {
 
       const labels = data.map((item) => item.label);
       const values = data.map((item) => item.value);
+      const fullValues = data.map((item) => item.full_value);
 
       const newData = {
         labels,
         datasets: [
           {
             data: values,
+            fullValues,
           },
         ],
       };