clarity

web/src/app/ee/admin/performance/usage/DanswerBotChart.tsx

@@ -58,9 +58,6 @@ export function DanswerBotChart({
         categories={["Total Queries", "Automatically Resolved"]}
         index="Day"
         colors={["indigo", "fuchsia"]}
-        valueFormatter={(number: number) =>
-          `${Intl.NumberFormat("us").format(number).toString()}`
-        }
         yAxisWidth={60}
       />
     );

web/src/app/ee/admin/performance/usage/FeedbackChart.tsx

@@ -56,9 +56,6 @@ export function FeedbackChart({
         categories={["Positive Feedback", "Negative Feedback"]}
         index="Day"
         colors={["indigo", "fuchsia"]}
-        valueFormatter={(number: number) =>
-          `${Intl.NumberFormat("us").format(number).toString()}`
-        }
         yAxisWidth={60}
       />
     );

web/src/app/ee/admin/performance/usage/QueryPerformanceChart.tsx

@@ -74,7 +74,7 @@ export function QueryPerformanceChart({
         categories={["Queries", "Unique Users"]}
         index="Day"
         colors={["indigo", "fuchsia"]}
-        valueFormatter={(number: number) =>
+        yAxisFormatter={(number: number) =>
           new Intl.NumberFormat("en-US", {
             notation: "standard",
             maximumFractionDigits: 0,
@@ -87,14 +87,6 @@ export function QueryPerformanceChart({
             day: "numeric",
           });
         }}
-        tooltipFormatter={(dateStr: string) => {
-          const date = new Date(dateStr);
-          return date.toLocaleDateString("en-US", {
-            year: "numeric",
-            month: "short",
-            day: "numeric",
-          });
-        }}
         yAxisWidth={60}
         allowDecimals={false}
       />

web/src/components/ui/areaChart.tsx

@@ -24,7 +24,6 @@ interface AreaChartProps {
   categories?: string[];
   index?: string;
   colors?: string[];
-  valueFormatter?: (value: number) => string;
   startEndOnly?: boolean;
   showXAxis?: boolean;
   showYAxis?: boolean;
@@ -42,7 +41,8 @@ interface AreaChartProps {
   className?: string;
   title?: string;
   description?: string;
-  xAxisFormatter?: (dateStr: string) => string;
+  xAxisFormatter?: (value: any) => string;
+  yAxisFormatter?: (value: any) => string;
 }
 
 export function AreaChartDisplay({
@@ -50,9 +50,6 @@ export function AreaChartDisplay({
   categories = [],
   index,
   colors = ["indigo", "fuchsia"],
-  xAxisFormatter = (dateStr: string) => dateStr,
-  valueFormatter = (number: number) =>
-    `${Intl.NumberFormat("us").format(number).toString()}`,
   startEndOnly = false,
   showXAxis = true,
   showYAxis = true,
@@ -70,6 +67,8 @@ export function AreaChartDisplay({
   className,
   title,
   description,
+  xAxisFormatter = (dateStr: string) => dateStr,
+  yAxisFormatter = (number: number) => number.toString(),
 }: AreaChartProps) {
   return (
     <Card className={className}>
@@ -104,7 +103,7 @@ export function AreaChartDisplay({
                   width={yAxisWidth}
                   tickLine={false}
                   axisLine={false}
-                  tickFormatter={valueFormatter}
+                  tickFormatter={(value) => yAxisFormatter(value)}
                   allowDecimals={allowDecimals}
                 />
               )}