improve shadcn chart tooltip

This commit is contained in:
Henry Dollman
2024-07-12 16:15:03 -04:00
parent 2ef3846199
commit 2436e04705

View File

@@ -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>