Rank ribbons
Product league
85.1
| Observation | Value |
|---|---|
| Orbit · Apr | 92 |
| Orbit · May | 88 |
| Orbit · Jun | 84 |
| Orbit · Jul | 90 |
| Orbit · Aug | 96 |
| Orbit · Sep | 98 |
| Field · Apr | 72 |
| Field · May | 86 |
| Field · Jun | 94 |
| Field · Jul | 96 |
| Field · Aug | 90 |
| Field · Sep | 93 |
| Forma · Apr | 86 |
| Forma · May | 92 |
| Forma · Jun | 90 |
| Forma · Jul | 85 |
| Forma · Aug | 82 |
| Forma · Sep | 88 |
| Muse · Apr | 65 |
| Muse · May | 70 |
| Muse · Jun | 78 |
| Muse · Jul | 86 |
| Muse · Aug | 92 |
| Muse · Sep | 96 |
| Dawn · Apr | 78 |
| Dawn · May | 76 |
| Dawn · Jun | 72 |
| Dawn · Jul | 74 |
| Dawn · Aug | 80 |
| Dawn · Sep | 84 |
Usage
Import the component and the stylesheet once. See Getting started to install the package.
import { RankRibbonsCard } from '@lilt-ui/charts';
import '@lilt-ui/charts/styles.css';<RankRibbonsCard title="Product league" data={productLeague} series="product" period="month" value="score" />Omit title to leave out the visible title. Set header={false} to remove the whole header, and use aria-label to name a chart inside your own card. legend={false} removes the legend independently. surface="ghost" controls only the visual frame. See Card composition.
Data
One row per series and period; periods stay in first-seen order. Scores determine ranks independently each period. Equal scores share a competition rank (1, 1, 3). Missing values break the track. The resting headline is the mean of known scores; inspection reports the original score and rank, and the legend reports the final period score.
const productLeague = [
{ product: 'Orbit', month: 'Apr', score: 92 },
{ product: 'Field', month: 'Apr', score: 72 },
{ product: 'Orbit', month: 'May', score: 88 },
];Props
Every prop RankRibbonsCard accepts, in the order you are likely to reach for them.
| Prop | Type | Description |
|---|---|---|
title | string | Optional visible title. Omit to render no title. Also supplies the accessible name unless aria-label is set. |
header | boolean | Defaults to true. False removes the whole header: title, headline, delta and period controls, with no reserved space. Pass data directly when your app owns period selection. |
aria-label | string | Accessible chart name, independent of the visible title. Falls back to title, then a generic chart name. |
data | Row[] | One row per observation. Omit when using ranges. |
height | number | Minimum plot height, default 300. Dense data can expand or scroll to preserve geometry. |
depth | boolean | Lit tiles, solid bars, or spheres. Data positions remain exact; loading keeps the same depth treatment. |
color | string | Override the palette with one CSS color. |
aggregate | 'sum' | 'mean' | 'max' | Resting score summary; defaults to mean. |
headline | number | Override the resting headline. |
delta | number | Fractional change shown alongside the headline. |
deltaTone | 'default' | 'inverse' | 'neutral' | Use inverse when a decrease is good. |
range | string | Static period label. |
ranges | { id, label, data, headline?, delta? }[] | Period choices with their own data. |
defaultRange | string | Initial period id. |
locale | string | Locale for numbers and dates; defaults to en-US. |
formatValue | (value: number) => string | Custom value formatter. |
badge | ReactNode | Content for the glass tab above the card. |
className | string | Class on the card frame. |
style | CSSProperties | ChartStyle | Inline styles and scoped chart variables. |
onSelectionChange | (selection | null) => void | Reports id, original row (or null for an absent day), value, and pinned state. |
renderReadout | (selection | null) => ReactNode | Consumer-owned readout, including when the header is hidden. |
valueFormat | Intl.NumberFormatOptions | Formats the headline, tiles, and axis, e.g. currency. |
surface | 'elevated' | 'outline' | 'ghost' | Card treatment. Ghost removes the visual frame only; header and legend are independent controls. |
palette | 'iris' | 'cobalt' | 'emerald' | Series colors. Iris by default; explicit series colors still win. |
numberStyle | 'count' | 'pop' | 'slide' | 'roll' | 'flow' | 'scramble' | How the headline animates when its value changes. Count (default) counts to the new value. |
loading | boolean | Shows a neutral loading skeleton, not data. |
loadingStyle | 'shimmer' | 'draw' | 'breathe' | Shimmer sweeps a highlight over still shapes; draw reveals them in order; breathe lets them settle. Follows the selected look, including depth, and respects reduced motion. |
empty | 'dots' | 'shape' | ReactElement | null | What the card shows when the period has no data. Dots (default) gathers a quiet dot field around the message; shape lays the chart’s own outline behind it. Pass `<ChartEmpty>` with your own words, any element of your own, or null for nothing. Both looks stay still, so empty never reads as loading, and the headline reads a dash, never zero. |
motion | 'auto' | 'none' | None turns off decorative motion; reduced motion does this automatically. |
series | text key of Row | One colored track per series. |
period | text key of Row | Time period, in first-seen order. |
value | numeric key of Row | Score used to derive rank and shown in the readout. |
order | 'descending' | 'ascending' | Descending (default) ranks the largest value first; ascending ranks the smallest first. |
thickness | number | Track width, 3 to 18 pixels, default 10. |
legend | false | 'tiles' | 'inline' | 'list' | 'pills' | 'bars' | Rounded-square legend with group inspection and pinning. Defaults to tiles; false removes it. |
onKeyDown | KeyboardEventHandler<HTMLElement> | Keyboard handler on the card frame. Chart inspection also has its own keyboard handling. |
legendSwatch | 'square' | 'dot' | 'line' | Marker beside each group label, where a group legend is present. Defaults to square. |