From 77cab56fa93650e87efaf6f062ef3f6230feabc9 Mon Sep 17 00:00:00 2001
From: Owen <owen@txv.io>
Date: Mon, 24 Aug 2026 14:39:17 -0400
Subject: [PATCH] Add valueFormatter prop to ToggleableTrendChart and
 ChartTooltipContent so we see more decimals

---
 .../ToggleableTrendChart.tsx                  |  2 ++
 src/components/ai-usage-analytics/shared.ts   |  3 ++-
 src/components/ui/chart.tsx                   | 26 ++++++++++++-------
 3 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/src/components/ai-usage-analytics/ToggleableTrendChart.tsx b/src/components/ai-usage-analytics/ToggleableTrendChart.tsx
index 3b0f1e7c5..09a88b359 100644
--- a/src/components/ai-usage-analytics/ToggleableTrendChart.tsx
+++ b/src/components/ai-usage-analytics/ToggleableTrendChart.tsx
@@ -129,6 +129,7 @@ export function ToggleableTrendChart(props: ToggleableTrendChartProps) {
                                                 payload?.[0]?.payload?.day
                                             )
                                         }
+                                        valueFormatter={valueFormatter}
                                     />
                                 }
                             />
@@ -172,6 +173,7 @@ export function ToggleableTrendChart(props: ToggleableTrendChartProps) {
                                                 payload?.[0]?.payload?.day
                                             )
                                         }
+                                        valueFormatter={valueFormatter}
                                     />
                                 }
                             />
diff --git a/src/components/ai-usage-analytics/shared.ts b/src/components/ai-usage-analytics/shared.ts
index 30ad525b4..e785330d7 100644
--- a/src/components/ai-usage-analytics/shared.ts
+++ b/src/components/ai-usage-analytics/shared.ts
@@ -47,7 +47,8 @@ export function buildSeriesFromData(
 export const currencyFormatter = new Intl.NumberFormat(undefined, {
     style: "currency",
     currency: "USD",
-    maximumFractionDigits: 2
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 4
 });
 
 export const compactNumberFormatter = new Intl.NumberFormat(undefined, {
diff --git a/src/components/ui/chart.tsx b/src/components/ui/chart.tsx
index ec2e1c880..6c4323d79 100644
--- a/src/components/ui/chart.tsx
+++ b/src/components/ui/chart.tsx
@@ -135,6 +135,7 @@ type ChartTooltipContentProps = React.ComponentProps<"div"> & {
     labelKey?: string;
     color?: string;
     labelClassName?: string;
+    valueFormatter?: (value: number) => string;
 };
 
 const ChartTooltipContent = React.forwardRef<
@@ -155,7 +156,8 @@ const ChartTooltipContent = React.forwardRef<
             formatter,
             color,
             nameKey,
-            labelKey
+            labelKey,
+            valueFormatter
         },
         ref
     ) => {
@@ -302,19 +304,23 @@ const ChartTooltipContent = React.forwardRef<
                                                             item.name}
                                                     </span>
                                                 </div>
-                                                {item.value && (
+                                                {item.value !== undefined && (
                                                     <span className="font-mono font-medium tabular-nums text-foreground">
                                                         {!isNaN(
                                                             item.value as number
                                                         )
-                                                            ? new Intl.NumberFormat(
-                                                                  navigator.language,
-                                                                  {
-                                                                      maximumFractionDigits: 0
-                                                                  }
-                                                              ).format(
-                                                                  item.value as number
-                                                              )
+                                                            ? valueFormatter
+                                                                ? valueFormatter(
+                                                                      item.value as number
+                                                                  )
+                                                                : new Intl.NumberFormat(
+                                                                      navigator.language,
+                                                                      {
+                                                                          maximumFractionDigits: 0
+                                                                      }
+                                                                  ).format(
+                                                                      item.value as number
+                                                                  )
                                                             : item.value.toLocaleString()}
                                                     </span>
                                                 )}