Sample Rug
A free numeric observation component that plots each supplied sample on one scale.
Workshop dispatch
From bench to door
Min 0 hMax 10 h
Plot unavailable at this width
- 1Monday, east depot3.5 h
- 2Monday, west depot4 h
- 3Tuesday, east depot4 h
- 4Tuesday, west depot4.25 h
- 5Wednesday, east depot4.5 h
- 6Wednesday, west depot4.5 h
- 7Thursday, east depot5 h
- 8Thursday, west depot5.25 h
- 9Friday, east depot5.5 h
- 10Friday, west depot6 h
- 11Saturday reserve run7.5 h
- 12Sunday reserve run9 h
Field note / 01
Most journeys leave the workshop within six hours. Two reserve runs sit beyond the main cluster.
Each plotted number points to the exact supplied order below it. No average or estimated density is added.
Customise
Code
const samples = [
{ id: "monday-east", label: "Monday, east depot", value: 3.5 },
{ id: "monday-west", label: "Monday, west depot", value: 4 },
{ id: "tuesday-east", label: "Tuesday, east depot", value: 4 },
{ id: "tuesday-west", label: "Tuesday, west depot", value: 4.25 },
{ id: "wednesday-east", label: "Wednesday, east depot", value: 4.5 },
{ id: "wednesday-west", label: "Wednesday, west depot", value: 4.5 },
{ id: "thursday-east", label: "Thursday, east depot", value: 5 },
{ id: "thursday-west", label: "Thursday, west depot", value: 5.25 },
{ id: "friday-east", label: "Friday, east depot", value: 5.5 },
{ id: "friday-west", label: "Friday, west depot", value: 6 },
{ id: "saturday", label: "Saturday reserve run", value: 7.5 },
{ id: "sunday", label: "Sunday reserve run", value: 9 },
];
<StatSampleRug
label="Delivery times, twelve recent orders"
samples={samples}
min={0}
max={10}
unit=" h"
/>Sample Rug is a free stats component for Next.js and React, styled with Tailwind. It places supplied observations on one numeric scale so a reader can see clusters and outliers while reading every original label and value in source order.
The server renders the complete ordered list and a responsive numbered plot. At widths below 160 CSS pixels the plot gives way to an explicit note; after hydration a real width reading compacts colliding marks into deterministic lanes without an entrance animation.
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/stat-sample-rugUsage
import { StatSampleRug } from "@/components/stat-sample-rug";
const samples = [
{ id: "vase", label: "Thrown vase", value: 92 },
{ id: "folio", label: "Folio frame", value: 148 },
{ id: "tray", label: "Pressed serving tray", value: 264 },
];
export default function ArchiveWidths() {
return <StatSampleRug label="Object widths" min={0} max={300} samples={samples} unit=" mm" />;
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | required | Visible name of the measured set. |
| min | number | required | Finite lower endpoint of the numeric scale. |
| max | number | required | Finite upper endpoint. The span max minus min must be finite and positive. |
| samples | ReadonlyArray<{ id: string; label: string; value: number }> | required | Two to twelve observations with unique nonblank stable IDs, nonblank labels and finite in-domain values. Source order controls the exact list and printed indices. |
| unit | string | "" | Literal suffix printed after every unrounded numeric value and both scale endpoints. |
| className | string | undefined | Additional classes merged onto the figure. |
Customisation
Override the track, ink, accent and duration variables on an ancestor. The four registry aliases default to the host's border, foreground, primary and --dur-3 tokens. The numbered marks remain decorative; the exact list is the reading anchor.
<div style={{ "--sample-rug-accent": "var(--ring)", "--sample-rug-duration": "var(--dur-3, 600ms)" }}>
<StatSampleRug label="Object widths" min={0} max={300} samples={samples} unit=" mm" />
</div>Frequently asked questions
- Is Sample Rug free for commercial use?
- Yes. Sample Rug is MIT licensed for personal and commercial projects.
- What happens without JavaScript or with reduced motion?
- The complete source-order list and responsive numbered plot render in server HTML. Reduced motion, print, forced colours and hidden or offscreen states show current final marks without travel. Under 160 CSS pixels the plot is hidden and a width note appears.
- What happens when supplied data is invalid?
- The plot is withheld and a visible unavailable-data note appears. Every supplied label and exact String(value) plus literal unit remains in the original list, including duplicates and out-of-domain values.