add a lot of logs for charting

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 (
         <ChartMountedWrapper>
           <Chart

apps/web/src/components/ui/charts/BusterChartJS/ChartJSTheme.ts

@@ -44,6 +44,8 @@ const backgroundColor = isServer
   ? '#ffffff'
   : getComputedStyle(document.documentElement).getPropertyValue('--color-background');
 
+console.log('backgroundColor', backgroundColor);
+
 ChartJS.register(
   LineController,
   BarController,
@@ -119,7 +121,7 @@ ChartJS.defaults.font = {
     return truncateText(this.getLabelForValue(value as number), 18);
   };
 });
-
+console.log(ChartJS.defaults);
 for (const scale of [
   ChartJS.defaults.scales.category,
   ChartJS.defaults.scales.linear,

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

@@ -4,11 +4,14 @@ import {
   DEFAULT_COLUMN_LABEL_FORMAT,
   type ColumnLabelFormat,
   type ColumnSettings,
+  type DataMetadata,
   type Trendline
 } from '@buster/server-shared/metrics';
 import { addNoise, generateLineChartData } from '../../../../mocks/chart/chartMocks';
 import type { BusterChart } from '../BusterChart';
 import { sharedMeta } from './BusterChartShared';
+import { createDefaultChartConfig } from '@/lib/metrics/messageAutoChartHandler';
+import type { BusterChartProps } from '@/api/asset_interfaces';
 
 type LineChartData = ReturnType<typeof generateLineChartData>;
 
@@ -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
+  }
+};

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'];