bar and line tooltip helper update

apps/web/src/components/ui/charts/BusterChartJS/core/plugins/chartjs-plugin-dayjs.ts

@@ -1,4 +1,3 @@
-import { DEFAULT_DATE_FORMAT_QUARTER } from '@buster/server-shared/metrics';
 import type { TimeUnit } from 'chart.js';
 import { _adapters } from 'chart.js';
 import dayjs, { type QUnitType } from 'dayjs';

apps/web/src/components/ui/charts/BusterChartJS/hooks/useOptions/useTooltipOptions.ts/barAndLineTooltipHelper.ts

@@ -35,8 +35,7 @@ export const barAndLineTooltipHelper = (
       const usePercentage =
         !!percentageMode || keyToUsePercentage.includes(tooltipDataset.label as string);
 
-      const formattedLabel = tooltipDataset.label as string;
-
+      const formattedLabel = formatLabel(item.key, columnLabelFormats[item.key], true);
       const formattedValue = formatLabel(item.value as number, columnLabelFormats[item.key]);
 
       return {

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

@@ -1,4 +1,10 @@
-import { type ColumnLabelFormat, DEFAULT_COLUMN_LABEL_FORMAT } from '@buster/server-shared/metrics';
+import {
+  type ColumnLabelFormat,
+  DEFAULT_COLUMN_LABEL_FORMAT,
+  DEFAULT_DATE_FORMAT_QUARTER,
+} from '@buster/server-shared/metrics';
+import { JOIN_CHARACTER_DATE } from '@/lib/axisFormatter';
+import { formatLabel } from '@/lib/columnFormatter';
 import { createDayjsDate } from '@/lib/date';
 
 export const createTickDates = (
@@ -6,18 +12,16 @@ export const createTickDates = (
   xAxisKeys: string[],
   columnLabelFormats: Record<string, ColumnLabelFormat>
 ): (Date | string)[] | null => {
+  console.clear();
   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;
   }
@@ -26,14 +30,51 @@ export const createTickDates = (
 
   //most common case
   if (isSingleXAxis) {
+    const isAQuarter = xColumnLabelFormats.findIndex(
+      (format) => format.convertNumberTo === 'quarter' && format.columnType === 'number'
+    );
+    if (isAQuarter !== -1) {
+      return createQuarterTickDates(ticks, xColumnLabelFormats, isAQuarter);
+    }
     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;
   }
 
+  const isDoubleXAxis = xAxisKeys.length === 2;
+  if (isDoubleXAxis) {
+    const oneIsAQuarter = xColumnLabelFormats.findIndex(
+      (format) => format.convertNumberTo === 'quarter' && format.columnType === 'number'
+    );
+    const oneIsANumber = xColumnLabelFormats.findIndex(
+      (format) => format.columnType === 'number' && format.style === 'number'
+    );
+    if (oneIsAQuarter !== -1 && oneIsANumber !== -1) {
+      return createQuarterTickDates(ticks, xColumnLabelFormats, oneIsAQuarter);
+    }
+  }
+
   return null;
 };
+
+const createQuarterTickDates = (
+  ticks: (string | number)[][],
+  xColumnLabelFormats: ColumnLabelFormat[],
+  indexOfQuarter: number
+) => {
+  return ticks.flatMap((tickItem) => {
+    return tickItem
+      .map((item, index) => {
+        if (index === indexOfQuarter) {
+          // Replace the Q that's not in brackets with the quarter number
+          // Format is '[Q]Q' - keep [Q] literal, replace the second Q
+          return DEFAULT_DATE_FORMAT_QUARTER.replace(/(?<!\[)Q(?!\])/g, String(item));
+        }
+        return formatLabel(item, xColumnLabelFormats[index]);
+      })
+      .join(JOIN_CHARACTER_DATE);
+  });
+};