From 2436e04705aa9165a4c9b2becaee3865ddf27c98 Mon Sep 17 00:00:00 2001
From: Henry Dollman <hank@henrygd.me>
Date: Fri, 12 Jul 2024 16:15:03 -0400
Subject: [PATCH] improve shadcn chart tooltip

---
 site/src/components/ui/chart.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/site/src/components/ui/chart.tsx b/site/src/components/ui/chart.tsx
index e1b7d4f..87e8af6 100644
--- a/site/src/components/ui/chart.tsx
+++ b/site/src/components/ui/chart.tsx
@@ -99,6 +99,7 @@ const ChartTooltipContent = React.forwardRef<
 			indicator?: 'line' | 'dot' | 'dashed'
 			nameKey?: string
 			labelKey?: string
+			unit?: string
 		}
 >(
 	(
@@ -116,6 +117,7 @@ const ChartTooltipContent = React.forwardRef<
 			color,
 			nameKey,
 			labelKey,
+			unit,
 		},
 		ref
 	) => {
@@ -157,7 +159,7 @@ const ChartTooltipContent = React.forwardRef<
 			<div
 				ref={ref}
 				className={cn(
-					'grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl',
+					'grid min-w-[7rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl',
 					className
 				)}
 			>
@@ -206,7 +208,7 @@ const ChartTooltipContent = React.forwardRef<
 										)}
 										<div
 											className={cn(
-												'flex flex-1 justify-between leading-none',
+												'flex flex-1 justify-between leading-none gap-2',
 												nestLabel ? 'items-end' : 'items-center'
 											)}
 										>
@@ -216,9 +218,9 @@ const ChartTooltipContent = React.forwardRef<
 													{itemConfig?.label || item.name}
 												</span>
 											</div>
-											{item.value && (
+											{item.value !== undefined && (
 												<span className="font-mono font-medium tabular-nums text-foreground">
-													{item.value.toLocaleString()}
+													{item.value.toLocaleString() + (unit ? unit : '')}
 												</span>
 											)}
 										</div>