From f1381bdf50a220bc99cd3bb67ef1ce22cc25da1e Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Thu, 6 Feb 2025 12:46:41 -0700
Subject: [PATCH] Update useXAxis.ts

---
 .../hooks/useOptions/useXAxis.ts              | 22 +++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/web/src/components/charts/BusterChartJS/hooks/useOptions/useXAxis.ts b/web/src/components/charts/BusterChartJS/hooks/useOptions/useXAxis.ts
index 1d2fe294b..bc9fed9fb 100644
--- a/web/src/components/charts/BusterChartJS/hooks/useOptions/useXAxis.ts
+++ b/web/src/components/charts/BusterChartJS/hooks/useOptions/useXAxis.ts
@@ -4,7 +4,8 @@ import {
   ChartType,
   BusterChartProps,
   IColumnLabelFormat,
-  ComboChartAxis
+  ComboChartAxis,
+  XAxisConfig
 } from '@/components/charts/interfaces';
 import { useMemoizedFn } from 'ahooks';
 import { useMemo } from 'react';
@@ -145,6 +146,14 @@ export const useXAxis = ({
     };
   }, [xAxisLabelRotation]);
 
+  const timeUnit = useMemo(() => {
+    if (type === 'time' && xAxisTimeInterval) {
+      const isValidTimeUnit = arrayOfValidTimeUnits.includes(xAxisTimeInterval);
+      return isValidTimeUnit ? xAxisTimeInterval : false;
+    }
+    return false;
+  }, [type, xAxisTimeInterval]);
+
   const memoizedXAxisOptions: DeepPartial<ScaleChartOptions<'bar'>['scales']['x']> | undefined =
     useMemo(() => {
       if (isPieChart) return undefined;
@@ -165,7 +174,7 @@ export const useXAxis = ({
           autoSkipPadding: 3,
           align: 'center',
           time: {
-            unit: xAxisTimeInterval
+            unit: timeUnit
           },
           source: 'auto'
         },
@@ -184,9 +193,18 @@ export const useXAxis = ({
       stacked,
       type,
       grid,
+      timeUnit,
       rotation,
       tickCallback
     ]);
 
   return memoizedXAxisOptions;
 };
+
+const arrayOfValidTimeUnits: XAxisConfig['xAxisTimeInterval'][] = [
+  'day',
+  'week',
+  'month',
+  'quarter',
+  'year'
+];