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 1d8c51277..c0475b217 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 @@ -211,7 +211,7 @@ export const useXAxis = ({ ticks: { ...rotation, major: { - enabled: true //test + enabled: false //test }, autoSkip: false, maxTicksLimit: type === 'time' ? 18 : undefined, 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 950b20d22..c7ca9049b 100644 --- a/web/src/components/ui/charts/stories/BusterChart.LineChart.stories.tsx +++ b/web/src/components/ui/charts/stories/BusterChart.LineChart.stories.tsx @@ -51,7 +51,63 @@ export const Default: Story = { } }; -export const TimeIntervalTest_MonthWithForcedUnit: Story = { +export const AutoDateFormat_TimeIntervalTest_MonthWithForcedUnit_ManyMonths: Story = { + args: { + selectedChartType: ChartType.Line, + xAxisTimeInterval: 'month', + data: Array.from({ length: 99 }, (_, i) => ({ + date: dayjs('2024-01-01').add(i, 'month').toISOString(), + sales: addNoise(i * 15 + 55, 10) + })), + className: 'resize overflow-auto min-w-[250px] h-[400px]', + barAndLineAxis: { + x: ['date'], + y: ['sales'], + category: [] + }, + columnLabelFormats: { + date: { + columnType: 'date', + style: 'date', + dateFormat: 'auto' + } satisfies IColumnLabelFormat, + sales: { + columnType: 'number', + style: 'currency', + currency: 'USD' + } satisfies IColumnLabelFormat + } + } +}; + +export const AutoDateFormat_TimeIntervalTest_MonthWithAutoUnit_ManyMonths: Story = { + args: { + ...AutoDateFormat_TimeIntervalTest_MonthWithForcedUnit_ManyMonths.args, + xAxisTimeInterval: undefined + } +}; + +export const AutoDateFormat_TimeIntervalTest_UnevenMonthsForcedUnit_ManyMonths: Story = { + args: { + ...AutoDateFormat_TimeIntervalTest_MonthWithForcedUnit_ManyMonths.args, + data: Array.from({ length: 99 }) + .map((_, i) => ({ + index: i, + date: dayjs('2024-01-01').add(i, 'month').toISOString(), + sales: addNoise(i * 15 + 55, 10) + })) + .filter(({ index }) => index !== 3 && index !== 5) + } +}; + +export const AutoDateFormat_TimeIntervalTest_UnevenMonthsAutoUnit_ManyMonths: Story = { + args: { + ...AutoDateFormat_TimeIntervalTest_UnevenMonthsForcedUnit_ManyMonths.args, + xAxisTimeInterval: undefined + } +}; + +export const AutoDateFormat_TimeIntervalTest_MonthWithForcedUnit: Story = { args: { selectedChartType: ChartType.Line, xAxisTimeInterval: 'month', @@ -80,14 +136,34 @@ export const TimeIntervalTest_MonthWithForcedUnit: Story = { } }; -export const TimeIntervalTest_MonthWithAutoUnit: Story = { +export const AutoDateFormat_TimeIntervalTest_MonthWithAutoUnit: Story = { args: { - ...TimeIntervalTest_MonthWithForcedUnit.args, + ...AutoDateFormat_TimeIntervalTest_MonthWithForcedUnit.args, xAxisTimeInterval: undefined } }; -export const TimeIntervalTest_Days_WithForcedUnit: Story = { +export const AutoDateFormat_TimeIntervalTest_UnevenMonthsForcedUnit: Story = { + args: { + ...AutoDateFormat_TimeIntervalTest_MonthWithForcedUnit.args, + data: Array.from({ length: 12 }) + .map((_, i) => ({ + index: i, + date: dayjs('2024-01-01').add(i, 'month').toISOString(), + sales: addNoise(i * 15 + 55, 10) + })) + .filter(({ index }) => index !== 3 && index !== 5) + } +}; + +export const AutoDateFormat_TimeIntervalTest_UnevenMonthsAutoUnit: Story = { + args: { + ...AutoDateFormat_TimeIntervalTest_UnevenMonthsForcedUnit.args, + xAxisTimeInterval: undefined + } +}; + +export const AutoDateFormat_TimeIntervalTest_Days_WithForcedUnit: Story = { args: { selectedChartType: ChartType.Line, xAxisTimeInterval: 'day', @@ -116,13 +192,40 @@ export const TimeIntervalTest_Days_WithForcedUnit: Story = { } }; -export const TimeIntervalTest_Days_WithAutoUnit: Story = { +export const AutoDateFormat_TimeIntervalTest_Days_WithForcedUnit_UnevenDays: Story = { args: { - ...TimeIntervalTest_Days_WithForcedUnit.args, + ...AutoDateFormat_TimeIntervalTest_Days_WithForcedUnit.args, + data: Array.from({ length: 31 }) + .filter((_, i) => i !== 1 && i !== 15 && i !== 16) + .map((_, i) => ({ + date: dayjs('2024-01-01').add(i, 'day').toISOString(), + sales: addNoise(i * 15 + 55, 10) + })) + } +}; + +export const AutoDateFormat_TimeIntervalTest_Days_WithAutoUnit_UnevenDays: Story = { + args: { + ...AutoDateFormat_TimeIntervalTest_Days_WithForcedUnit_UnevenDays.args, xAxisTimeInterval: undefined } }; +export const FixedDateFormat_TimeIntervalTest_MonthWithForcedUnit: Story = { + args: { + ...AutoDateFormat_TimeIntervalTest_MonthWithForcedUnit.args, + xAxisTimeInterval: 'month', + columnLabelFormats: { + ...AutoDateFormat_TimeIntervalTest_MonthWithForcedUnit.args!.columnLabelFormats, + date: { + columnType: 'date', + style: 'date', + dateFormat: 'MMM' + } satisfies IColumnLabelFormat + } + } +}; + // Simple X and Y axis with numeric values export const NumericXY: Story = { args: {