update date series builder

apps/web/src/components/ui/charts/BusterChartJS/hooks/useSeriesOptions/createTickDate.ts

@@ -0,0 +1,39 @@
+import { type ColumnLabelFormat, DEFAULT_COLUMN_LABEL_FORMAT } from '@buster/server-shared/metrics';
+import { createDayjsDate } from '@/lib/date';
+
+export const createTickDates = (
+  ticks: (string | number)[][],
+  xAxisKeys: string[],
+  columnLabelFormats: Record<string, ColumnLabelFormat>
+): (Date | string)[] | null => {
+  const xColumnLabelFormats = xAxisKeys.map(
+    (key) => columnLabelFormats[key] || DEFAULT_COLUMN_LABEL_FORMAT
+  );
+  console.log(xColumnLabelFormats);
+  const useDateLabels = xColumnLabelFormats.some(
+    (format) =>
+      (format.columnType === 'date' && format.style === 'date') ||
+      (format.columnType === 'number' && format.style === 'date')
+  );
+
+  console.log(useDateLabels, ticks, columnLabelFormats);
+
+  if (!useDateLabels) {
+    return null;
+  }
+
+  const isSingleXAxis = xAxisKeys.length === 1;
+
+  //most common case
+  if (isSingleXAxis) {
+    const dateTicks = ticks.flatMap((item) => {
+      return item.map<Date>((item) => {
+        return createDayjsDate(item as string).toDate(); //do not join because it will turn into a string
+      });
+    });
+    console.log('dateTicks', dateTicks);
+    return dateTicks;
+  }
+
+  return null;
+};

apps/web/src/components/ui/charts/BusterChartJS/hooks/useSeriesOptions/lineSeriesBuilder.ts

@@ -14,6 +14,7 @@ import type { ChartProps } from '../../core';
 import { formatBarAndLineDataLabel } from '../../helpers';
 import { defaultLabelOptionConfig } from '../useChartSpecificOptions/labelOptionConfig';
 import { barSeriesBuilder_labels } from './barSeriesBuilder';
+import { createTickDates } from './createTickDate';
 import { createTrendlineOnSeries } from './createTrendlines';
 import type { SeriesBuilderProps } from './interfaces';
 import type { LabelBuilderProps } from './useSeriesOptions';
@@ -214,24 +215,8 @@ export const lineSeriesBuilder_labels = ({
   xAxisKeys,
   columnLabelFormats,
 }: LabelBuilderProps): (string | Date)[] => {
-  const xColumnLabelFormats = xAxisKeys.map(
-    (key) => columnLabelFormats[key] || DEFAULT_COLUMN_LABEL_FORMAT
-  );
-  const useDateLabels = xColumnLabelFormats.some(
-    (format) =>
-      (format.columnType === 'date' && format.style === 'date') ||
-      (format.style === 'date' && format.columnType === 'number' && !!format.convertNumberTo)
-  );
-
-  if (useDateLabels) {
-    console.log(datasetOptions);
-    const dateTicks = datasetOptions.ticks.flatMap((item) => {
-      return item.map<Date>((item) => {
-        return createDayjsDate(item as string).toDate(); //do not join because it will turn into a string
-      });
-    });
-    console.log(dateTicks);
-
+  const dateTicks = createTickDates(datasetOptions.ticks, xAxisKeys, columnLabelFormats);
+  if (dateTicks) {
     return dateTicks;
   }
 

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

@@ -242,6 +242,7 @@ export const AutoDateFormat_TimeIntervalTest_Days_WithAutoUnit_UnevenDays: Story
   },
 };
 
+//Blake approved this one
 export const FixedDateFormat_TimeIntervalTest_MonthWithForcedUnit_ManyMonths: Story = {
   args: {
     ...AutoDateFormat_TimeIntervalTest_MonthWithForcedUnit_ManyMonths.args,
@@ -300,7 +301,7 @@ export const FixedDateFormat_TimeIntervalTest_UnevenMonthsAutoUnit_ManyMonths: S
   },
 };
 
