score
GraphScore
Ratings as dots. Write `- Docs: 4/5`; halves draw a half dot. Bold the row that matters and the rest recede. Actual versus target is Bullet.
review
`label: value/max`. Halves draw a half dot. Bold the row that matters and the others recede.
- Performance4/5
- Accessibility5/5
- Docs2.5/5
- Motion4/5
MDX
<GraphScore title="REVIEW">
- Performance: 4/5
- Accessibility: 5/5
- **Docs: 2.5/5**
- Motion: 4/5
</GraphScore>install
command
out of ten
The /n in the first row sets the dots. Glyphs swap the marks.
- Acme8/10
- Globex6.5/10
- Initech4/10
MDX
<GraphScore title="VENDORS" glyphs="ascii">
- Acme: 8/10
- Globex: 6.5
- Initech: 4
</GraphScore>| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | — | Caption drawn on the top edge of the frame. |
| children | Markdown | — | A list of `label: value/max`. Bold is the row to read. |
| items | { label, value, max?, accent? }[] | — | Data form. Optional when children are Markdown. |
| max | number | 5 | Dots per row. Defaults to the /n in the first row. |
| glyphs | Glyphs | — | Empty, half, and full dot. Default ○ ◐ ●. |
| palette | "mono" | "duo" | "multi" | "mono" | mono is one accent plus muted. duo paints the second series with --graph-accent-2. multi cycles three accents. |
| corner | string | "+" | Character at each corner of the frame. |
| className | string | — | Passed to the outer frame. |