FoldedDayBand

FoldedDayBand folds many days (or weeks, or any cycle) onto a single period axis and draws the median with 25–75 and 5–95 percentile envelopes — the typical-period grammar clinical glucose profiles standardized on. The envelopes are per-bin quantiles, never smoothed across bins, and the outer boundary fades so 5–95 doesn't read as a hard limit. Pass a today overlay to see whether the current period sits inside the usual band.

Install

import { FoldedDayBand } from "@microcharts/react/folded-day-band";// observations, today — real values under “Sample data” below<FoldedDayBand data={observations} today={today} title="Typical day" />

const observations = Array.from({ length: 14 }, (_d, d) =>  Array.from({ length: 24 }, (_h, h) => ({    t: d * 24 + h,    value: Math.round(40 + 42 * Math.max(0, 1 - Math.abs(h - 14) / 10) + Math.sin(d + h) * 8),  })),).flat();const today = Array.from({ length: 24 }, (_h, h) => ({  t: h,  value: Math.round(40 + 42 * Math.max(0, 1 - Math.abs(h - 14) / 10) + 14),}));

Try it

When to use it

Use it for typical-day traffic or load profiles, and for on-call or energy capacity planning. For a raw time series use Sparkline; a single period has nothing to fold.

Sizing

Variants

format also takes Intl.NumberFormatOptions — with a locale, the accessible summary's fold position and peak value follow that locale's own decimal mark ("14,0" in German, not "14.0"). The band and median line themselves don't change shape; only the announced numbers are localized.

Edge cases

A single observation reports a real accessible name (median and peak both equal that one value) but has no width to fold across, so nothing visibly paints. Identical values across every bin still render as a flat line, distinct from an empty data array, which renders nothing and announces "No data." When a bin holds too few observations the band collapses to the median there rather than inventing a width.

Four homes

Accessibility

The accessible name reports the peak — "Median peaks at 14 (82.5)." The interactive entry roves the folded axis with ←/→, announcing the median and middle-half at each position.

The interactive entry follows the shared interaction contract: arrow keys rove between units on both axes, Home and End jump to the ends, and a click, tap, Enter or Space selects a unit — pinning its readout so it survives blur, until you select it again or press Escape. On touch, a tap pins and a drag scrubs.

Props

Plus the shared grammar — data, domain, color, title, summary, format — and the layout props (width, height, className, style) that every chart accepts. Interactive entries also share animate and live, and — wherever a chart has more than one navigable unit — onActive, onSelect, selectedIndex and defaultSelectedIndex; and — wherever the chart shows a hover value — readout. See the shared grammar.