# StationGlyph (/docs/charts/station-glyph)

A weather table has one row per station and five fields to fit in each cell. StationGlyph packs the whole observation
into one character, the way a meteorologist's station model does: the center disc fills with sky cover, a wind barb
gives direction and quantized speed, and up to three corner numerals carry temperature, dew point, and pressure. Each
field rides its own channel, so nothing has to be inferred from a shared one, and the numerals sit where a forecaster
expects them.

```tsx
<StationGlyph
  station="KSFO"
  cloud={0.75}
  wind={{ direction: 225, magnitude: 15 }}
  temp={16}
  dewpoint={9}
  pressure={1013}
  size={48}
/>
```

## Install

```tsx
import { StationGlyph } from "@microcharts/react/station-glyph";

<StationGlyph
  station="KSFO"
  cloud={0.75}
  wind={{ direction: 225, magnitude: 15 }}
  temp={16}
  dewpoint={9}
  pressure={1013}
/>
```

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 { StationGlyph } from "@microcharts/react/station-glyph/interactive";

<StationGlyph
  station="KSFO"
  cloud={0.75}
  wind={{ direction: 225, magnitude: 15 }}
  temp={16}
  dewpoint={9}
  pressure={1013}
/>
```

## When to use it

Use it for a dense weather station model, or any multi-field reading that has to fit one cell. A single value belongs in
Delta and a trend over time in Sparkline.

## Sizing

**clear + calm**

```tsx
<StationGlyph station="STN" cloud={0} wind={{ direction: 0, magnitude: 0 }} temp={22} dewpoint={8} />
```

**overcast + gale**

```tsx
<StationGlyph station="KJFK" cloud={1} wind={{ direction: 300, magnitude: 45 }} temp={4} dewpoint={2} pressure={988} />
```

## Variants

```tsx
<StationGlyph station="KJFK" cloud={1} wind={{ direction: 300, magnitude: 45 }} temp={4} dewpoint={2} pressure={988} />
```

## Edge cases

```tsx
<StationGlyph station="STN" cloud={0.3} wind={{ direction: 0, magnitude: 0 }} />
```

```tsx
<StationGlyph cloud={0.4} />
```

```tsx
<StationGlyph />
```

```tsx
<StationGlyph
  station="EDDF"
  cloud={0.6}
  wind={{ direction: 90, magnitude: 22 }}
  temp={-3}
  dewpoint={-9}
  pressure={1024}
  format={{ maximumFractionDigits: 0 }}
  locale="de-DE"
/>
```

Sky cover is disc area and wind is the barb: direction as angle, speed quantized into barbs so the per-barb quantum
holds. Wind speed is quantized rather than drawn to scale for the same reason WindBarb quantizes it, that a barb count
reads exactly where a tiny length difference does not. Below the quarter-step threshold no barb is drawn at all. Absent
fields don't render: no barb, no numeral, and no stop for the keyboard. The disc is the one field with no absent state,
so omitting `cloud` looks and reads exactly like a clear sky.

`format`/`locale` flow through every corner numeral (temp, dew point, pressure) and through the wind speed and numerals
named in the accessible summary: one formatter, one locale, no per-field overrides.

## Four homes

**In a sentence**

```tsx
<p>
  KSFO conditions{" "}
  <span className="mc-inline">
    <StationGlyph station="KSFO" cloud={0.75} wind={{ direction: 225, magnitude: 15 }} summary={false} />
  </span>{" "}
  — overcast, SW 15 kt, 16°C.
</p>
```

**In a table cell**

```tsx
<td>
  <StationGlyph station="KSFO" cloud={0.75} wind={{ direction: 225, magnitude: 15 }} />
</td>
```

**In a KPI card**

```tsx
<div className="kpi">
  <span className="figure">16°C</span>
  <span className="unit">· 1013 hPa</span>
  <StationGlyph station="KSFO" cloud={0.75} wind={{ direction: 225, magnitude: 15 }} />
</div>
```

**In a tab header**

```tsx
<button className="tab">
  KSFO <StationGlyph station="KSFO" cloud={0.75} wind={{ direction: 225, magnitude: 15 }} />
</button>
```

## Accessibility

The accessible name is the whole observation: **"KJFK, wind northwest 45; sky overcast, 4° / 2°, 988."** The interactive
entry roves the _present_ fields with ←/→, so a screen-reader user can step through station, wind, sky, temperature, dew
point, and pressure one at a time; an omitted prop is not a stop. Escape clears the focus back to the whole-observation
reading.

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 |
| --- | --- | --- |
| `cloud` | `number` | Sky cover 0–1; fills the disc. |
| `wind` | `{ direction, magnitude }` | Barb direction + speed. |
| `step` | `number` | Wind-barb quantum — each full barb (default 10). |
| `temp` | `number` | Upper-left numeral. |
| `dewpoint` | `number` | Lower-left numeral. |
| `pressure` | `number` | Upper-right numeral. |
| `station` | `string` | Top-left identifier. |
| `size` | `number` | Disc + barb square edge in viewBox units (default 48). |
| `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).