Gauges

Dials, rails and a compass for agricultural readings: Delta-T, temperature, soil moisture, wind and fire danger.

Refined portWildSoilMoistureGauge.vueWGaugeDial, WGauge, WCompass, WSoilMoisture, WFireIndex

Try it

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

Spray window

Size

<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

Use a dial when a reading only means something against its bands, like Delta-T or air temperature.
Use the soil rail for moisture read at several depths on one probe.
Use the compass for wind direction, which wraps round at north.
Use the fire arc for a fire danger index, where the rating matters more than a band edge.

Don’t use it

To show how a reading changed over time. Use a line chart.
For a reading with no bands. Show it as a number in a widget.
For progress towards a total. Use a progress bar.

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 · 160

Delta-T

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

2.0 · on the edge

4.6 · preferred

11.5 · not optimal

A reading on a band edge takes the lower band, so 2.0 reads amber.

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.

6.4 · 0–10 band

14.2 · 10–30 band

43.1 · 40–50 band

Soil moisture at depth

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

8″ Soil Moisture3:00 pm

8.6%VWC

16″ Soil Moisture2:00 pm

16.2%VWC

24″ Soil Moisture2:00 pm

18.8%VWC

32″ Soil Moisture1:10 pm

27.1%VWC

48″ Soil Moisture1:30 pm

40.0%VWC

Refill pointBelow refillBelow stressset per depth

The white marker is each depth’s refill point. Set each row’s colour to its status: amber below refill, red below stress.

Wind

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

Bearing

The centre carries the cardinal and the bearing in text, so the needle never has to be read alone.

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.

35FFDI

High

0150+

Rating

The arc fills to 150. Readings above 150 keep a full arc and print the actual figure.

Content

Name the band in text beside the dial: “Preferred for spraying”.
Put the unit in unit so it sets smaller than the reading.
Use display to round the reading without moving the arc.
Write soil depths with the double prime: 8″, 16″.

Accessibility

Give each dial an ariaLabel naming the reading and its band, so it’s heard as one image.
The soil rail shows status by colour alone, so name it in text too.
The compass announces its bearing and cardinal.
The fire arc is a meter capped at 0–150. Its value text carries the actual index and rating.
Under reduced motion the arc and the needle start at their end state.

Props

Prop	Type	Default	Description
value	number	—	The reading. The arc clamps to min and max.
min / max	number	—	Scale ends: 0–20 for Delta-T, 0–50 for Temperature.
zones	GaugeZone[]	—	Bands as from, to and color. DELTA_T_ZONES or TEMP_ZONES.
size	number · 'sm' \| 'md' \| 'lg'	160 · 150 · md	Px for dial and compass. WFireIndex takes sm, md or lg.
trackW	number	22	Track thickness in viewBox units.
contained	boolean	false	Pads the box so edge labels stay inside it.
unit	string	—	WGaugeDial. Suffix after the reading, such as °C.
display	string	—	Printed reading, when it differs from value.
ariaLabel	string	—	Names the dial and its band for screen readers.
animate	boolean	false	Sweeps the arc, or springs the needle, on mount.
replay	number	0	Increment to run the entrance again.
bearing	number	210	WCompass. Needle direction in degrees.
speed / unit	string	—	WCompass. Centre label and sub-label, such as SSW, 210°.
idPrefix	string	—	WCompass. Unique per page, for its shadow filter.
rows	SoilDepth[]	—	WSoilMoisture. Depth, time, fill, refill point, value, colour.
fdi	number	—	WFireIndex. The index reading. Sets the rating and arc.
indexType	'FDI' \| 'FFDI' \| 'GFDI'	'FDI'	WFireIndex. Index name printed under the reading.
showValue	boolean	true	WFireIndex. Prints the reading and index name inside the arc.

Tokens

Token	Value	Where it lands
RAMP.green[800]	#019939	Preferred band, and soil above refill.
RAMP.squash[800]	#EC980C	Marginal bands, and soil below refill.
RAMP.red[800]	#E12121	Top band, and soil below stress.
RAMP.teal[700]	#0692BC	Temperature’s cold band.
RAMP.grey[400]	#ECECED	Dial track and compass face edge.
RAMP.grey[200]	#F5F5F5	Soil track, compass centre, fire track.
RAMP.grey[300]	#F1F1F1	Fire arc ticks.
RAMP.grey[600] / [700]	#DCDCDE · #C9C9CC	Compass ticks.
RAMP.blue[900]	#00AEEF	Compass indicator, fire Moderate arc.
RAMP.green[600] · [900]	#3BBA6A · #018030	Fire Low arc and reading.
T.brandDeepInk	#1877F2	Fire Moderate reading.
RAMP.squash[700] · [1000]	#FFAB1F · #9D6508	Fire High arc and reading.
global-orange-700 · 900	#FF6B34 · #C44518	Fire Extreme arc and reading.
RAMP.red[700] · [800]	#F53535 · #E12121	Fire Catastrophic arc and reading.
T.ink	#0A090B	Dial reading, compass centre, soil values.
T.ink4	#4F4D55	Edge labels, units, compass letters, secondary text.
T.white	#FFFFFF	Dial marker, compass face, refill marker, value pill.
FS.xl4 · W.extrabold	30px · 700	Dial reading.
FS.base · W.semibold	14px · 500	Dial unit.
FS.xs · W.semibold	11px · 500	Edge labels, held at 11px at any size.