Widgets

The dashboard cards: the short form of a chart, and the tones and layouts their contents are built from.

Live React port

Try it

Sprayer Met — Delta-T
1m ago · 11:15 am
Live
4.6
Preferred for spraying
ΔT is within the optimal range
Air temp
21.8°C
Humidity
54%
Wind
11km/h
Preferred band 2 – 8 °CWind 3 – 15 km/h
Freshness
Freshness colours the meta line, adds a Late, Stale or Offline badge and greys the body. The head stays readable.

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.

Block 3 — Soil Moisture
15m ago · 11:00 am
Live
19.1%
Root zone · 30 cm
In range
Refill at 14 %, full at 26 %
10 cm · latest19.0%
30 cm · latest19.1%
60 cm · latest22.9%
Refill point
14%
Full point
26%
Last irrigated
Mon
Probe 3 depths · %VWCSet per block
Soil moisture · three depths
Dam 2 — Water Quality
16m ago · 11:00 am
7.4pH
Within the 6.5 – 8.5 compliance band
Turbidity elevated
18 NTU against a 40 NTU limit
Turbidity18NTU
pH range · 7d6.9 – 7.8
Turbidity max · 7d34NTU
Dissolved O₂
8.1mg/L
Water temp
17.4°C
Breaches
0
Water quality · two measures
Field C — Rainfall
1m ago · 10:30 am
Live
4.2mm
Today · Wed 9am – Thu 9am
YesterdayTue 9am – Wed 9am0.0mm
Last 7 days26.4mm
July58.1mm
2026412.6mm
Wettest day
7.5mm
Rain days
3
vs average
+18%
Rain day boundary 9 amBucket · 0.2 mm
Rainfall · totals per day
DAZ Beinke — Battery
1m ago · 11:15 am
Live
12.6V
Holding charge
Solar covered the last 7 nights
Overnight minimum12.1V
Solar charge · today4.8Ah
Cutoff threshold11.4V
Autonomy
6.2d
Panel
20W
Deep cycles
3
Pack 12 V · 7 Ah SLAInstalled Mar 2024
Battery · a slow decline
Sprayer Met — Fire Danger
1m ago · 11:15 am
Live
28FFDI
Forest fire danger index · rated High
Rated High until 4 pm
Hot-work permits suspended above 24
Peak · today33FFDI
Drought factor7.4
Permit threshold24FFDI
Air temp
31.2°C
Humidity
19%
Wind
27km/h
Scale McArthur Mk5Recomputed hourly
Fire danger · against a threshold

Instruments

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

Field A — Wind
1m ago · 11:15 am
Live
NESWSSW210°
Latest speed14km/h
Strongest gust · 1h22km/h
Avg speed · 1h11km/h
Wind · bearing and speed
North Bore — Consumption
1m ago · 11:15 am
1,820
kL total
Day · 6:00 am – 6:00 pm1,165kL64%
Night · 6:00 pm – 6:00 am655kL36%
64% of water used during the day
Consumption · share of a budget

Flow and level

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

Bore Pump — Flow
1m ago · 11:15 am
Live
142kL/day
Daily total for the current 24-hour period
Maximum168kL
Average94kL
Total · 30 days2,818kL
Peak hour
11.4L/s
Runtime
14.2h
Starts
6
Meter factor 1 pulse = 10 LCalibrated 12 Jun
Bore pump · flow against last week
Flow Rate
1m ago · 11:15 am
Live
94L/s
Instantaneous rate at the last sample
PeriodAvg L/sPeak L/sTotal ML
24 h941688.1
7 d8818153.2
30 d91192235.9
90 d86204668.7
12 mo822312,586
Peak of record 231 L/sSampled every 5 min
Flow rate
Dam 2 — Water Temperature
48m ago · 10:28 am
17.4°C
Surface probe · 300 mm below waterline
Approaching the algal window
Bloom risk rises above 19 °C
Warmest · 7d19.8°C
Coolest · 7d14.1°C
Bloom threshold19.0°C
Daily range
3.2°C
Hours above
6.4h
Trend · 7d
+1.4°C
Water temperature · late

