feat: add formatter for tooltip label values

Author: Elessar1802

src/Shared/Components/Charts/types.ts

@@ -114,6 +114,7 @@ export type ChartProps = {
          * @default 'top'
          */
         placement?: TooltipProps['placement']
+        datasetValueFormatter?: (value: number) => string | number
     }
     /** A title for x axis */
     xScaleTitle?: string

src/Shared/Components/Charts/utils.tsx

@@ -192,7 +192,11 @@ export const getDefaultOptions = ({
         yScaleTickFormat,
         xScaleTickFormat,
         xAxisLabels,
+        tooltipConfig,
     } = chartProps
+
+    const { datasetValueFormatter } = tooltipConfig ?? {}
+
     const baseOptions: ChartOptions = {
         responsive: true,
         devicePixelRatio: 3,
@@ -213,6 +217,16 @@ export const getDefaultOptions = ({
                 enabled: false,
                 position: 'nearest',
                 external: externalTooltipHandler,
+                ...(datasetValueFormatter
+                    ? {
+                          callbacks: {
+                              label({ dataset, raw }) {
+                                  // only number values are expected in raw as input in our types for yAxisValues is number[]
+                                  return `${dataset.label}: ${datasetValueFormatter(raw as number)}`
+                              },
+                          },
+                      }
+                    : {}),
             },
         },
         elements: {