Gauge grid panel

Who it’s for

Anyone watching the same measurement on many things at once. A water utility with forty pumps, a fleet manager with tank levels across a yard, a building engineer with a floor of room sensors, a farm with silo levels. One gauge widget per device turns a dashboard into a wall of tiles nobody maintains; the question here is which of them is drifting, and the answer should take a glance rather than a scroll.

What it does

Six pumps reporting pressure against a scale of 0 to 10 bar and a healthy band of 3 to 7: three sit in the band and read green, 8.9 and 7.2 ran high, 2.4 fell low, and all three turn red without anybody comparing them to a threshold in their head. Sorting by distance outside the band puts 8.9 first, then 2.4, then 7.2 — ranked by how wrong they are rather than by how large they are.

• Draws one gauge per entity and fits them to the widget itself, solving the arrangement for the space it has rather than asking for a column count.
• Shares one scale and one healthy band across the grid, drawn behind every gauge, so a reading is judged without remembering what the limits were.
• Reads the limits from each entity when you want it to. A device carrying its own rating is drawn against that rating, which is what lets a 10 bar pump and a 6 bar pump sit in the same grid and still mean something side by side.
• Offers aligned bars, which compare honestly because the eye measures length, or dials, which read from across a room and look like the panel they replace.
• Brings the worst to the top left on request, so a grid of forty does not have to be read at all on a normal day.
• Shows the latest reading of one key. It does not chart history, and the reason a gauge went red belongs to an alarm rather than to this widget.

How to set up

The widget takes one key across as many entities as the alias resolves to, and one scale that they all share.

Data keys

• One numeric key — Timeseries or Attribute. The reading each gauge shows, taken as the latest value rather than over a time window. Its units and decimals come from the key itself. Point the widget at an alias that resolves to several entities and each one becomes a gauge, named after the entity; with a single entity the key names it instead. A non-numeric reading, or one that never arrived, shows a dash rather than a zero, which is not the same thing.

Gauges

• Layout — Aligned bars by default. Bars stand one under another from a shared zero, which is what makes an outlier findable without reading a number, and they fit more entities in the same space. Dials look like an instrument panel and read from a distance, at the cost of comparing angles instead of lengths.
• Scale starts at and Scale ends at — 0 and 100 by default. The ends of the scale every gauge is drawn against. Each accepts a number, or ${keyName} to read it from each entity, or ${keyName:100} to name a fallback for the entities that do not carry that key. A reading past either end fills or empties its gauge rather than drawing past it, so a runaway value stays visible.
• Healthy from and Healthy to — 20 and 80 by default, and each accepts the same three forms. The band is drawn behind every gauge, and a reading outside it takes the second color. Leave an edge empty for a limit that only applies one way; leave both empty and there is no band at all, which is what you want when the grid shows values rather than judging them.
• Order of the gauges — As configured by default. Furthest outside the band first ranks by how far a reading is from the healthy range in either direction, so the gauge that needs attention arrives at the top left whether it ran high or low.

How to customize

• To match the gauges to your palette — set Inside the band and Outside the band. One color for both sides of the band on purpose: the gauge already shows which way it went.
• To fit more entities on screen — choose Aligned bars in Layout. The grid works out its own rows and columns either way, so nothing else needs changing.
• To show values without judging them — clear both Healthy from and Healthy to. Every gauge is then drawn in the first color and the band disappears.

Tips

• Keep one measurement per grid. Pressure and temperature in the same panel share a scale that cannot mean anything for both, and the widget will not stop you.
• Use ${keyName} for the limits as soon as the things you are watching are not identical. A rating written on the device as a server attribute is set once, survives dashboard edits, and travels with the device when it moves to another dashboard.
• Give the reference a fallback — ${maxPressure:8} — when only some of the fleet carries the attribute. Without one, a gauge whose key is missing is drawn with no band at all, which is deliberate: an unknown limit should not be shown as a green gauge.
• Sort by distance outside the band on any grid big enough to scroll. The point of forty gauges is not to read forty gauges.
• Turn the dials on for a screen people walk past and the bars on for the dashboard they work in. Both draw the same data, and the layout is one setting away.