cbaoth/med-plan-assistant
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update consolidated and improved tooltips

Browse Source
This commit is contained in:
Andreas Weyer
2026-01-17 13:06:56 +00:00
parent 3214c152dd
commit 3e7281e4db
6 changed files with 180 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/components/simulation-chart.tsx
View File

@@ -25,7 +25,6 @@ import {
Tooltip as UiTooltip,
TooltipTrigger as UiTooltipTrigger,
TooltipContent as UiTooltipContent,
TooltipProvider as UiTooltipProvider,
} from './ui/tooltip';
// Chart color scheme
@@ -310,41 +309,39 @@ const chartDomain = React.useMemo(() => {
? scrollableWidth
: Math.ceil((scrollableWidth / dispDays) * simDays);
// Render legend with tooltips for full names (custom legend renderer)
const renderLegend = React.useCallback((props: any) => {
const { payload } = props;
if (!payload) return null;
return (
<UiTooltipProvider>
<ul className="flex flex-wrap gap-2 text-xs leading-tight">
{payload.map((item: any) => {
const labelInfo = seriesLabels[item.dataKey] || { display: item.value, full: item.value };
const opacity = item.payload?.opacity ?? 1;
<ul className="flex flex-wrap gap-2 text-xs leading-tight">
{payload.map((item: any) => {
const labelInfo = seriesLabels[item.dataKey] || { display: item.value, full: item.value };
const opacity = item.payload?.opacity ?? 1;
return (
<li key={item.dataKey} className="flex items-center gap-1 max-w-[140px]">
<span
className="inline-block w-3 h-3 rounded-sm"
style={{ backgroundColor: item.color, opacity }}
/>
<UiTooltip>
<UiTooltipTrigger asChild>
<span
className="px-1 py-0.5 rounded-sm bg-white text-black shadow-sm border border-muted truncate inline-block max-w-[100px]"
title={labelInfo.full}
>
{labelInfo.display}
</span>
</UiTooltipTrigger>
<UiTooltipContent className="bg-white text-black shadow-md border max-w-xs">
<span className="font-medium">{labelInfo.full}</span>
</UiTooltipContent>
</UiTooltip>
</li>
);
})}
</ul>
</UiTooltipProvider>
return (
<li key={item.dataKey} className="flex items-center gap-1 max-w-[140px]">
<span
className="inline-block w-3 h-3 rounded-sm"
style={{ backgroundColor: item.color, opacity }}
/>
<UiTooltip>
<UiTooltipTrigger asChild>
<span
className="px-1 py-0.5 rounded-sm bg-white text-black shadow-sm border border-muted truncate inline-block max-w-[100px]"
>
{labelInfo.display}
</span>
</UiTooltipTrigger>
<UiTooltipContent className="bg-white text-black shadow-md border max-w-xs">
<span className="font-medium">{labelInfo.full}</span>
</UiTooltipContent>
</UiTooltip>
</li>
);
})}
</ul>
);
}, [seriesLabels]);