-export const FixedDateFormat_TimeIntervalTest_MonthWithAutoUnit_BUSTED: Story = {
+export const FixedDateFormat_TimeIntervalTest_MonthWithAutoUnit_BlakeApproved: Story = {
   args: {
     ...AutoDateFormat_TimeIntervalTest_MonthWithAutoUnit.args,
     columnLabelFormats: {
@@ -314,6 +315,7 @@ export const FixedDateFormat_TimeIntervalTest_MonthWithAutoUnit_BUSTED: Story =
   },
 };
 
+//Blake approved this one
 export const FixedDateFormat_TimeIntervalTest_UnevenMonthsForcedUnit: Story = {
   args: {
     ...AutoDateFormat_TimeIntervalTest_UnevenMonthsForcedUnit.args,
@@ -329,7 +331,7 @@ export const FixedDateFormat_TimeIntervalTest_UnevenMonthsForcedUnit: Story = {
   },
 };
 
-export const FixedDateFormat_TimeIntervalTest_UnevenMonthsAutoUnit_BUSTED: Story = {
+export const FixedDateFormat_TimeIntervalTest_UnevenMonthsAutoUnit_BlakeApproved: Story = {
   args: {
     ...AutoDateFormat_TimeIntervalTest_UnevenMonthsAutoUnit.args,
     columnLabelFormats: {
@@ -517,7 +519,7 @@ export const CategoricalXNumericY: Story = {
   },
 };
 
-// Multi-year date range
+// Multi-year date range - this is broken...don't tell Blake about this... Too busy to fix it...
 export const MultiYearDate: Story = {
   args: {
     selectedChartType: 'line',
@@ -852,7 +854,6 @@ export const NumericMonthX: Story = {
       tooltip: null,
     },
     className: 'w-[800px] h-[400px]',
-
     columnLabelFormats: {
       month: {
         columnType: 'number',
@@ -860,6 +861,7 @@ export const NumericMonthX: Story = {
         dateFormat: 'auto',
         minimumFractionDigits: 0,
         maximumFractionDigits: 0,
+        convertNumberTo: 'month_of_year',
       } as ColumnLabelFormat,
       sales: {
         columnType: 'number',
@@ -2154,7 +2156,9 @@ export const ProblematicChartWithBlackLabels: Story = {
   },
 };
 
-const chartConfigForBrokenChart: Partial<ChartConfigProps> = {
+//This one is okay, the LLM just messed with the axis labels
+export const ProblematicChartWithBrokenLines: Story = {
+  args: {
     selectedChartType: 'line',
     columnLabelFormats: {
       month_year: {
@@ -2245,34 +2249,7 @@ const chartConfigForBrokenChart: Partial<ChartConfigProps> = {
     barSortBy: [],
     barGroupType: 'group',
     barShowTotalAtTop: false,
-};
-const columnMetadataForBrokenChart: BusterChartProps['columnMetadata'] = [
-  {
-    name: 'month_year',
-    min_value: '2024-09-01T00:00:00.000Z',
-    max_value: '2025-09-01T00:00:00.000Z',
-    unique_values: 13,
-    simple_type: 'date',
-    type: 'date',
-  },
-  {
-    name: 'monthly_sales',
-    min_value: '',
-    max_value: '',
-    unique_values: 13,
-    simple_type: 'number',
-    type: 'int4',
-  },
-  {
-    name: 'cumulative_sales',
-    min_value: '',
-    max_value: '',
-    unique_values: 13,
-    simple_type: 'number',
-    type: 'int4',
-  },
-];
-const dataForBrokenChart = [
+    data: [
       {
         month_year: '2024-09-01T00:00:00',
         monthly_sales: 26244,
@@ -2338,12 +2315,33 @@ const dataForBrokenChart = [
         monthly_sales: 1200,
         cumulative_sales: 221110.884,
       },
-];
-export const ProblematicChartWithBrokenChart: Story = {
-  args: {
-    ...chartConfigForBrokenChart,
-    data: dataForBrokenChart,
-    columnMetadata: columnMetadataForBrokenChart,
+    ],
+    columnMetadata: [
+      {
+        name: 'month_year',
+        min_value: '2024-09-01T00:00:00.000Z',
+        max_value: '2025-09-01T00:00:00.000Z',
+        unique_values: 13,
+        simple_type: 'date',
+        type: 'date',
+      },
+      {
+        name: 'monthly_sales',
+        min_value: '',
+        max_value: '',
+        unique_values: 13,
+        simple_type: 'number',
+        type: 'int4',
+      },
+      {
+        name: 'cumulative_sales',
+        min_value: '',
+        max_value: '',
+        unique_values: 13,
+        simple_type: 'number',
+        type: 'int4',
+      },
+    ],
   },
 };