Entity Heatmap

Visualize telemetry as a color‑coded grid. Each row is an entity (originator), each column is a timestamp, and the cell color encodes the value. Great for spotting hot spots, trends and outliers across many devices at a glance.

---

Features

• Row per entity — every entity resolved by the datasource becomes a heatmap row, labeled by its name (or label). Compare dozens of devices in one view.
• Time on the X axis — all timestamps across entities are merged into a shared, sorted axis.
• Custom color gradient — define your own gradient stops (min → max), or use the built‑in palette.
• Auto or fixed value scale — let the color scale follow the data, or pin it to a fixed min/max so the same color always means the same value across time windows.
• Color scale bar (visual map) — horizontal or vertical, and can be hidden.
• Configurable axes — show/hide X and Y axes, set axis names.
• Timestamp format — Moment.js format string for X‑axis labels and tooltips.
• Units & decimals from the data key — value formatting is taken from the data key’s own settings, so it stays consistent with the rest of your dashboard.
• In‑cell values — optionally print the value inside each cell, with configurable font size, color and outline for readability on any background.
• Cell borders — configurable border color and width.
• Tooltip — shows entity, timestamp and formatted value; kept inside the widget bounds.

---

Data setup

This is a Time series widget.

1. Add a datasource (required). Bind an entity alias that resolves to one or more entities — each resolved entity becomes a row of the heatmap.
2. Add one data key (the telemetry key to visualize, e.g. temperature, fuelLevel).
3. Set the dashboard time window — it defines the range shown on the X axis.

Units and decimals are read from the data key’s settings (Advanced data key configuration), not from the widget settings — configure them there and the heatmap will follow.

Multiple entities, different timestamps

The widget fully supports many entities reporting the same key at different timestamps. All timestamps are merged into one shared X axis; if an entity has no value for a given timestamp, that cell is left empty (no value is invented).

For a dense, aligned grid, aggregate your data into fixed time buckets in the data key configuration (e.g. AVG grouped by hour). This lines every entity up on the same columns.

---

Settings

Setting	Description
Timestamp format	Moment.js format for X‑axis labels and tooltip (e.g. MM-DD HH:mm).
X axis	Show/hide the X axis and set its name.
Y axis	Show/hide the Y axis and set its name.
Color gradient	Ordered gradient stops from min to max. Empty = default palette.
Value range	Auto range uses the data’s min/max. Turn it off to set a fixed Min/Max for a stable, comparable scale.
Value scale (color bar)	Show/hide the scale and choose horizontal or vertical orientation.
Cells	Toggle in‑cell values; configure label font size, color and outline; set cell border color and width.
Show tooltip	Toggle the hover tooltip.

---

Requirements

• Datasource: required. Data keys: exactly one.
• Uses the ECharts library, loaded via the widget’s embedded resources — no extra installation needed by the end user.

---

Tips

• Too many columns? Aggregate the data key (AVG/MAX per interval) — fewer, meaningful columns read far better than hundreds of thin stripes.
• Use a fixed value range when you compare the same metric across different time windows, so a given color always represents the same value.
• Turn on in‑cell values only when cells are large enough to fit the text (few columns/rows); for dense grids, rely on the color and tooltip instead.