Schedules and forecasts

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

Pivot 2 — Schedule
1m ago · 7:10 am
Live
48hrs
Total run time
Irrigation complete
No faults recorded
Started
Sun, 26 Jul
6:18 pm
Finished
Tue, 28 Jul
6:18 pm
ValveValve 2 — Main line
Scheduled byWestys · 26 Jul
Irrigation schedule
Channel 4 — Water Order
1m ago · 11:15 am
Live
42L/s
Current water order · next 8 hrs
Delivering on schedule
Order confirmed and active
PeriodTotal AFDuration hrs
Last 7 days217.3147
July 2026496.2360
June 2026437.8320
Ordered rate 42 L/sEnds Thu 6:00 pm
Water order · delivering
Evapotranspiration — Forecast
1h ago · 6:00 pm
4.8mm
Today's crop water demand
Yesterday5.1mm
Last 7 days4.8mm
July4.6mm
20263.9mm
Demand peaks Tue — 3.7 mm with no rain
7-day total
19.8mm
Wettest day
Fri
Deficit
-6.4mm
Model FAO-56 PenmanUpdated 6:00 pm
Evapotranspiration forecast

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.

Preferred for spraying
ΔT is within the optimal range
ok
Marginal for spraying
Proceed with caution
note
Action required
A valve is awaiting acknowledgement
act
Not optimal for spraying
Spraying is not recommended
bad
Currently irrigating
Pivot 1 started 42 minutes ago
live
No schedule set
This site runs on manual starts
idle
ok · note · act · bad · live · idle. act sits between note and bad: something needs a person, but nothing is wrong yet.

The canonical band

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

64% of water used during the day
spanel.one · idle
Preferred band 2 – 8 °CWind 3 – 15 km/h
wband · two-slot
Both use the neutral tone. Use the status panel for one line, and the band when a second value sits on the right.

Showing a reading

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

12.4L/s
Latest reading · 11:15 am
hero
Air temp
21.8°C
Humidity
54%
Wind
11km/h
fact grid
Latest speed14km/h
Strongest gust · 1h22km/h
Avg speed · 1h11km/h
stat group
Hero for one number, fact grid for three, stat group for a short list.

Rows that carry state

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

2 operations need attention
Zone B paused · Valve 2 alarm tripped
Zone A — DripActive
6:00 – 7:30 am62%
Zone B — DripPaused
7:45 – 10:35 am
Valve 2Alarm tripped
6:45 – 7:30 am
Valve 1Resuming
7:05 – 9:55 amAlarm cleared
Zone C — SprayUpcoming
9:00 – 9:50 am50 min
Each row names its state in a badge. The bar only fills once a run has started, so Upcoming and Paused rely on the badge.
PeriodMinAvgMax
Today4.111.819.2
Yesterday3.810.417.6
7 days2.911.122.4
A widget table is the system Table at compact density, with figures right-aligned in tabular numerals.

Tokens

TokenValueWhere it lands
--ok-surface / -ring / -icon / -title / -detail#E1FAEA · #C1F4D4 · #019939 · #004D1D · #016626One tone, five roles. The other five tones follow the same shape.
--live-*#D6F4FF · #BDEDFF · #1877F2 · #081B45 · #0C296AThe blue ramp, 200 / 300 / 1000 / 1200 / 1100. Mirrors TONE.live.
--note-*#FFF1DA · #FFE9BA · #9D6508 · #4F3304 · #764C06Squash 200 / 300 / 1000 / 1200 / 1100: the disc, title and detail each take the step that passes on the surface. Mirrors TONE.note.
--idle-surface#F5F5F5Resolves --color-grey-100. The canonical band surface.
--idle-ring#E6E6E6Resolves --color-grey-400. The band outline stroke that was called out.
--badge-ghost-bg#F1F1F1Two hops: --color-grey-200. The LATE badge.
--cat-violet#6E23C9Violet-800, mirrors CAT.violet. Categorical, not semantic.
--m-track#F5F5F5Meter track, via --idle-surface.