Data Visualization Components

Component Configurations

This creates a trend component with time on the x-axis. The trend needs at least one TrendTrace as a child component.

Added to a Trend component, this creates a trace on the trend. Each trend can have multiple TrendTraces.

Required Fields

Field	Description	Use
mapping	Field from the asset model to populate data from	String - field name

Optional Fields

Field	Description	Use
steppedLine	Whether to make the line stepped instead of smooth	Boolean, `true` or `false`, default is `false` which is smooth
fill	Whether to fill under the trend	Boolean, `true` or `false`, default is `false` which is not filled
fillInverse	Whether to fill over the trend	Boolean, `true` or `false`, default is `false` which is not filled over the trend

This displays a spark chart, which is a short wide trend.

Required Fields

Field	Description	Use
mapping	Field from the asset model to populate data from	String - field name

Optional Fields

Field	Description	Use
width	Width of the spark chart in multiples of 10 pixels	Number of pixels in multiples of 10, i.e. `6` = 60px, default is the width of the parent component

This creates a Key Performance Indicator (KPI) card which shows a single value.

Required Fields

Field	Description	Use
mapping	Field from the asset model to populate data from	String - field name

This creates a radial gauge.

Required Fields

Field	Description	Use
mapping	Field from the asset model to populate data from	String - field name
maximum	Number or field which defines the maximum value for radial gauge	String - Field or Number

Optional Fields

Field	Description	Use
width	Width of the component in multiples of 10 pixels	Number of pixels in multiples of 10, i.e. `6` = 60px, default is the width of the parent component
marker	Number or field which places a marker on the radial gauge	String - Field or Number