Gap Chart
Gap to the leader across the race: laps along the bottom, seconds behind down the side, and the leader pinned to zero along the top the way a broadcast draws it.
Drawn with Recharts through shadcn's own `chart` item, the decision recorded in ADR 0001. It is the only item in this registry that carries a chart library, so installing the rest stays light; install `chart` with the shadcn CLI before this item.
No line animates. The chart is redrawn every time a car completes a lap, and a line that redraws itself from the left on each of those reads as a glitch rather than as motion. The component is memoised, so a page with a clock running at ten frames a second only redraws it when a lap, the data or the emphasis changes.
The y axis is reversed: zero, the leader, sits along the top and the field hangs below it. A lap a car has no time for breaks its line rather than being joined across.
Preview
Lap 0 / 44
Playground
The race distance, which is the whole width of the chart.
Advance the lap on a timer, so the lines grow with the clock.
The lap the field is on while the race is not running.
The car drawn in its own colour, over the rest of the field.
Installation
Register the boxbox namespace once per project:
bunx shadcn@latest registry add @boxbox=https://react-boxbox.vercel.app/r/{name}.jsonThen add the component:
bunx shadcn@latest add @boxbox/gap-chart
Props
| Name | Type | Default | Description |
|---|---|---|---|
| totalLaps | number | 44 | The race distance, which is the whole width of the chart. |
| animate | boolean | true | Advance the lap on a timer, so the lines grow with the clock. |
| currentLap | number | 22 | The lap the field is on while the race is not running. |
| emphasised | 'none' | 'EVO' | 'MSO' | 'TRE' | 'NVA' | 'AQU' | 'SDA' | TRE | The car drawn in its own colour, over the rest of the field. |
Dependencies
- recharts