diff --git a/src/components/usage/UsageChart.tsx b/src/components/usage/UsageChart.tsx index 9a346e99fa..191fa653ff 100644 --- a/src/components/usage/UsageChart.tsx +++ b/src/components/usage/UsageChart.tsx @@ -40,6 +40,7 @@ interface TooltipProps { label?: string; selectedMetric?: MetricType; formatValue?: (value: number) => string; + hoveredUser?: string | null; } interface ChartDataPoint { @@ -367,6 +368,7 @@ const CustomTooltip = ({ label, formatValue, isHourly, + hoveredUser, }: TooltipProps & { isHourly?: boolean }) => { if (active && payload && payload.length && label) { let formattedDate: string; @@ -406,7 +408,9 @@ const CustomTooltip = ({ {payload.map((entry, index) => (
{ const { orgId } = useAuth(); const [isClient, setIsClient] = useState(false); + const [hoveredUser, setHoveredUser] = useState(null); // Ensure we only run timezone-dependent code on the client useEffect(() => { @@ -629,6 +634,7 @@ export const UsageChart = ({ selectedMetric={selectedMetric} formatValue={formatValue} isHourly={timePeriodConfig.granularity === 'hourly'} + hoveredUser={hoveredUser} /> } cursor={{ @@ -645,6 +651,8 @@ export const UsageChart = ({ radius={ index === uniqueUsers.length - 1 ? [4, 4, 0, 0] : [0, 0, 0, 0] } + onMouseEnter={() => setHoveredUser(user)} + onMouseLeave={() => setHoveredUser(null)} /> ))}