Trend value card

Who it’s for

Dashboard authors building a row of KPI tiles ask “is this number better or worse than before, and is that actually good news?” A plain number tells you where a metric stands right now, but not which way it’s moving or whether that direction is welcome — a rising number is good for production, but a falling one is good for a water bill. This card puts the number, the direction, and the right color in one glance.

What it does

A water meter reads 38.4 m³ for the current 24-hour window, down 9.2% from the same period yesterday. Because Which direction is good is set to Falling is good for this key, the arrow points down and the trend reads green — less water, and that’s the good outcome, in one glance.

• One number per card, computed over the widget’s time window — the latest reading, an average, a sum, a minimum, a maximum, the first reading, or the change across the window
• Automatic comparison with an earlier period — the previous window of equal length, or a fixed hour, day, or week back — shown as percent change, absolute change, or both
• Direction-aware coloring — you decide whether rising or falling is the good outcome, so a falling number can read green when that’s genuinely good news
• Auto-scaling text that fills the card, across four vertical layouts, so the same card looks right whether it’s a small tile or a tall panel
• Icon on any side, with its own color and background
• Last update time, relative or absolute, with the exact timestamp on hover
• Shows exactly one key from one entity; it does not combine several metrics into one card or forecast where the trend is heading

How to set up

Data keys

Key	Role	Type	Description
Value key (any name, user-configured)	Main value	Timeseries, numeric	Required — exactly one key from one entity; the configuration UI won’t offer a second datasource or a second key. Non-numeric and empty readings are skipped

Nothing about the key name is hardcoded — point it at temperature, energyProduced, waterConsumption, or anything else numeric. Label, Units, and Decimals come from the key’s own settings, not the widget’s, since the widget deliberately doesn’t duplicate them — a key with no label falls back to its name, and no decimals falls back to two. The card reads [timestamp, value] pairs, so server-side aggregation works too: if the time window aggregates to one-minute averages, the card computes from those.

Value & comparison

Setting	Default	Effect
Value shown	Latest reading in the window	Latest, average, sum, minimum, maximum, first reading, or the change across the window (last − first). Also the function used to reduce the earlier comparison period, so an average is always compared with an average
Compare against	Previous period of the same length	The earlier window fetched for the trend: the previous period of equal length, 1 hour, 1 day, or 1 week earlier, or No comparison to hide the trend row entirely

Actions

Setting	Default	Effect
Card click	None configured	Add one under the widget’s Actions tab, source Card click — navigate to a dashboard state, open a dialog, or run custom JavaScript, turning the card into a drill-down to the full history of the key it shows

How to customize

Value display

• To hide the label line — turn off Show label.
• To turn off thousands grouping — turn off Group thousands (12345.7 instead of 12,345.7, using the dashboard locale when on).
• To change what shows when the window has no numeric readings — edit Text when there is no data.

Trend

• To hide the trend row entirely — turn off Show trend, or set Compare against to No comparison.
• To choose what the trend shows — set Trend shows to Percent change, Absolute change, or both.
• To control which direction reads as good — set Which direction is good to Rising is good, Falling is good (for error rates, downtime, water, or energy use), or Neither to color every change the same. This only changes the color — the arrow always points the way the value actually moved.
• To hide the “vs previous 24 h” style note — turn off Show what it is compared to.
• To recolor the trend states — set Good change, Bad change, and No change colours.

Icon

• To add or remove the icon — set Icon to any Material or MDI name, or leave it empty to hide the icon block entirely.
• To restyle it — set Icon colour and Icon background; an empty background follows the platform’s primary color.
• To place it — set Icon side (left, right, above, or below the value) and Icon alignment on the other axis (start, center, or end) — twelve combinations in total. When the icon is stacked and aligned to center or end, the label, value, trend, and timestamp follow the same alignment so the card reads as one block.

Last update

• To hide the timestamp line — turn off Show last update time.
• To switch between relative and absolute time — set Format to Relative (4 minutes ago) or Absolute.
• To change or remove the prefix — edit Prefix (default Updated ); leave it empty for just the time.
• To restyle it — set the Last update text font and Last update colour.

Style

• To turn off auto-scaling and set sizes yourself — turn off Auto-scale text to the widget size. Font weight, style, and family still apply either way; the size field in each font setting only takes effect once auto-scale is off.
• To change how content sits in the card — set Vertical content layout to grouped at the top, middle, bottom, or spread across the full height (label at the top, value and trend in the middle, timestamp at the bottom — good for a card taller than its content needs).
• To match your dashboard’s fonts — set the Value, Label, and Trend text fonts.
• To recolor the value, units, or label — set Value colour, Units colour, and Label colour.

How the trend is calculated

The big number covers the widget’s own time window. The trend applies the same reducer — whichever function Value shown uses — to an earlier window of identical length, so an average is always compared with an average and a sum with a sum. Percent change is (current − previous) / |previous| × 100, and the note under it names the baseline, for example vs previous 24 h.

Two cases are reported honestly rather than faked: when the earlier window holds no data, the trend reads no comparison; when the earlier value is exactly zero, percent change is undefined, so the card falls back to the absolute change instead.

The earlier period is fetched with its own private query — this widget never moves the dashboard’s time window. With a realtime window, that query only re-runs once the window has drifted by 10% of its own length, so a 24-hour realtime window refreshes its comparison roughly every 2.4 hours rather than every second. The number itself and the last-update time still follow every incoming reading.

Tips

• Set Which direction is good per metric, not globally — Rising is good for production or revenue, Falling is good for error rates, downtime, water, or energy use.
• Turn off Auto-scale and set fixed font sizes when several of these cards sit side by side and their numbers need to line up exactly.
• Pair Card click with a dashboard state that shows the same key as a full time series chart, so the big number becomes a way in, not a dead end.