Heat Map

Note that the widget works in the context of a single thing.

How It Works

The widget displays a grid that crosses the days of the week (Monday to Sunday) with the hours of the day (0 to 23). Each cell represents a weekday-hour slot, and its value is computed by aggregating all the metric values that fall into that slot over the input period.
For example, with the Last 30 days period, the Tuesday – 9 cell aggregates all the values received on every Tuesday between 9:00 and 9:59 within those 30 days.
Cells are colored on a scale ranging from the Min Value Color, associated with the lowest aggregated value, to the Max Value Color, associated with the highest one.
Slots with similar values share similar colors, so recurring patterns and outliers stand out immediately.
By moving the mouse over a cell, a tooltip displays the aggregated value, formatted according to the metric Label, Unit, and Value Filter.

Typical Use Cases:

• Usage patterns: understand when a product is typically operated during the week (e.g., working hours, shifts, weekends).

• Peak detection: identify recurring hourly peaks of consumption, load, pressure, or temperature.

• Activity planning: find low-usage windows to schedule maintenance, firmware updates, or remote commands.

Aggregation Function

Through the Aggregation Function property, you can choose how the values of each slot are aggregated:

• AVG: Returns the average value of the slot.
  Suitable for continuous measurements such as temperature, pressure, or power.

• SUM: Returns the sum of all values of the slot.
  Pay attention that all values are summed, so if applied to a counter metric (e.g., total energy or total working hours), you will get unexpected results.

• MIN: Returns the minimum value of the slot.

• MAX: Returns the maximum value of the slot. Useful for highlighting peaks.

The default aggregation is AVG.
If no values are stored for a slot within the selected period, the cell has no aggregated value.

Period Selection

When entering the page, the widget loads data for the Default Loading Period (Last 7 days if not specified).
To let users change the period, you can place a Period Field on the same page and reference its ID through the Period Variable property.
Whenever the user selects a new period, the heat map is reloaded accordingly.

Since each cell aggregates the same weekday-hour slot across multiple weeks, periods shorter than one week leave some cells empty, while longer periods (e.g., Last 30 days) produce more representative patterns.

<div class="d-flex flex-wrap components-row justify-content-end">
    <period-field-v2 id="heat-period"></period-field-v2>
</div>
<div class="d-flex flex-wrap components-row">
    <heat-map-widget class="flex-fill" [inputs]="{period: 'heat-period'}">
        <metric name="power" label="AVG Power" unit="W" filter="integerFormat"></metric>
    </heat-map-widget>
</div>
        

<heat-map-widget    
    [title]="'Heat Map'"
    [config]="{
        maxColor: '#007BFF',
        minColor: '#007BFF',
        aggregation: 'AVG',
        defaultPeriod: 'LAST_30_DAYS'
    }"
    [inputs]="{
        period: 'abc'
    }"
    class="abc"
    *ngIf="getUser().organizationId != null"
    hasFeature="['feature_a', 'feature_b']">
    <metric        
            name="Temperature"
            label="abc"
            unit="&deg;C"
            filter="dateFormat"></metric>
</heat-map-widget>