diff --git a/apps/web/src/components/ui/charts/BusterChartJS/hooks/useOptions/useXAxis/useXAxis.ts b/apps/web/src/components/ui/charts/BusterChartJS/hooks/useOptions/useXAxis/useXAxis.ts index 9e5bc6578..310c1cc40 100644 --- a/apps/web/src/components/ui/charts/BusterChartJS/hooks/useOptions/useXAxis/useXAxis.ts +++ b/apps/web/src/components/ui/charts/BusterChartJS/hooks/useOptions/useXAxis/useXAxis.ts @@ -259,8 +259,9 @@ export const useXAxis = ({ ticks: { ...rotation, major: { - enabled: false, //test + enabled: false, }, + source: type === 'time' ? ('data' as const) : undefined, autoSkip: true, maxTicksLimit: type === 'time' ? (timeUnit === 'month' ? 18 : 18) : undefined, // sampleSize: type === 'time' ? 28 : undefined, //DO NOT USE THIS. IT BREAK TIME SCALES @@ -270,6 +271,7 @@ export const useXAxis = ({ time: { unit: timeUnit, }, + includeBounds: true, }, grid, } satisfies DeepPartial['scales']['x']>; diff --git a/apps/web/src/components/ui/charts/stories/BusterChart.LineChart.stories.tsx b/apps/web/src/components/ui/charts/stories/BusterChart.LineChart.stories.tsx index deb306477..83366e24f 100644 --- a/apps/web/src/components/ui/charts/stories/BusterChart.LineChart.stories.tsx +++ b/apps/web/src/components/ui/charts/stories/BusterChart.LineChart.stories.tsx @@ -2631,7 +2631,7 @@ export const WithQuarterAndYearXAxis: Story = { }, }; -export const WithQuarterNumber: Story = { +export const WithQuarterNumber_PermantBroken: Story = { args: { colors: [ '#B399FD', @@ -2913,3 +2913,206 @@ export const WithQuarterNumber: Story = { ], }, }; + +export const WithProblematicXAxis: Story = { + args: { + colors: [ + '#B399FD', + '#FC8497', + '#FBBC30', + '#279EFF', + '#E83562', + '#41F8FF', + '#F3864F', + '#C82184', + '#31FCB4', + '#E83562', + ], + barLayout: 'vertical', + barSortBy: [], + goalLines: [], + gridLines: true, + pieSortBy: 'value', + showLegend: null, + trendlines: [], + scatterAxis: { + x: [], + y: [], + size: [], + tooltip: null, + category: [], + }, + barGroupType: 'group', + metricHeader: null, + pieChartAxis: { + x: [], + y: [], + tooltip: null, + }, + lineGroupType: null, + pieDonutWidth: 40, + xAxisDataZoom: false, + barAndLineAxis: { + x: ['month'], + y: ['total_units_sold'], + tooltip: null, + category: [], + }, + columnSettings: {}, + comboChartAxis: { + x: [], + y: [], + y2: [], + tooltip: null, + category: [], + }, + disableTooltip: false, + metricColumnId: '', + scatterDotSize: [3, 15], + xAxisAxisTitle: null, + yAxisAxisTitle: null, + yAxisScaleType: 'linear', + metricSubHeader: null, + y2AxisAxisTitle: null, + y2AxisScaleType: 'linear', + metricValueLabel: null, + pieLabelPosition: 'none', + tableColumnOrder: null, + barShowTotalAtTop: false, + categoryAxisTitle: null, + pieDisplayLabelAs: 'number', + pieShowInnerLabel: true, + selectedChartType: 'line', + tableColumnWidths: null, + xAxisTimeInterval: null, + columnLabelFormats: { + month: { + isUTC: false, + style: 'date', + prefix: '', + suffix: '', + currency: 'USD', + columnType: 'date', + dateFormat: 'MMM YYYY', + multiplier: 1, + displayName: '', + compactNumbers: false, + convertNumberTo: null, + useRelativeTime: false, + numberSeparatorStyle: null, + maximumFractionDigits: 2, + minimumFractionDigits: 0, + makeLabelHumanReadable: true, + replaceMissingDataWith: null, + }, + total_units_sold: { + isUTC: false, + style: 'number', + prefix: '', + suffix: '', + currency: 'USD', + columnType: 'number', + dateFormat: 'auto', + multiplier: 1, + displayName: 'Total Units Sold', + compactNumbers: false, + convertNumberTo: null, + useRelativeTime: false, + numberSeparatorStyle: ',', + maximumFractionDigits: 2, + minimumFractionDigits: 0, + makeLabelHumanReadable: true, + replaceMissingDataWith: 0, + }, + }, + pieInnerLabelTitle: null, + showLegendHeadline: false, + xAxisLabelRotation: 'auto', + xAxisShowAxisLabel: true, + xAxisShowAxisTitle: true, + yAxisShowAxisLabel: true, + yAxisShowAxisTitle: true, + y2AxisShowAxisLabel: true, + y2AxisShowAxisTitle: true, + metricValueAggregate: 'sum', + tableColumnFontColor: null, + tableHeaderFontColor: null, + yAxisStartAxisAtZero: null, + y2AxisStartAxisAtZero: true, + pieInnerLabelAggregate: 'sum', + pieMinimumSlicePercentage: 0, + tableHeaderBackgroundColor: null, + data: [ + { + month: '2024-09-01T00:00:00.000Z', + total_units_sold: 15815, + }, + { + month: '2024-10-01T00:00:00.000Z', + total_units_sold: 18673, + }, + { + month: '2024-11-01T00:00:00.000Z', + total_units_sold: 11519, + }, + { + month: '2024-12-01T00:00:00.000Z', + total_units_sold: 14671, + }, + { + month: '2025-01-01T00:00:00.000Z', + total_units_sold: 15258, + }, + { + month: '2025-02-01T00:00:00.000Z', + total_units_sold: 9125, + }, + { + month: '2025-03-01T00:00:00.000Z', + total_units_sold: 11096, + }, + { + month: '2025-04-01T00:00:00.000Z', + total_units_sold: 11291, + }, + { + month: '2025-05-01T00:00:00.000Z', + total_units_sold: 11996, + }, + { + month: '2025-06-01T00:00:00.000Z', + total_units_sold: 15314, + }, + { + month: '2025-07-01T00:00:00.000Z', + total_units_sold: 15622, + }, + { + month: '2025-08-01T00:00:00.000Z', + total_units_sold: 5183, + }, + { + month: '2025-09-01T00:00:00.000Z', + total_units_sold: 1786, + }, + ], + columnMetadata: [ + { + name: 'month', + min_value: '2024-09-01T00:00:00.000Z', + max_value: '2025-09-01T00:00:00.000Z', + unique_values: 13, + simple_type: 'date', + type: 'timestamp', + }, + { + name: 'total_units_sold', + min_value: 1786, + max_value: 18673, + unique_values: 13, + simple_type: 'number', + type: 'int8', + }, + ], + }, +};