hack to force a timeunit max ticks

web/src/api/asset_interfaces/metric/charts/columnLabelInterfaces.ts

@@ -4,7 +4,7 @@ type ColumnLabelFormatBase = {
   style?: 'currency' | 'percent' | 'number' | 'date' | 'string';
   columnType?: SimplifiedColumnType;
   displayName?: string; //OPTIONAL: if this is not specifically requested by the user, then you should ignore this and the columnId will be used and formatted
-  numberSeparatorStyle?: ',' | null; //OPTIONAL: default is null. You should add this style if the column type requires a unique separator style. This will only apply if the format is set to 'number'.
+  numberSeparatorStyle?: ',' | null; //OPTIONAL: default is ','. You should add this style if the column type requires a unique separator style. This will only apply if the format is set to 'number'.
   minimumFractionDigits?: number; //OPTIONAL: default is 0. This is essentially used to set a minimum number of decimal places. This will only apply if the format is set to 'number'.
   maximumFractionDigits?: number; //OPTIONAL: default is 2. This is essentially used to set a maximum number of decimal places. This will only apply if the format is set to 'number'.
   multiplier?: number; //OPTIONAL: default is 1. This will only apply if the format is set to 'number', 'currency', or 'percent'.

web/src/components/ui/charts/BusterChartJS/hooks/useOptions/useXAxis/useXAxis.ts

@@ -108,6 +108,22 @@ export const useXAxis = ({
     return 'category';
   }, [isScatterChart, isComboChart, isLineChart, columnSettings, xAxisColumnFormats]);
 
+  const derivedTimeUnit = useMemo(() => {
+    if (type !== 'time') return false;
+
+    const fmt = xAxisColumnFormats[selectedAxis.x[0]].dateFormat;
+    if (!fmt || fmt === 'auto') return false;
+
+    // look for patterns in your DATE_FORMATS keys
+    if (/Y{2,4}/.test(fmt)) return 'year';
+    if (/Q{1,4}/.test(fmt)) return 'quarter';
+    if (/M{3,4}/.test(fmt)) return 'month';
+    if (/D{1,2}/.test(fmt)) return 'day';
+    if (/H{1,2}/.test(fmt)) return 'hour';
+    // fall back
+    return false;
+  }, [xAxisColumnFormats, selectedAxis.x]);
+
   const title = useXAxisTitle({
     xAxis: selectedAxis.x,
     columnLabelFormats,
@@ -183,8 +199,10 @@ export const useXAxis = ({
       const isValidTimeUnit = arrayOfValidTimeUnits.includes(xAxisTimeInterval);
       return isValidTimeUnit ? xAxisTimeInterval : false;
     }
-    return false;
+    return derivedTimeUnit;
-  }, [type, xAxisTimeInterval]);
+  }, [type, derivedTimeUnit, xAxisTimeInterval]);
+
+  console.log('timeUnit', { timeUnit, derivedTimeUnit });
 
   const offset = useMemo(() => {
     if (isScatterChart) return false;
@@ -214,7 +232,7 @@ export const useXAxis = ({
             enabled: false //test
           },
           autoSkip: false,
-          maxTicksLimit: type === 'time' ? 18 : undefined,
+          maxTicksLimit: type === 'time' ? (timeUnit === 'month' ? 11 : 18) : undefined,
           sampleSize: type === 'time' ? 24 : undefined,
           display: xAxisShowAxisLabel,
           callback: tickCallback as any, //I need to use null for auto date

web/src/components/ui/charts/stories/BusterChart.LineChart.stories.tsx

@@ -192,6 +192,23 @@ export const AutoDateFormat_TimeIntervalTest_Days_WithForcedUnit: Story = {
   }
 };
 
+export const AutoDateFormat_TimeIntervalTest_Days_WithForcedUnit_ManyDays: Story = {
+  args: {
+    ...AutoDateFormat_TimeIntervalTest_Days_WithForcedUnit.args,
+    data: Array.from({ length: 366 }, (_, i) => ({
+      date: dayjs('2024-01-01').add(i, 'day').toISOString(),
+      sales: addNoise(i * 15 + 55, 10)
+    }))
+  }
+};
+
+export const AutoDateFormat_TimeIntervalTest_Days_WithAutoUnit_ManyDays: Story = {
+  args: {
+    ...AutoDateFormat_TimeIntervalTest_Days_WithForcedUnit_ManyDays.args,
+    xAxisTimeInterval: undefined
+  }
+};
+
 export const AutoDateFormat_TimeIntervalTest_Days_WithForcedUnit_UnevenDays: Story = {
   args: {
     ...AutoDateFormat_TimeIntervalTest_Days_WithForcedUnit.args,