Heat Map

Displays a days and hours heat map with metric values, alerts, or work-sessions data.

Heat Map

Template Syntax

Below you can find some examples of how to use the component within a template.


<heat-map-widget [title]="'Pieces by hour'">
      <metric name="pieces"></metric>
</heat-map-widget>

Here is a comprehensive list of all the elements and properties that can be used to configure the component.

Data Source	The source of the data to load and agrregate into the heatmap. Name: config.dataProvider Type: ENUM \| Optional Values: MetricDataProvider, WorkSessionDataProvider Default Value: WorkSessionDataProvider `[config]="{dataProvider: 'MetricDataProvider'}"`
Max Value Color	The color associated to the maximum value into the heat map. Name: config.maxColor Type: STRING \| Optional Default Value: #08B05B `[config]="{maxColor: 'abc'}"`
Min Value Color	The color associated to the minimun value into the heat map. Name: config.minColor Type: STRING \| Optional Default Value: #FFFFFF `[config]="{minColor: 'abc'}"`
Title	The title displayed on the top part of the widget box. Name: title Type: STRING \| Optional `[title]="'Details'"`
Rendering
CSS Class	The name(s) of the CSS class used to customize the widget layout. Name: class Type: STRING \| Optional `class="my-custom-class"`
Visibility Condition	The expression that allows you to reduce the visibility of the element. Name: ngIf Type: STRING \| Optional `ngIf="getUser().organizationId != null"`
Sub Elements
Metric	The metric whose current value must be displayed within the gauge box.

Filter	The name of the filter used to transform and display values. Name: filter Type: FILTER \| Optional `filter="fooBarFilter"`
Label	The metric alternative label. Name: label Type: STRING \| Optional `label="Temperature"`
Name	The metric whose value(s) must be loaded by the widget. Name: name Type: METRIC \| Required `name="Temperature"`
Unit	The unit of measurement to be displayed along the value. Name: unit Type: STRING \| Optional `unit="°C"`
Advanced
Visibility Condition	The expression that allows you to reduce the visibility of the element. Name: ngIf Type: STRING \| Optional `ngIf="getUser().organizationId != null"`