From 62772076bfdd312b91533c1e27be46adb0d1072f Mon Sep 17 00:00:00 2001
From: Matthew Griffin <mgriffin@scottlogic.com>
Date: Mon, 15 Jul 2024 14:52:30 +0100
Subject: [PATCH] Add a custom formatter for data labels to include percentage
 value

---
 .../carbon-estimation.constants.ts              | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/src/app/carbon-estimation/carbon-estimation.constants.ts b/src/app/carbon-estimation/carbon-estimation.constants.ts
index 24c08fa3..7ec922dd 100644
--- a/src/app/carbon-estimation/carbon-estimation.constants.ts
+++ b/src/app/carbon-estimation/carbon-estimation.constants.ts
@@ -32,6 +32,22 @@ const customTooltip = ({
     <span class="tce-font-bold">${tooltipFormatter(series[seriesIndex][dataPointIndex])}</span></div></div>`;
 };
 
+const customDataLabel = (value: string | number | number[], {
+  seriesIndex,
+  dataPointIndex,
+  w,
+}: {
+  seriesIndex: number;
+  dataPointIndex: number;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  w: any;
+}) => {
+  const initialSeries = w.globals.initialSeries[seriesIndex];
+  const data = initialSeries.data[dataPointIndex];
+
+  return `${value} - ${tooltipFormatter(data.y)}`
+}
+
 export const chartOptions: ChartOptions = {
   legend: {
     show: true,
@@ -75,6 +91,7 @@ export const chartOptions: ChartOptions = {
     },
   },
   dataLabels: {
+    formatter: customDataLabel,
     style: {
       fontSize: '16px',
       fontFamily: 'ui-sans-serif, system-ui, sans-serif',