feat: support for formatting scale ticks

Author: Amrit Kashyap Borah

src/Shared/Components/Charts/types.ts

@@ -69,22 +69,26 @@ export type TypeAndDatasetsType =
            */
           datasets: SimpleDatasetForPie
           onChartClick?: OnChartClickHandler
+          yScaleTickFormat?: never
       } & Never<XYAxisMax>)
     | ({
           type: 'line'
           datasets: SimpleDatasetForLineAndArea[]
           onChartClick?: never
+          yScaleTickFormat?: (value: number) => string
       } & XYAxisMax)
     | ({
           type: 'area'
           datasets: SimpleDatasetForLineAndArea
           /* onChartClick is not applicable for area charts */
           onChartClick?: never
+          yScaleTickFormat?: (value: number) => string
       } & XYAxisMax)
     | ({
           type: Exclude<ChartType, 'pie' | 'line' | 'area'>
           datasets: SimpleDataset[]
           onChartClick?: OnChartClickHandler
+          yScaleTickFormat?: (value: number) => string
       } & XYAxisMax)
 
 export type ChartProps = {

src/Shared/Components/Charts/utils.tsx

@@ -181,6 +181,7 @@ export const getDefaultOptions = ({
         yAxisMax,
         xScaleTitle,
         yScaleTitle,
+        yScaleTickFormat,
     } = chartProps
     const baseOptions: ChartOptions = {
         responsive: true,
@@ -244,16 +245,28 @@ export const getDefaultOptions = ({
         },
     } satisfies ScaleOptions<'linear'>
 
+    const ticksWithCallback = {
+        ...commonScaleConfig.ticks,
+        callback: (value) => yScaleTickFormat(Number(value)),
+    } satisfies ScaleOptions<'linear'>['ticks']
+
     const commonXScaleConfig = {
         ...commonScaleConfig,
         max: xAxisMax,
         title: getScaleTickTitleConfig(xScaleTitle, appTheme),
+        ...(typeof yScaleTickFormat === 'function' && type === 'stackedBarHorizontal'
+            ? { ticks: ticksWithCallback }
+            : {}),
     } satisfies ScaleOptions<'linear'>
 
     const commonYScaleConfig = {
         ...commonScaleConfig,
         max: yAxisMax,
         title: getScaleTickTitleConfig(yScaleTitle, appTheme),
+        // for stackedBarHorizon
+        ...(typeof yScaleTickFormat === 'function' && type !== 'stackedBarHorizontal'
+            ? { ticks: ticksWithCallback }
+            : {}),
     } satisfies ScaleOptions<'linear'>
 
     switch (type) {