Tola Leng
65 lines
2.2 KiB
TypeScript
65 lines
2.2 KiB
TypeScript
|
|
interface DetailedTooltipContentProps {
|
|
active?: boolean;
|
|
payload?: any[];
|
|
label?: string;
|
|
}
|
|
|
|
export const DetailedTooltipContent = ({ active, payload, label }: DetailedTooltipContentProps) => {
|
|
if (!active || !payload || !payload.length) return null;
|
|
|
|
const data = payload[0]?.payload;
|
|
|
|
return (
|
|
<div className="bg-popover/95 border border-border backdrop-blur-sm rounded-lg p-3 shadow-lg">
|
|
<p className="font-medium text-popover-foreground mb-2">{label}</p>
|
|
{data?.fullTimestamp && (
|
|
<p className="text-xs text-muted-foreground mb-2">
|
|
{new Date(data.fullTimestamp).toLocaleString('en-US', {
|
|
weekday: 'short',
|
|
year: 'numeric',
|
|
month: 'short',
|
|
day: 'numeric',
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
second: '2-digit'
|
|
})}
|
|
</p>
|
|
)}
|
|
{payload.map((entry: any, index: number) => {
|
|
const data = entry.payload;
|
|
return (
|
|
<div key={index} className="space-y-1">
|
|
<div className="flex items-center gap-2">
|
|
<div
|
|
className="w-3 h-3 rounded-full"
|
|
style={{ backgroundColor: entry.color }}
|
|
/>
|
|
<span className="text-sm font-medium">{entry.name}: {entry.value}%</span>
|
|
</div>
|
|
{entry.dataKey === 'cpuUsage' && (
|
|
<div className="text-xs text-muted-foreground ml-5">
|
|
<div>CPU Cores: {data.cpuCores}</div>
|
|
<div>Free: {data.cpuFree}%</div>
|
|
</div>
|
|
)}
|
|
{entry.dataKey === 'ramUsagePercent' && (
|
|
<div className="text-xs text-muted-foreground ml-5">
|
|
<div>Used: {data.ramUsed}</div>
|
|
<div>Total: {data.ramTotal}</div>
|
|
<div>Free: {data.ramFree}</div>
|
|
</div>
|
|
)}
|
|
{entry.dataKey === 'diskUsagePercent' && (
|
|
<div className="text-xs text-muted-foreground ml-5">
|
|
<div>Used: {data.diskUsed}</div>
|
|
<div>Total: {data.diskTotal}</div>
|
|
<div>Free: {data.diskFree}</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}; |