feat: add xScaleTickFormat

Author: Elessar1802

src/Shared/Components/Charts/constants.ts

@@ -310,7 +310,7 @@ export const CHART_AXIS_LABELS_COLOR: Record<AppThemeType, string> = {
 
 export const CHART_CANVAS_BACKGROUND_COLORS: Record<AppThemeType, string> = {
     [AppThemeType.light]: 'rgb(255, 255, 255)',
-    [AppThemeType.dark]: 'rgb(21, 22, 31)',
+    [AppThemeType.dark]: 'rgb(30, 31, 40)',
 }
 
 export const LINE_DASH = [6, 6]

src/Shared/Components/Charts/types.ts

@@ -61,6 +61,11 @@ type XYAxisMax = {
 
 type OnChartClickHandler = (datasetName: string, value: number) => void
 
+type ScaleTickFormatCallbacks = Partial<{
+    xScaleTickFormat: (label: string, index: number) => string | string[] | number | number[]
+    yScaleTickFormat: (value: number, index: number) => string | string[] | number | number[]
+}>
+
 export type TypeAndDatasetsType =
     | ({
           type: 'pie'
@@ -69,27 +74,27 @@ export type TypeAndDatasetsType =
            */
           datasets: SimpleDatasetForPie
           onChartClick?: OnChartClickHandler
-          yScaleTickFormat?: never
-      } & Never<XYAxisMax>)
+      } & Never<XYAxisMax> &
+          Never<ScaleTickFormatCallbacks>)
     | ({
           type: 'line'
           datasets: SimpleDatasetForLineAndArea[]
           onChartClick?: never
-          yScaleTickFormat?: (value: number) => string
-      } & XYAxisMax)
+      } & XYAxisMax &
+          ScaleTickFormatCallbacks)
     | ({
           type: 'area'
           datasets: SimpleDatasetForLineAndArea
           /* onChartClick is not applicable for area charts */
           onChartClick?: never
-          yScaleTickFormat?: (value: number) => string
-      } & XYAxisMax)
+      } & XYAxisMax &
+          ScaleTickFormatCallbacks)
     | ({
           type: Exclude<ChartType, 'pie' | 'line' | 'area'>
           datasets: SimpleDataset[]
           onChartClick?: OnChartClickHandler
-          yScaleTickFormat?: (value: number) => string
-      } & XYAxisMax)
+      } & XYAxisMax &
+          ScaleTickFormatCallbacks)
 
 export type ChartProps = {
     id: string

src/Shared/Components/Charts/utils.tsx

@@ -190,6 +190,8 @@ export const getDefaultOptions = ({
         xScaleTitle,
         yScaleTitle,
         yScaleTickFormat,
+        xScaleTickFormat,
+        xAxisLabels,
     } = chartProps
     const baseOptions: ChartOptions = {
         responsive: true,
@@ -253,28 +255,42 @@ 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 }
-            : {}),
+        ticks: {
+            ...commonScaleConfig.ticks,
+            ...((type !== 'stackedBarHorizontal' && typeof xScaleTickFormat === 'function') ||
+            (type === 'stackedBarHorizontal' && typeof yScaleTickFormat === 'function')
+                ? {
+                      callback:
+                          type === 'stackedBarHorizontal'
+                              ? (value, index) => yScaleTickFormat(Number(value), index)
+                              : (_, index) => xScaleTickFormat(xAxisLabels[index], index),
+                  }
+                : {}),
+            autoSkip: false,
+        },
     } satisfies ScaleOptions<'linear'>
 
     const commonYScaleConfig = {
         ...commonScaleConfig,
         max: yAxisMax,
         title: getScaleTickTitleConfig(yScaleTitle, appTheme),
         // for stackedBarHorizon
-        ...(typeof yScaleTickFormat === 'function' && type !== 'stackedBarHorizontal'
-            ? { ticks: ticksWithCallback }
-            : {}),
+        ticks: {
+            ...commonScaleConfig.ticks,
+            ...((type === 'stackedBarHorizontal' && typeof xScaleTickFormat === 'function') ||
+            (type !== 'stackedBarHorizontal' && typeof yScaleTickFormat === 'function')
+                ? {
+                      callback:
+                          type !== 'stackedBarHorizontal'
+                              ? (value, index) => yScaleTickFormat(Number(value), index)
+                              : (_, index) => xScaleTickFormat(xAxisLabels[index], index),
+                  }
+                : {}),
+        },
     } satisfies ScaleOptions<'linear'>
 
     switch (type) {
@@ -555,7 +571,7 @@ export const buildChartTooltipFromContext = ({
             <div className="flexbox-col dc__gap-2">
                 {titleLines.map((titleLine, index) => (
                     // eslint-disable-next-line react/no-array-index-key
-                    <h6 key={index} className="m-0 fs-12 fw-6 lh-20 dc__truncate">
+                    <h6 key={index} className="m-0 fs-12 fw-6 lh-20 dc__word-break-all">
                         {titleLine}
                     </h6>
                 ))}