From ba6e57bc4b57cd2a89c4c5c5de3b3e7347491d85 Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Fri, 11 Apr 2025 09:44:10 -0600
Subject: [PATCH] fix typing for line series builder

---
 .../labelOptionConfig.ts                      |   3 +-
 .../useSeriesOptions/lineSeriesBuilder.ts     |  21 +-
 .../stories/BusterChart.LineChart.stories.tsx | 180 +++++++++++++++++-
 3 files changed, 192 insertions(+), 12 deletions(-)

diff --git a/web/src/components/ui/charts/BusterChartJS/hooks/useChartSpecificOptions/labelOptionConfig.ts b/web/src/components/ui/charts/BusterChartJS/hooks/useChartSpecificOptions/labelOptionConfig.ts
index 5d1ebc6fa..21f0ceb7a 100644
--- a/web/src/components/ui/charts/BusterChartJS/hooks/useChartSpecificOptions/labelOptionConfig.ts
+++ b/web/src/components/ui/charts/BusterChartJS/hooks/useChartSpecificOptions/labelOptionConfig.ts
@@ -1,6 +1,7 @@
 'use client';
 
 import { isServer } from '@tanstack/react-query';
+import { ChartProps } from '../../core';
 
 const backgroundColor = isServer
   ? '#e6e6e6'
@@ -30,4 +31,4 @@ export const defaultLabelOptionConfig = {
     size: 10,
     weight: 'normal' as const
   }
-};
+} satisfies ChartProps<'line'>['data']['datasets'][number]['datalabels'];
diff --git a/web/src/components/ui/charts/BusterChartJS/hooks/useSeriesOptions/lineSeriesBuilder.ts b/web/src/components/ui/charts/BusterChartJS/hooks/useSeriesOptions/lineSeriesBuilder.ts
index db9601a9c..7f41c8afc 100644
--- a/web/src/components/ui/charts/BusterChartJS/hooks/useSeriesOptions/lineSeriesBuilder.ts
+++ b/web/src/components/ui/charts/BusterChartJS/hooks/useSeriesOptions/lineSeriesBuilder.ts
@@ -133,23 +133,28 @@ export const lineBuilder = (
       formatter: (value, context) =>
         formatBarAndLineDataLabel(value, context, percentageMode, columnLabelFormat),
       ...getLabelPosition(isStackedArea),
-      ...defaultLabelOptionConfig
-    }
-  } as ChartProps<'line'>['data']['datasets'][number];
+      ...defaultLabelOptionConfig,
+      ...(percentageMode === 'data-label' && {
+        color: 'white'
+      })
+    } satisfies ChartProps<'line'>['data']['datasets'][number]['datalabels']
+  } as ChartProps<'line'>['data']['datasets'][number] & { xAxisKeys: string[] };
 };
 
