KQ-808 · SCORE/HISTORY
Score History
A line of eval scores, one point per model version, in a fluid-width plot. On mount each segment draws with pathLength on glide one cascade step after the last and the points land behind it; appending a version draws only its new segment while the older segments and points glide to the re-fitted domain together, and the latest point pulses on a repeating enter-ease ring so the eye finds now. Hovering or dragging reads the nearest version, the hairline snapping to it and the point lifting on snap; the plot is a slider, so Left and Right step, Home and End jump, and Escape returns the reading to the latest.
Latest v1.6 · 84 · 212/250 cases · +6
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/score-history
Props
- versions
- ScoreVersion[]
- default —
- Oldest first: { id, label, score, passed, total }; score is 0–100. Appending one extends the line.
- label
- string
- default "Score"
- Names the plot; prints in the header.
- height
- number
- default 128
- Plot height in px; the width is measured.
- onReadChange
- (version: ScoreVersion | null) => void
- default —
- Fires when the reading moves to a version, or back to the latest (null).
- className
- string
- default —
- Layout overrides on the frame.
| Prop | Type | Default | Description |
|---|---|---|---|
| versions | ScoreVersion[] | — | Oldest first: { id, label, score, passed, total }; score is 0–100. Appending one extends the line. |
| label | string | "Score" | Names the plot; prints in the header. |
| height | number | 128 | Plot height in px; the width is measured. |
| onReadChange | (version: ScoreVersion | null) => void | — | Fires when the reading moves to a version, or back to the latest (null). |
| className | string | — | Layout overrides on the frame. |