Charts & gauges

Try it

Readings over time

Each is the short form of a chart card: the latest reading, its verdict and the figures behind it. The chart view adds the trend.

Instruments

A dial, compass or ring leads when the question is where a reading sits right now.

Flow and level

A hero number for one live value, with the stats and the table that explain it.

Schedules and forecasts

What is planned, what is running and what is coming, read against today.

Six tones, five roles each

The status panel says what a reading means. Each tone sets its surface, ring, icon and two text colours, from the design system’s status tones.

The canonical band

The grey one-line footer under a widget, in two shapes.

Showing a reading

Three geometries, chosen by how many numbers the card has to carry at once.

Rows that carry state

Where a card has to show several things happening at once, it stops being a reading and becomes a list.

Tokens

Try it

Change the range and the state, and hover the plot to read a reading.

<WAreaChart
  series={[{ data: soil30, name: '30 cm', color: SERIES_RAMP[0] }]}
  times={times}
  domain={[thu24, now]}
  yMin={10} yMax={40} unit="%"
  band={[22, 34]} bandLabel="Refill to full"
  thresholds={[{ value: 22, label: 'Refill 22%', short: '22', tone: 'warn' }]}
  answer={{
    value: latest, unit: '%', label: 'Now',
    delta: { value: change, period: 'vs 24 h ago', unit: 'pts' },
    verdict: { tone: 'ok', label: 'Above refill' },
  }}
  ariaLabel="Soil moisture at 30 cm, Block 4"
/>

When to use

Series colours

Assign series in this order, and never skip a stop. Green, amber and red mean status, so keep them for verdicts and thresholds.

Answer first

Lead with the latest reading, its change over a named period, and a verdict. The band and threshold are labelled in the right gutter, clear of the data.

<WAreaChart
  series={[{ data: soil30, name: '30 cm', color: SERIES_RAMP[0] }]}
  times={times}
  domain={[thu24, now]}
  yMin={10} yMax={40} unit="%"
  band={[22, 34]} bandLabel="Refill to full"
  thresholds={[{ value: 22, label: 'Refill 22%', short: '22', tone: 'warn' }]}
  answer={{
    value: latest, unit: '%', label: 'Now',
    delta: { value: change, period: 'vs 24 h ago', unit: 'pts' },
    verdict: { tone: 'ok', label: 'Above refill' },
  }}
  ariaLabel="Soil moisture at 30 cm, Block 4"
/>

Several series

Draw soil moisture by depth as one chart, a line per probe, shallowest first.

<Legend
  items={[{ label: '10 cm' }, { label: '30 cm' }, { label: '60 cm' }]}
  period="Last 7 days"
/>
<WLineChart
  series={[
    { name: '10 cm', data: soil10, times: t10 },
    { name: '30 cm', data: soil30, times: t30 },
    { name: '60 cm', data: soil60, times: t60 },
  ]}
  domain={[thu24, now]}
  minValue={10} maxValue={40} unit="%"
  height={260}
  endLabels
/>

Gaps

Pass times, so readings sit where they happened. A missing reading breaks the line and reads n/a, never 0.

<WAreaChart
  series={[{ data: soil10, name: '10 cm', color: SERIES_RAMP[0] }]}
  times={times}       // null = a missed reading
  domain={[thu24, now]}
  yMin={0} yMax={40} unit="%"
/>

States

Set state so the chart says what it knows. A stale chart keeps its data, greyed, and says when it last heard.

<WAreaChart … state="loading" />
<WAreaChart … state="stale" />
<WAreaChart … state="empty" />

Bar

The scale starts at zero, so set only yMax. Lead with the total, because that’s what anyone asks of rain.

<WBarChartDc
  data={rain}          // null = the gauge missed that day
  times={days}
  yMax={12} unit="mm"
  state="partial"
  answer={{
    value: total, unit: 'mm',
    delta: { value: total - previous, period: 'vs previous 14 days' },
    verdict: { tone: 'idle', label: '1 day missing' },
  }}
/>

Stacked panels

Give each measure its own panel on one time axis. One crosshair runs through every panel, and one readout lists them all.

<WChartStack
  domain={[thu24, wed30]}
  summary="Bore 2 flow fell from 2.1 to 1.4 L/s on Mon 28…"
  panels={[
    { key: 'tank', title: 'Tank 3 · level %', height: 130, chart: <WLineChart times={t} series={[{ name: 'Tank 3 level', data: level }]} unit="%" minValue={0} maxValue={100} thresholds={[{ value: 30, label: 'Pump on 30%', short: 'On', tone: 'neutral' }]} /> },
    { key: 'flow', title: 'Bore 2 · flow L/s', height: 80, chart: <WAreaChart times={t} series={[{ data: flow, name: 'Bore 2 flow', color: SERIES_RAMP[0] }]} yMax={2.5} unit="L/s" fill="none" minmax={false} /> },
    { key: 'runtime', title: 'Pump runtime · h/day', label: 'Pump runtime', height: 110, chart: <WBarChartDc times={days} data={hours} yMax={6} unit="h" /> },
  ]}
/>

State timeline

Give each zone its own lane. A state has no y value, so don’t plot it as a line.

<WStateTimeline
  lanes={[
    { name: 'Zone 1', runs: [{ from: .04, to: .19, state: 'run' }] },
    { name: 'Zone 2', runs: [{ from: .30, to: .34, state: 'fault' }] },
    …
  ]}
  xLabels={['12 am', '6 am', '12 pm', '6 pm', '12 am']}
  now={0.47}
/>

Accessibility

Pass ariaLabel with a one-sentence summary; the state is added to it. Line charts and stacks are one tab stop, and a screen reader hears each reading as the arrow keys move.

Props

Every engine takes times, domain, state, answer and thresholds. A reading is a number, or null for none.

Tokens

Try it

Change the spray window, then press Replay to watch the arc sweep.

<WGaugeDial
  size={160}
  value={4.6}
  min={0}
  max={20}
  zones={DELTA_T_ZONES}
  contained
  ariaLabel="Delta-T 4.6, preferred for spraying"
  animate
/>

When to use

Anatomy

A 270° dial. The track holds the value arc in the colour of the band the reading falls in, and a white marker ringed in that colour. A thin ring outside the track shows each band’s colour, and every band edge is labelled.

Delta-T

The spray window. Green is the preferred 2–8 band, amber sits either side of it and red starts at 10.

Temperature

Pass your own zones for another scale. Temperature runs 0–50 °C in four bands, and cold takes teal so it doesn’t share amber with hot.

Soil moisture at depth

One rail per probe depth, shallowest first, so the rails sit the way the profile sits in the ground.

Wind

A full circle, because 359° and 1° are neighbours. Only the direction indicator is blue.

Fire danger

A half arc, because a fire index reads as how far up the scale, not where in a band. The rating is named in text under the number.

Content

Accessibility

Props

Tokens