-const getLabelPosition = (isStackedArea: boolean) => {
+const getLabelPosition = (
+  isStackedArea: boolean
+): ChartProps<'line'>['data']['datasets'][number]['datalabels'] => {
   if (isStackedArea) {
     return {
       anchor: 'start',
-      align: 'bottom',
-      yAdjust: -10
+      align: 'bottom'
+      //  offset: -10
     };
   }
   return {
     anchor: 'end',
-    align: 'top',
-    yAdjust: 17
+    align: 'top'
+    //  offset:0
   };
 };
 
diff --git a/web/src/components/ui/charts/stories/BusterChart.LineChart.stories.tsx b/web/src/components/ui/charts/stories/BusterChart.LineChart.stories.tsx
index e1cfe9ed1..a788b64a6 100644
--- a/web/src/components/ui/charts/stories/BusterChart.LineChart.stories.tsx
+++ b/web/src/components/ui/charts/stories/BusterChart.LineChart.stories.tsx
@@ -384,10 +384,10 @@ export const PercentageStackedLineSingle: Story = {
     },
     className: 'w-[800px] h-[400px]',
     columnLabelFormats: {
-      month: {
+      date: {
         columnType: 'number',
         style: 'date',
-        dateFormat: 'MMM',
+        dateFormat: 'LLL',
         minimumFractionDigits: 0,
         maximumFractionDigits: 0
       } satisfies IColumnLabelFormat,
@@ -420,7 +420,7 @@ export const PercentageStackedLineMultiple: Story = {
       date: {
         columnType: 'number',
         style: 'date',
-        dateFormat: 'll',
+        dateFormat: 'lll',
         minimumFractionDigits: 0,
         maximumFractionDigits: 0
       } satisfies IColumnLabelFormat,
@@ -437,3 +437,177 @@ export const PercentageStackedLineMultiple: Story = {
     }
   }
 };
+
+export const PercentageStackedLineSingleWithDataLabels: Story = {
+  args: {
+    selectedChartType: ChartType.Line,
+    data: generateLineChartData(),
+    lineGroupType: 'percentage-stack',
+    barAndLineAxis: {
+      x: ['date'],
+      y: ['revenue'],
+      category: []
+    },
+    className: 'w-[800px] h-[400px]',
+    columnSettings: {
+      revenue: {
+        showDataLabels: true
+      }
+    },
+    columnLabelFormats: {
+      date: {
+        columnType: 'number',
+        style: 'date',
+        dateFormat: 'auto',
+        minimumFractionDigits: 0,
+        maximumFractionDigits: 0
+      } satisfies IColumnLabelFormat,
+      revenue: {
+        columnType: 'number',
+        style: 'currency',
+        currency: 'EUR'
+      } satisfies IColumnLabelFormat,
+      customers: {
+        columnType: 'number',
+        style: 'number',
+        numberSeparatorStyle: ','
+      } satisfies IColumnLabelFormat
+    }
+  }
+};
+
+export const StackedAreaLineMultipleWithDataLabels: Story = {
+  args: {
+    selectedChartType: ChartType.Line,
+    data: generateLineChartData(),
+    lineGroupType: 'stack',
+    barAndLineAxis: {
+      x: ['date'],
+      y: ['revenue', 'profit', 'customers'],
+      category: []
+    },
+    className: 'w-[800px] h-[400px]',
+    columnSettings: {
+      revenue: {
+        showDataLabels: true
+      },
+      profit: {
+        showDataLabels: true
+      },
+      customers: {
+        showDataLabels: true
+      }
+    },
+    columnLabelFormats: {
+      date: {
+        columnType: 'number',
+        style: 'date',
+        dateFormat: 'auto',
+        minimumFractionDigits: 0,
+        maximumFractionDigits: 0
+      } satisfies IColumnLabelFormat,
+      sales: {
+        columnType: 'number',
+        style: 'currency',
+        currency: 'USD'
+      } satisfies IColumnLabelFormat,
+      profit: {
+        columnType: 'number',
+        style: 'currency',
+        currency: 'USD'
+      } satisfies IColumnLabelFormat,
+      customers: {
+        columnType: 'number',
+        style: 'number',
+        numberSeparatorStyle: ','
+      } satisfies IColumnLabelFormat
+    }
+  }
+};
+
+export const StackedAreaLineSingleWithDataLabels: Story = {
+  args: {
+    selectedChartType: ChartType.Line,
+    data: generateLineChartData(),
+    lineGroupType: 'stack',
+    barAndLineAxis: {
+      x: ['date'],
+      y: ['revenue'],
+      category: []
+    },
+    className: 'w-[800px] h-[400px]',
+    columnSettings: {
+      revenue: {
+        showDataLabels: true
+      }
+    },
+    columnLabelFormats: {
+      date: {
+        columnType: 'number',
+        style: 'date',
+        dateFormat: 'auto',
+        minimumFractionDigits: 0,
+        maximumFractionDigits: 0
+      } satisfies IColumnLabelFormat,
+      revenue: {
+        columnType: 'number',
+        style: 'currency',
+        currency: 'EUR'
+      } satisfies IColumnLabelFormat,
+      customers: {
+        columnType: 'number',
+        style: 'number',
+        numberSeparatorStyle: ','
+      } satisfies IColumnLabelFormat
+    }
+  }
+};
+
+export const PercentageStackedLineMultipleWithDataLabels: Story = {
+  args: {
+    selectedChartType: ChartType.Line,
+    data: generateLineChartData(),
+    lineGroupType: 'percentage-stack',
+    barAndLineAxis: {
+      x: ['date'],
+      y: ['revenue', 'profit', 'customers'],
+      category: []
+    },
+    className: 'w-[800px] h-[400px]',
+    columnSettings: {
+      revenue: {
+        showDataLabels: true
+      },
+      profit: {
+        showDataLabels: true
+      },
+      customers: {
+        showDataLabels: true
+      }
+    },
+    columnLabelFormats: {
+      date: {
+        columnType: 'number',
+        style: 'date',
+        dateFormat: 'auto',
+        minimumFractionDigits: 0,
+        maximumFractionDigits: 0
+      } satisfies IColumnLabelFormat,
+      sales: {
+        columnType: 'number',
+        style: 'currency',
+        currency: 'USD'
+      } satisfies IColumnLabelFormat,
+      profit: {
+        columnType: 'number',
+        style: 'currency',
+        currency: 'USD'
+      } satisfies IColumnLabelFormat,
+      customers: {
+        columnType: 'number',
+        style: 'number',
+        numberSeparatorStyle: ','
+      } satisfies IColumnLabelFormat
+    }
+  }
+};