fankes/beszel
2
0
Fork 0
mirror of https://github.com/fankes/beszel.git synced 2025-10-19 09:49:28 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

improve shadcn chart tooltip

Browse Source
This commit is contained in:
Henry Dollman
2024-07-12 16:15:03 -04:00
parent 2ef3846199
commit 2436e04705
1 changed files with 6 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
site/src/components/ui/chart.tsx
View File

@@ -99,6 +99,7 @@ const ChartTooltipContent = React.forwardRef<
indicator?: 'line' | 'dot' | 'dashed' indicator?: 'line' | 'dot' | 'dashed'
nameKey?: string nameKey?: string
labelKey?: string labelKey?: string
unit?: string
} }
>( >(
( (
@@ -116,6 +117,7 @@ const ChartTooltipContent = React.forwardRef<
color, color,
nameKey, nameKey,
labelKey, labelKey,
unit,
}, },
ref ref
) => { ) => {
@@ -157,7 +159,7 @@ const ChartTooltipContent = React.forwardRef<
<div <div
ref={ref} ref={ref}
className={cn( 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 className
)} )}
> >
@@ -206,7 +208,7 @@ const ChartTooltipContent = React.forwardRef<
)} )}
<div <div
className={cn( className={cn(
'flex flex-1 justify-between leading-none', 'flex flex-1 justify-between leading-none gap-2',
nestLabel ? 'items-end' : 'items-center' nestLabel ? 'items-end' : 'items-center'
)} )}
> >
@@ -216,9 +218,9 @@ const ChartTooltipContent = React.forwardRef<
{itemConfig?.label || item.name} {itemConfig?.label || item.name}
</span> </span>
</div> </div>
{item.value && ( {item.value !== undefined && (
<span className="font-mono font-medium tabular-nums text-foreground"> <span className="font-mono font-medium tabular-nums text-foreground">
{item.value.toLocaleString()} {item.value.toLocaleString() + (unit ? unit : '')}
</span> </span>
)} )}
</div> </div>