diff --git a/apps/web/src/components/ui/charts/BusterChartJS/BusterChartJSComponent.tsx b/apps/web/src/components/ui/charts/BusterChartJS/BusterChartJSComponent.tsx index 720b79b49..524bc794e 100644 --- a/apps/web/src/components/ui/charts/BusterChartJS/BusterChartJSComponent.tsx +++ b/apps/web/src/components/ui/charts/BusterChartJS/BusterChartJSComponent.tsx @@ -194,6 +194,12 @@ export const BusterChartJSComponent = React.memo( return 'default'; }); + console.log('updateMode', updateMode); + console.log('data', data); + console.log('previousData', previousData); + console.log('options', options); + console.log('type', type); + return ( ; @@ -2036,3 +2039,117 @@ export const CategoryWithLegendHeaderAverage: Story = { showLegendHeadline: 'average' } }; + +const dataMetadata: DataMetadata = { + column_count: 2, + row_count: 13, + column_metadata: [ + { + name: 'order_month', + min_value: '2024-03-01T00:00:00.000Z', + max_value: '2025-03-01T00:00:00.000Z', + unique_values: 13, + simple_type: 'date', + type: 'timestamp' + }, + { + name: 'order_count', + min_value: 375, + max_value: 2326, + unique_values: 13, + simple_type: 'number', + type: 'int4' + } + ] +} as const; + +const test = createDefaultChartConfig({ + data_metadata: dataMetadata, + chart_config: { + columnLabelFormats: { + order_count: { + columnType: 'number', + style: 'number', + numberSeparatorStyle: ',', + replaceMissingDataWith: 0 + }, + order_month: { + columnType: 'date', + style: 'date', + numberSeparatorStyle: null, + replaceMissingDataWith: null, + dateFormat: 'MMM YYYY' + } + }, + barAndLineAxis: { + x: ['order_month'], + y: ['order_count'] + }, + selectedChartType: 'line' + } +}); +const data = [ + { + order_month: '2024-03-01T00:00:00', + order_count: 375 + }, + { + order_month: '2024-04-01T00:00:00', + order_count: 1707 + }, + { + order_month: '2024-05-01T00:00:00', + order_count: 1783 + }, + { + order_month: '2024-06-01T00:00:00', + order_count: 1815 + }, + { + order_month: '2024-07-01T00:00:00', + order_count: 1973 + }, + { + order_month: '2024-08-01T00:00:00', + order_count: 2139 + }, + { + order_month: '2024-09-01T00:00:00', + order_count: 2015 + }, + { + order_month: '2024-10-01T00:00:00', + order_count: 2130 + }, + { + order_month: '2024-11-01T00:00:00', + order_count: 2018 + }, + { + order_month: '2024-12-01T00:00:00', + order_count: 2300 + }, + { + order_month: '2025-01-01T00:00:00', + order_count: 2326 + }, + { + order_month: '2025-02-01T00:00:00', + order_count: 1982 + }, + { + order_month: '2025-03-01T00:00:00', + order_count: 871 + } +]; +const columnMetadata: BusterChartProps['columnMetadata'] = dataMetadata.column_metadata; + +console.log(test); + +export const ProblematicChartWithBlackLabels: Story = { + args: { + ...test, + data, + columnMetadata: columnMetadata + } +}; diff --git a/apps/web/src/lib/metrics/messageAutoChartHandler/messageAutoChartHandler.ts b/apps/web/src/lib/metrics/messageAutoChartHandler/messageAutoChartHandler.ts index ac9cc6a48..da9ab0c8e 100644 --- a/apps/web/src/lib/metrics/messageAutoChartHandler/messageAutoChartHandler.ts +++ b/apps/web/src/lib/metrics/messageAutoChartHandler/messageAutoChartHandler.ts @@ -101,7 +101,14 @@ const keySpecificHandlers: Partial< }, columnLabelFormats: (value: unknown, dataMetadata) => { const columnLabelFormats = value as ChartConfigProps['columnLabelFormats']; - return createDefaultColumnLabelFormats(columnLabelFormats, dataMetadata?.column_metadata); + console.log('columnLabelFormats', columnLabelFormats); + console.log('dataMetadata', dataMetadata); + const result = createDefaultColumnLabelFormats( + columnLabelFormats, + dataMetadata?.column_metadata + ); + console.log('result', result); + return result; }, columnSettings: (value: unknown, dataMetadata) => { const columnSettings = value as ChartConfigProps['columnSettings'];