diff --git a/web/src/api/asset_interfaces/metric/charts/columnLabelInterfaces.ts b/web/src/api/asset_interfaces/metric/charts/columnLabelInterfaces.ts index 04959a43e..6d01cd3b2 100644 --- a/web/src/api/asset_interfaces/metric/charts/columnLabelInterfaces.ts +++ b/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'. diff --git a/web/src/components/ui/charts/BusterChartJS/hooks/useOptions/useXAxis/useXAxis.ts b/web/src/components/ui/charts/BusterChartJS/hooks/useOptions/useXAxis/useXAxis.ts index c0475b217..1087ebde0 100644 --- a/web/src/components/ui/charts/BusterChartJS/hooks/useOptions/useXAxis/useXAxis.ts +++ b/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; - }, [type, xAxisTimeInterval]); + return derivedTimeUnit; + }, [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 diff --git a/web/src/components/ui/charts/stories/BusterChart.LineChart.stories.tsx b/web/src/components/ui/charts/stories/BusterChart.LineChart.stories.tsx index bd088aad0..4094eb8b4 100644 --- a/web/src/components/ui/charts/stories/BusterChart.LineChart.stories.tsx +++ b/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,