QueryInsightsChartTooltip.tsx37 lines · main

1	import dayjs from 'dayjs'
2	import type { TooltipProps } from 'recharts'
3
4	import { formatDuration } from '../QueryInsightsTable/QueryInsightsTable.utils'
5	import { isTimeMetric } from './QueryInsightsChart.utils'
6	import { guessLocalTimezone } from '@/lib/dayjs'
7
8	export const QueryInsightsChartTooltip = ({ active, payload }: TooltipProps<number, string>) => {
9	if (!active || !payload?.length) return null
10
11	const time = payload[0]?.payload?.time
12	const localTimeZone = guessLocalTimezone()
13
14	return (
15	<div className="grid min-w-32 items-start gap-1.5 rounded-lg border border-border/50 bg px-2.5 py-1.5 text-xs shadow-xl">
16	<p className="text-foreground-light text-xs">{localTimeZone}</p>
17	<p className="font-medium">{dayjs(time).format('MMM D, hh:mm:ssa')}</p>
18	<div className="grid gap-0">
19	{payload.map((entry, index) => (
20	<div key={`${entry.name}-${index}`} className="flex items-center w-full">
21	<svg width="10" height="10" viewBox="0 0 10 10" fill="none">
22	<circle cx="5" cy="5" r="3" fill={entry.color} />
23	</svg>
24	<span className="text-foreground-lighter ml-1 grow">{entry.name}</span>
25	<span className="ml-3.5">
26	{typeof entry.value === 'number'
27	? isTimeMetric(typeof entry.dataKey === 'string' ? entry.dataKey : '')
28	? formatDuration(entry.value)
29	: entry.value.toLocaleString()
30	: entry.value}
31	</span>
32	</div>
33	))}
34	</div>
35	</div>
36	)
37	}