KQ-1630 · GRAPH/HORIZON
Graph Horizon
A strip of graph paper running to a horizon in perspective, its minor and major lines rolling toward you, plotted as it comes: a pen per series rides a rail halfway out and swings to each value as the paper passes, so every series is drawn in its own lane as a curve on the paper. As each sample reaches the reading line near the bottom, the curve there lifts off the paper toward you on the settle of springs.snap, a quick rise, a held peak and the faintest dip, with its shadow left on the paper and its values printed beside it, then lays back down. Drag the paper and the grabbed point stays under the pointer; a flick coasts and the roll picks up again. Arrow keys roll one sample at a time on the springs.glide constants and read it out, Space starts and stops the roll, Home and End go to the ends.
KQ-1630 · GRAPH/HORIZON
Gaugeworks · product metrics
| Sample | Sessions | Sign-ups | Churn |
|---|---|---|---|
| W1 | 40.5k | 3.1k | 3.4% |
| W2 | 43.7k | 2.7k | 2.9% |
| W3 | 45.4k | 2.2k | 2.6% |
| W4 | 45.1k | 1.8k | 2.6% |
| W5 | 43.2k | 1.9k | 2.9% |
| W6 | 40.2k | 2.3k | 3.3% |
| W7 | 37.3k | 2.9k | 3.4% |
| W8 | 35.4k | 3.3k | 3.1% |
| W9 | 35.2k | 3.3k | 2.7% |
| W10 | 36.9k | 2.9k | 2.4% |
| W11 | 40.1k | 2.4k | 2.4% |
| W12 | 44.1k | 2.0k | 2.7% |
| W13 | 47.7k | 2.1k | 3.1% |
| W14 | 50.1k | 2.6k | 3.2% |
| W15 | 50.7k | 3.2k | 2.9% |
| W16 | 49.4k | 3.5k | 2.5% |
| W17 | 46.7k | 3.5k | 2.1% |
| W18 | 43.7k | 3.0k | 2.2% |
| W19 | 41.2k | 2.5k | 2.5% |
| W20 | 40.2k | 2.3k | 2.9% |
| W21 | 41.1k | 2.4k | 3.0% |
| W22 | 43.8k | 2.9k | 2.7% |
| W23 | 47.6k | 3.5k | 2.2% |
| W24 | 51.5k | 3.8k | 1.9% |
| W25 | 54.5k | 3.6k | 2.0% |
| W26 | 55.9k | 3.2k | 2.3% |
rolling · W7 · sessions 37.3k
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/graph-horizon
Props
- series
- readonly GraphHorizonSeries[]
- default defaultGraphHorizonSeries
- The series, each plotted in its own lane: { label, values, color?, unit? }. Up to six.
- labels
- readonly string[]
- default "W1", "W2"…
- A label per sample, printed at the strip's margin and read out.
- speed
- number
- default 0.6
- How fast the paper rolls toward you, in samples a second.
- tilt
- number
- default 22
- How far the camera looks down at the paper, in degrees: low is a grazing view with a high horizon.
- inkColor
- "blue" | "green" | "sepia" | "graphite" | string
- default "blue"
- The grid's ink: a named ink or any CSS colour.
- paper
- string
- default —
- The paper, any CSS colour; by default the card colour tinted toward the ink, white paper on a light page and blueprint on a dark one.
- lift
- number
- default 18
- How far a reading lifts off the paper as it passes, in px.
- readAt
- number
- default 0.8
- Where the reading line sits, as a share of the height from the top, 0.55 to 0.95.
- majorEvery
- number
- default 5
- Minor cells per major cell, and per sample row.
- format
- (value: number, series: GraphHorizonSeries) => string
- default —
- How a reading is printed; by default one decimal and the series' unit.
- playing / defaultPlaying
- boolean
- default true
- Whether the paper is rolling, controlled or initial.
- onPlayingChange
- (playing: boolean) => void
- default —
- Fires from the key or the step that started or stopped the roll.
- onSampleChange
- (index: number) => void
- default —
- Fires when a new sample reaches the reading line, with its index.
- interactive
- boolean
- default true
- Drag and keys move the paper.
- label
- string
- default "Weekly product metrics"
- Names the chart for assistive technology.
- children
- React.ReactNode
- default —
- Content above the horizon: a heading, a figure.
- dpr
- number
- default 2
- Cap on the canvas's device pixel ratio, at most 2.
- disabled
- boolean
- default false
- Shows the paper still and takes no input.
- className
- string
- default "h-56 w-full"
- Sizes the box.
| Prop | Type | Default | Description |
|---|---|---|---|
| series | readonly GraphHorizonSeries[] | defaultGraphHorizonSeries | The series, each plotted in its own lane: { label, values, color?, unit? }. Up to six. |
| labels | readonly string[] | "W1", "W2"… | A label per sample, printed at the strip's margin and read out. |
| speed | number | 0.6 | How fast the paper rolls toward you, in samples a second. |
| tilt | number | 22 | How far the camera looks down at the paper, in degrees: low is a grazing view with a high horizon. |
| inkColor | "blue" | "green" | "sepia" | "graphite" | string | "blue" | The grid's ink: a named ink or any CSS colour. |
| paper | string | — | The paper, any CSS colour; by default the card colour tinted toward the ink, white paper on a light page and blueprint on a dark one. |
| lift | number | 18 | How far a reading lifts off the paper as it passes, in px. |
| readAt | number | 0.8 | Where the reading line sits, as a share of the height from the top, 0.55 to 0.95. |
| majorEvery | number | 5 | Minor cells per major cell, and per sample row. |
| format | (value: number, series: GraphHorizonSeries) => string | — | How a reading is printed; by default one decimal and the series' unit. |
| playing / defaultPlaying | boolean | true | Whether the paper is rolling, controlled or initial. |
| onPlayingChange | (playing: boolean) => void | — | Fires from the key or the step that started or stopped the roll. |
| onSampleChange | (index: number) => void | — | Fires when a new sample reaches the reading line, with its index. |
| interactive | boolean | true | Drag and keys move the paper. |
| label | string | "Weekly product metrics" | Names the chart for assistive technology. |
| children | React.ReactNode | — | Content above the horizon: a heading, a figure. |
| dpr | number | 2 | Cap on the canvas's device pixel ratio, at most 2. |
| disabled | boolean | false | Shows the paper still and takes no input. |
| className | string | "h-56 w-full" | Sizes the box. |