Entity cardPro
One entity at a glance: mentions over time, the documents that cite it most and what it connects to.
On this page
ProA night bus line: mentions by month, the documents that cite it and related entities.
Installation
Usage
import { EntityCard } from "@/components/ui/chatcn/pro/entity-card"
<EntityCard entity={entity} documents={docs} related={related} onSelectEntity={open} />The mention strip is the point: the peak is drawn in ink and named under the axis, and pointing at or arrowing through the bars reads any period in the header without a tooltip covering the chart. Linked documents are ranked by how often they mention the entity, with a small bar so the ranking reads at a glance. Related entities say how they relate in words, read as a phrase: runs from Alcântara depot.
Examples
States
ProNo mentions yet, long content, loading and error.
Props
| Prop | Type | Notes |
|---|---|---|
entity | EntityCardData | { name, type, summary?, aliases?, mentions } |
documents | EntityDocument[] | { id, title, source?, mentions, lastAt? } |
related | EntityRelated[] | { id, name, type?, relation } |
onOpenDocument, onSelectEntity | (id) => void | Rows become buttons |
documentLimit | number | Before Show more, default 4 |
status, error, onRetry | "ready" | "loading" | "error" | Request state |
now, locale | number, string | Relative times and numbers |
labels | Partial<EntityCardLabels> | Every string |
Keyboard
| Key | Action |
|---|---|
| Arrow keys | Read the previous or next period (mirrored in right to left) |
| Home, End | First or last period |
| Enter | Open a document or a related entity |
Accessibility
- The mention strip is a slider whose name summarizes the series and whose value reads the current period.
- The period readout is a polite live region.
- Mention counts carry a hidden label, so a count is never read as a bare number.
Motion
Only color moves: the bar you point at turns accent and the rest step back in 150 ms. Nothing slides or grows, so the chart reads the same with reduced motion.