Entity cards with charts and alarms

Who it’s for

Anyone watching a fleet of entities who wants each one’s current numbers and recent trend without opening them one at a time, and who needs to know “which of these need attention right now?” One card per entity puts the latest readings, a trend chart and any active alarm side by side, so a grid of a dozen devices or a thousand reads the same way — and the ones in alarm are the first thing you see.

What it does

A solar farm with 40 inverters shows one card per inverter: the latest power reading as a label and value, a 24-hour production chart underneath, and a red stripe down the left edge of the three inverters currently in alarm — visible without scrolling past the other 37.

• One card per entity, on a grid that reflows with the widget, with as many columns as the width allows or a fixed count.
• Latest values and a trend chart together — latest data keys are listed as key and value rows, timeseries keys draw as a line or bar chart, with a picker on the card when more than one is charted.
• Alarms surfaced at a glance — a stripe, a full border, a filled card, or a badge alone marks any entity with an active alarm, read across all time rather than the dashboard window.
• Sort by entity name or by alarm severity, and let the viewer switch between the two.
• Your own actions in each card’s title row, plus an optional tile that fires an add-entity action.
• Only the visible page is fetched — server-side paging keeps a grid of a thousand entities as cheap as a dozen.
• Card height isn’t a setting — every card in a row matches the tallest, worked out from the configured keys and the chart, so a row is never ragged; a card that’s shorter than its own content scrolls inside itself instead.

How to set up

Data keys

Both sections of the datasource are used, and which one a key sits in decides where it appears on the card. Any key names work — the widget does not expect particular ones.

Key	Role	Type	Description
any key	Latest key/value row	Attribute or Timeseries	Listed inside the card as a label and value; the label, units and decimals are taken from the key itself
any key	Chart series	Timeseries	Drawn as a line or bar on the card’s chart, in the key’s own color

A card with no history for its selected chart key, in the current time window, shows a placeholder message instead of an empty box. A latest key that has never reported shows the empty-value placeholder inline, or the row can be left out entirely — see Keys and text below.

Paging

Setting	Default	Effect
Split into pages	On	Fetches and shows one page of entities at a time. The card layout is identical either way — pages only limit how many load at once.
Cards per page	0 (fit to height)	How many entities each page requests from the server; 0 fits as many as the widget’s height allows and refits when it’s resized.
Most entities to load	100	Used only with paging off. The widget still asks the server for one page, just a large one, sized by this.

Alarms

Setting	Default	Effect
Highlight entities that have an alarm	On	Subscribes to alarms for the entities on screen and drives every alarm marking below; off, no alarm data is read at all.
Count alarms from severity	Any severity	Ignores alarms below the chosen severity when deciding whether a card counts as in alarm.

How to customize

Layout

• Fit as many columns as the width allows, or fix a count — Columns (0 is automatic, using the minimum card width below).
• The narrowest a card may get, used only while Columns is left at 0.
• Space between cards.
• An add-entity tile among the cards — Show the add tile, and where it sits, first or last; it appears only once an “Add new entity” action exists on the Actions tab, and sorting the entities never moves it.

Sorting

• Which order the cards start in — Order the cards by entity name, or by alarm, worst first, falling back to name.
• Let the viewer change it themselves — puts a Name / Alarm switch beside the grid; off fixes the order to the choice above.

Chart

• Line, bars, or no chart at all — turning it off leaves the card as a plain list of keys.
• A heading above the chart, shown beside the series picker; clear it for no heading.
• A taller chart — sets a floor, not a fixed height; the chart still takes whatever room the values above it leave.
• Fill under the line, for a line chart.
• A fallback chart color, used only when the data key carries none of its own.
• The value axis and the time axis, shown or hidden independently.
• What an empty chart says when the chosen key has no history in the window, or the card doesn’t report it at all.
• A border around the chart block, rounded to match the card; clear it for no outline.
• Space above the chart, separating it from the values.
• Grid line color.

Card and entity name

• Card background, border and corner rounding.
• Whether the entity’s name is shown, and which one — label falling back to name, or name falling back to label.
• The name’s color and font.

Alarm marking

• How an alarm marks the card — a stripe down the left edge, the whole border, the card background, or nothing on the card and the badge alone.
• The alarm color itself.
• Readable text and chart on a filled card — used only when the card fills with the alarm color, so its own text and line stay visible against it.
• A badge beside the entity name, with its own icon and text, shown alongside any of the four marking styles above.

Keys and text

• Leave out keys that have never reported, instead of showing them with the placeholder — off by default, so every card keeps the same rows and the grid stays even.
• The placeholder for a key with no value.
• The decimal separator — a point or a comma; how many decimals are shown is set on each data key, this only picks the mark between the parts.
• Colors and fonts for key names and values.

Tips

• Set up your card actions and the add-entity action on the widget’s Actions tab, under “Card action” and “Add new entity” — they aren’t settings here, but the add tile and the per-card action buttons only appear once those actions exist.
• Each card’s chart uses ECharts, which is declared as a widget resource and loads automatically — there’s nothing to install. If it’s ever unavailable, the chart area says so instead of staying empty.
• Alarms are read for all time, not the dashboard time window, so a card can show as in alarm even while its own chart, which does follow the dashboard window, looks calm. Cleared alarms never count toward it.
• With very large entity counts, sorting by alarm reorders only the entities already loaded from the server, not the ones still further down the list — keep the page size generous if you rely on it to surface every alarm across a big fleet.