# FoldedDayBand (/docs/charts/folded-day-band)

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.

```tsx
import { FoldedDayBand } from "@microcharts/react/folded-day-band";

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

<FoldedDayBand data={observations} today={today} title="Typical day" />
```

## Install

```tsx
import { FoldedDayBand } from "@microcharts/react/folded-day-band";

<FoldedDayBand data={observations} today={today} title="Typical day" />
```

Setup (package + stylesheet): [Quickstart](/docs/quickstart#set-up-with-an-ai-agent) or paste [`/agent-setup.md`](/agent-setup.md) into your agent.

## Try it

```tsx
import { FoldedDayBand } from "@microcharts/react/folded-day-band/interactive";

<FoldedDayBand
  data={observations}
  today={today}
/>
```

## 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

**on-call cell**

```tsx
<FoldedDayBand data={observations} width={80} height={20} />
```

**now vs typical**

```tsx
<FoldedDayBand data={observations} today={today} />
```

## Variants

```tsx
<FoldedDayBand data={observations} percentiles={[[25, 75]]} />
<FoldedDayBand
  data={observations}
  format={{ minimumFractionDigits: 1, maximumFractionDigits: 1 }}
  locale="de-DE"
/>
```

`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

```tsx
<FoldedDayBand data={[{ t: 3, value: 10 }]} title="Single observation" />
```

```tsx
// every bin lands on the same value — the band and median still render,
// as a flat line, not an empty chart
<FoldedDayBand
  data={Array.from({ length: 48 }, (_v, i) => ({ t: i, value: 7 }))}
/>
```

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

**In a sentence**

```tsx
<p>
  Traffic vs typical day{" "}
  <span className="mc-inline">
    <FoldedDayBand data={observations} summary={false} />
  </span>{" "}
  — afternoon peak normal; tonight runs hot.
</p>
```

**In a table cell**

```tsx
<td>
  <FoldedDayBand data={observations} />
</td>
```

**In a KPI card**

```tsx
<div className="kpi">
  <span className="figure">+14</span>
  <span className="unit">above median at 2pm</span>
  <FoldedDayBand data={observations} />
</div>
```

**In a tab header**

```tsx
<button className="tab">
  US-East <FoldedDayBand data={observations} />
</button>
```

## 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](/docs/accessibility#one-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, press `Escape`, or
press outside the chart. On touch, a tap pins and a drag scrubs.

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `data` (required) | `{ t, value }[]` | Raw observations across many periods. |
| `period` | `number` | Fold length (168 folds a week). |
| `today` | `{ t, value }[]` | The current period overlaid. |
| `percentiles` | `[number, number][]` | Percentile pairs, outermost last. |
| `bins` | `number` | Fold-axis resolution (default 24). |
| `animate` | `boolean` | (interactive) Opt-in entrance motion when the chart mounts client-side — add `import "@microcharts/react/motion"` once. Inert on the server, on hydrated server HTML, and under `prefers-reduced-motion`. |

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](/docs/quickstart#the-shared-grammar).