Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | import { HoverCard, HoverCardSeriesRow, StateChip } from '@ska-octopus-widget-sdk/widget-sdk';
import type { HoverState } from '../hooks/useSharedHover';
interface TimelineHoverCardProps {
hoverState: HoverState;
onMouseEnter: () => void;
onMouseLeave: () => void;
}
export function TimelineHoverCard({
hoverState,
onMouseEnter,
onMouseLeave
}: TimelineHoverCardProps) {
return (
<HoverCard
x={hoverState.x}
y={hoverState.y}
interactive
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
>
<div data-testid="timeline-shared-hover-card">
<div
style={{
fontSize: '0.7em',
opacity: 0.55,
marginBottom: 5,
fontFamily: 'monospace',
whiteSpace: 'nowrap'
}}
>
{new Date(hoverState.ts).toISOString().replace('T', ' ').replace('Z', ' UTC')}
</div>
<div style={{ maxHeight: 220, overflowY: 'auto', fontSize: '1em', lineHeight: 1.5 }}>
{hoverState.rows.map((row, i) => (
<HoverCardSeriesRow
key={i}
color={row.color}
dash={row.dash}
label={row.label}
value={
row.isStateChip ? (
<StateChip label={row.value} colorKey={row.value} disableBrushClick />
) : (
row.value
)
}
aux={row.time}
/>
))}
</div>
</div>
</HoverCard>
);
}
|