Trend value card

Trend value card

Shows one time-series key from one entity as a large number for the selected time window, and compares it with the same period earlier so the direction of travel is always in view. The text sizes itself to fill whatever space the card is given.

Features

• One number per card, computed over the dashboard time window
• Automatic comparison with an earlier period, as percent change, absolute change, or both
• Comparison period selectable: the previous window of equal length, or an hour, a day or a week earlier
• Direction-aware colouring — a falling value reads green when falling is the good outcome
• Value can be the latest reading, average, sum, minimum, maximum, first, or the change across the window
• Last update time, relative or absolute, with the exact timestamp on hover
• Icon on any side, with its own colour and background
• Auto-scaling text that fills the card, plus four vertical layouts
• Fonts and colours configurable per element, with no scripting
• No external libraries

Data keys

Exactly one time-series key from one entity. The widget enforces this — the configuration UI will not offer a second datasource or a second key.

Key	Type	Notes
any numeric key	timeseries	The value to display. Non-numeric and empty readings are skipped

Nothing is hardcoded about the key name: point it at temperature, energyProduced, waterConsumption, or anything else numeric.

Label, units and decimals come from the data key, set where you configure the key itself. The widget deliberately does not duplicate them in its own settings — two places to set the same thing means one of them is silently ignored. A key with no label falls back to its name, and a key with no decimals 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 averages.

How the trend is calculated

The big number covers the widget time window. The trend applies the same calculation to an earlier window of identical length:

Compare against	Earlier window
Previous period (dynamic)	immediately before the current one — a 24 h window against the 24 h before it
1 hour earlier	the current window shifted back one hour
1 day earlier	shifted back one day
1 week earlier	shifted back one week
No comparison	trend row hidden

Both sides are reduced by the same function — whichever is set in Value shown — so an average is 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 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.

The earlier period is fetched with a second, private query. The widget never moves the dashboard time window.

Trend colours

State	Default	Meaning
Good change	#2e7d32 green	Moving in the direction set by Which direction is good
Bad change	#d12730 red	Moving against it
No change	#5f6368 grey	Equal values, or no comparison available

The arrow always points the way the value actually moved; only the colour reflects whether that is welcome. Set Which direction is good to Falling is good for error rates, downtime, water or energy consumption, or to Neither to colour every change the same.

That separation is the point of the widget: a water meter reading 38.4 m³ with a green downward arrow says less water than yesterday, and that is good in one glance.

Configuration

Value

Setting	Default	Description
Value shown	Latest reading	Latest, average, sum, minimum, maximum, first, or the change across the window
Group thousands	on	12,345.7 instead of 12345.7, using the dashboard locale
Show label	on	Hides the label line without touching the data key
Text when there is no data	—	Shown when the window holds no numeric readings

Trend

Setting	Default	Description
Compare against	Previous period	See the table above
Show trend	on
Trend shows	Percent change	Percent, absolute, or both
Which direction is good	Rising is good	Controls the colour, not the arrow
Show what it is compared to	on	Appends vs previous 24 h and similar
Good / Bad / No change colours	green / red / grey

Icon

Setting	Default	Description
Icon	none	Any Material or MDI icon; leave empty to hide the icon block
Icon colour	#ffffff
Icon background	theme primary	Empty follows the platform’s primary colour
Icon side	Left of the value	Left, right, above, or below
Icon alignment on the other axis	Center	Start, center, or end

Icon side picks which side of the value the icon sits on; Icon alignment positions it along the other axis, so start means top when the icon is beside the value and left when it is stacked. Twelve combinations. 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

Setting	Default	Description
Show last update time	on	Timestamp of the newest reading in the window
Format	Relative	4 minutes ago, or an absolute date and time
Prefix	Updated	Set empty for just the time
Text and colour	grey	Font and colour

Style

Setting	Default	Description
Auto-scale text to the widget size	on	Value, label, trend and icon are sized from the card’s dimensions
Vertical content layout	Grouped in the middle	Middle, top, bottom, or spread across the full height
Value / Label / Trend / Last update text	inherited	Weight, style and family per element
Value / Units / Label colours	dark / grey / grey

Sizing and layout

Auto-scale derives every size from the room the card actually has, and from how many rows are switched on — hiding the label, trend or timestamp gives the number the space they were using. On a 390 × 190 card with everything shown the value lands around 63 px; with the label alone above it, around 95 px. The icon is accounted for too: beside the value it takes width, above or below it takes height. Whatever the estimate, the value then shrinks until it fits, so a long number never overflows.

Vertical content layout decides how the content block is distributed inside the full height:

Layout	Result
Grouped in the middle	Label, value, trend and timestamp together, vertically centred
Grouped at the top	The same block pinned to the top
Grouped at the bottom	The same block pinned to the bottom
Spread	Label at the top, value and trend in the middle, timestamp at the bottom

Spread is the one for cards taller than their content needs — it uses the whole height deliberately instead of leaving a gap, which is what makes a row of these cards look intentional. The value and trend stay glued together in every mode, so the change never drifts away from the number it belongs to.

With auto-scale on, the size in the font settings is ignored; weight, style and family still apply. Turn it off to control sizes yourself.

The widget declares no font family of its own. It inherits whichever face the ThingsBoard instance uses, so it stays consistent with the surrounding dashboard and does not override white-labeling.

Actions

One action source, Card click, appears in the widget’s Actions tab. Attach any action type — navigate to a dashboard state, open a dialog, run custom JavaScript — to turn the card into a drill-down to the full history of the key it shows.

Requirements

Community and Professional editions both work; nothing here uses PE-only features, and no external libraries are loaded.

One behaviour to know before building a dashboard around it: with a realtime time window the current period moves continuously, so the earlier period is re-queried only after the window has drifted by 10% of its own length. A 24 h realtime window therefore refreshes its comparison about every 2.4 hours rather than every second. The number itself and the last update time still follow every incoming reading.