Igor Kulikov
5 years ago
31 changed files with 1047 additions and 21 deletions
File diff suppressed because one or more lines are too long
@ -0,0 +1,52 @@ |
|||||
|
#### Cell content function |
||||
|
|
||||
|
<div class="divider"></div> |
||||
|
<br/> |
||||
|
|
||||
|
*function (value, alarm, ctx): string* |
||||
|
|
||||
|
A JavaScript function used to compute alarm cell content HTML depending on alarm field value. |
||||
|
|
||||
|
**Parameters:** |
||||
|
|
||||
|
<ul> |
||||
|
<li><b>value:</b> <code>any</code> - An alarm field value displayed in the cell. |
||||
|
</li> |
||||
|
<li><b>alarm:</b> <code><a href="https://github.com/thingsboard/thingsboard/blob/e264f7b8ddff05bda85c4833bf497f47f447496e/ui-ngx/src/app/shared/models/alarm.models.ts#L108" target="_blank">AlarmDataInfo</a></code> - An |
||||
|
<a href="https://github.com/thingsboard/thingsboard/blob/e264f7b8ddff05bda85c4833bf497f47f447496e/ui-ngx/src/app/shared/models/alarm.models.ts#L108" target="_blank">AlarmDataInfo</a> object |
||||
|
presenting basic alarm properties (ex. <code>type</code>, <code>severity</code>, <code>originator</code>, etc.) and <br> provides access to other alarm or originator entity fields/attributes/timeseries declared in widget datasource configuration. |
||||
|
</li> |
||||
|
<li><b>ctx:</b> <code><a href="https://github.com/thingsboard/thingsboard/blob/5bb6403407aa4898084832d6698aa9ea6d484889/ui-ngx/src/app/modules/home/models/widget-component.models.ts#L107" target="_blank">WidgetContext</a></code> - A reference to <a href="https://github.com/thingsboard/thingsboard/blob/5bb6403407aa4898084832d6698aa9ea6d484889/ui-ngx/src/app/modules/home/models/widget-component.models.ts#L107" target="_blank">WidgetContext</a> that has all necessary API |
||||
|
and data used by widget instance. |
||||
|
</li> |
||||
|
</ul> |
||||
|
|
||||
|
**Returns:** |
||||
|
|
||||
|
Should return string value presenting cell content HTML. |
||||
|
|
||||
|
<div class="divider"></div> |
||||
|
|
||||
|
##### Examples |
||||
|
|
||||
|
* Format alarm start time using date/time pattern: |
||||
|
|
||||
|
```javascript |
||||
|
var startTime = value; |
||||
|
return startTime ? ctx.date.transform(startTime, 'yyyy-MM-dd HH:mm:ss') : ''; |
||||
|
{:copy-code} |
||||
|
``` |
||||
|
|
||||
|
* Styled cell content for originator alarm field: |
||||
|
|
||||
|
```javascript |
||||
|
var originator = value; |
||||
|
return '<div style="border: 2px solid #0072ff; ' + |
||||
|
'border-radius: 10px; padding: 5px; ' + |
||||
|
'background-color: #e0e1ff; ' + |
||||
|
'text-align: center;">' + originator + '</div>'; |
||||
|
{:copy-code} |
||||
|
``` |
||||
|
|
||||
|
<br> |
||||
|
<br> |
||||
@ -0,0 +1,62 @@ |
|||||
|
#### Cell style function |
||||
|
|
||||
|
<div class="divider"></div> |
||||
|
<br/> |
||||
|
|
||||
|
*function (value, alarm, ctx): {[key: string]: string}* |
||||
|
|
||||
|
A JavaScript function used to compute alarm cell style depending on alarm field value. |
||||
|
|
||||
|
**Parameters:** |
||||
|
|
||||
|
<ul> |
||||
|
<li><b>value:</b> <code>any</code> - An alarm field value displayed in the cell. |
||||
|
</li> |
||||
|
<li><b>alarm:</b> <code><a href="https://github.com/thingsboard/thingsboard/blob/e264f7b8ddff05bda85c4833bf497f47f447496e/ui-ngx/src/app/shared/models/alarm.models.ts#L108" target="_blank">AlarmDataInfo</a></code> - An |
||||
|
<a href="https://github.com/thingsboard/thingsboard/blob/e264f7b8ddff05bda85c4833bf497f47f447496e/ui-ngx/src/app/shared/models/alarm.models.ts#L108" target="_blank">AlarmDataInfo</a> object |
||||
|
presenting basic alarm properties (ex. <code>type</code>, <code>severity</code>, <code>originator</code>, etc.) and <br> provides access to other alarm or originator entity fields/attributes/timeseries declared in widget datasource configuration. |
||||
|
</li> |
||||
|
<li><b>ctx:</b> <code><a href="https://github.com/thingsboard/thingsboard/blob/5bb6403407aa4898084832d6698aa9ea6d484889/ui-ngx/src/app/modules/home/models/widget-component.models.ts#L107" target="_blank">WidgetContext</a></code> - A reference to <a href="https://github.com/thingsboard/thingsboard/blob/5bb6403407aa4898084832d6698aa9ea6d484889/ui-ngx/src/app/modules/home/models/widget-component.models.ts#L107" target="_blank">WidgetContext</a> that has all necessary API |
||||
|
and data used by widget instance. |
||||
|
</li> |
||||
|
</ul> |
||||
|
|
||||
|
**Returns:** |
||||
|
|
||||
|
Should return key/value object presenting style attributes. |
||||
|
|
||||
|
<div class="divider"></div> |
||||
|
|
||||
|
##### Examples |
||||
|
|
||||
|
* Set color depending on alarm severity: |
||||
|
|
||||
|
```javascript |
||||
|
var severity = value; |
||||
|
var color = 'black'; |
||||
|
switch (severity) { |
||||
|
case 'CRITICAL': |
||||
|
color = 'red'; |
||||
|
break; |
||||
|
case 'MAJOR': |
||||
|
color = 'orange'; |
||||
|
break; |
||||
|
case 'MINOR': |
||||
|
color = '#ffca3d'; |
||||
|
break; |
||||
|
case 'WARNING': |
||||
|
color = '#abab00'; |
||||
|
break; |
||||
|
case 'INDETERMINATE': |
||||
|
color = 'green'; |
||||
|
break; |
||||
|
} |
||||
|
return { |
||||
|
fontWeight: 'bold', |
||||
|
color: color |
||||
|
}; |
||||
|
{:copy-code} |
||||
|
``` |
||||
|
|
||||
|
<br> |
||||
|
<br> |
||||
@ -0,0 +1,59 @@ |
|||||
|
#### Row style function |
||||
|
|
||||
|
<div class="divider"></div> |
||||
|
<br/> |
||||
|
|
||||
|
*function (alarm, ctx): {[key: string]: string}* |
||||
|
|
||||
|
A JavaScript function used to compute alarm row style depending on alarm value. |
||||
|
|
||||
|
**Parameters:** |
||||
|
|
||||
|
<ul> |
||||
|
<li><b>alarm:</b> <code><a href="https://github.com/thingsboard/thingsboard/blob/e264f7b8ddff05bda85c4833bf497f47f447496e/ui-ngx/src/app/shared/models/alarm.models.ts#L108" target="_blank">AlarmDataInfo</a></code> - An |
||||
|
<a href="https://github.com/thingsboard/thingsboard/blob/e264f7b8ddff05bda85c4833bf497f47f447496e/ui-ngx/src/app/shared/models/alarm.models.ts#L108" target="_blank">AlarmDataInfo</a> object |
||||
|
presenting basic alarm properties (ex. <code>type</code>, <code>severity</code>, <code>originator</code>, etc.) and <br> provides access to other alarm or originator entity fields/attributes/timeseries declared in widget datasource configuration. |
||||
|
</li> |
||||
|
<li><b>ctx:</b> <code><a href="https://github.com/thingsboard/thingsboard/blob/5bb6403407aa4898084832d6698aa9ea6d484889/ui-ngx/src/app/modules/home/models/widget-component.models.ts#L107" target="_blank">WidgetContext</a></code> - A reference to <a href="https://github.com/thingsboard/thingsboard/blob/5bb6403407aa4898084832d6698aa9ea6d484889/ui-ngx/src/app/modules/home/models/widget-component.models.ts#L107" target="_blank">WidgetContext</a> that has all necessary API |
||||
|
and data used by widget instance. |
||||
|
</li> |
||||
|
</ul> |
||||
|
|
||||
|
**Returns:** |
||||
|
|
||||
|
Should return key/value object presenting style attributes. |
||||
|
|
||||
|
<div class="divider"></div> |
||||
|
|
||||
|
##### Examples |
||||
|
|
||||
|
* Set row background color depending on alarm severity: |
||||
|
|
||||
|
```javascript |
||||
|
var severity = alarm.severity; |
||||
|
var color = '#fff'; |
||||
|
switch (severity) { |
||||
|
case 'CRITICAL': |
||||
|
color = 'red'; |
||||
|
break; |
||||
|
case 'MAJOR': |
||||
|
color = 'orange'; |
||||
|
break; |
||||
|
case 'MINOR': |
||||
|
color = '#ffca3d'; |
||||
|
break; |
||||
|
case 'WARNING': |
||||
|
color = '#abab00'; |
||||
|
break; |
||||
|
case 'INDETERMINATE': |
||||
|
color = 'green'; |
||||
|
break; |
||||
|
} |
||||
|
return { |
||||
|
backgroundColor: color |
||||
|
}; |
||||
|
{:copy-code} |
||||
|
``` |
||||
|
|
||||
|
<br> |
||||
|
<br> |
||||
@ -0,0 +1,40 @@ |
|||||
|
#### Node disabled function |
||||
|
|
||||
|
<div class="divider"></div> |
||||
|
<br/> |
||||
|
|
||||
|
*function (nodeCtx): boolean* |
||||
|
|
||||
|
A JavaScript function evaluating whether current node should be disabled (not selectable). |
||||
|
|
||||
|
**Parameters:** |
||||
|
|
||||
|
<ul> |
||||
|
<li><b>nodeCtx:</b> <code><a href="https://github.com/thingsboard/thingsboard/blob/e264f7b8ddff05bda85c4833bf497f47f447496e/ui-ngx/src/app/modules/home/components/widget/lib/entities-hierarchy-widget.models.ts#L35" target="_blank">HierarchyNodeContext</a></code> - An |
||||
|
<a href="https://github.com/thingsboard/thingsboard/blob/e264f7b8ddff05bda85c4833bf497f47f447496e/ui-ngx/src/app/modules/home/components/widget/lib/entities-hierarchy-widget.models.ts#L35" target="_blank">HierarchyNodeContext</a> object |
||||
|
containing <code>entity</code> field holding basic entity properties <br> (ex. <code>id</code>, <code>name</code>, <code>label</code>) and <code>data</code> field holding other entity attributes/timeseries declared in widget datasource configuration. |
||||
|
</li> |
||||
|
</ul> |
||||
|
|
||||
|
**Returns:** |
||||
|
|
||||
|
`true` if node should be disabled (not selectable), `false` otherwise. |
||||
|
|
||||
|
<div class="divider"></div> |
||||
|
|
||||
|
##### Examples |
||||
|
|
||||
|
* Disable current node according to the value of example `nodeDisabled` attribute: |
||||
|
|
||||
|
```javascript |
||||
|
var data = nodeCtx.data; |
||||
|
if (data.hasOwnProperty('nodeDisabled') && data['nodeDisabled'] !== null) { |
||||
|
return data['nodeDisabled'] === 'true'; |
||||
|
} else { |
||||
|
return false; |
||||
|
} |
||||
|
{:copy-code} |
||||
|
``` |
||||
|
|
||||
|
<br> |
||||
|
<br> |
||||
@ -0,0 +1,47 @@ |
|||||
|
#### Node has children function |
||||
|
|
||||
|
<div class="divider"></div> |
||||
|
<br/> |
||||
|
|
||||
|
*function (nodeCtx): boolean* |
||||
|
|
||||
|
A JavaScript function evaluating whether current node has children (whether it can be expanded). |
||||
|
|
||||
|
**Parameters:** |
||||
|
|
||||
|
<ul> |
||||
|
<li><b>nodeCtx:</b> <code><a href="https://github.com/thingsboard/thingsboard/blob/e264f7b8ddff05bda85c4833bf497f47f447496e/ui-ngx/src/app/modules/home/components/widget/lib/entities-hierarchy-widget.models.ts#L35" target="_blank">HierarchyNodeContext</a></code> - An |
||||
|
<a href="https://github.com/thingsboard/thingsboard/blob/e264f7b8ddff05bda85c4833bf497f47f447496e/ui-ngx/src/app/modules/home/components/widget/lib/entities-hierarchy-widget.models.ts#L35" target="_blank">HierarchyNodeContext</a> object |
||||
|
containing <code>entity</code> field holding basic entity properties <br> (ex. <code>id</code>, <code>name</code>, <code>label</code>) and <code>data</code> field holding other entity attributes/timeseries declared in widget datasource configuration. |
||||
|
</li> |
||||
|
</ul> |
||||
|
|
||||
|
**Returns:** |
||||
|
|
||||
|
`true` if node should have children, `false` otherwise. |
||||
|
|
||||
|
<div class="divider"></div> |
||||
|
|
||||
|
##### Examples |
||||
|
|
||||
|
* Restrict entities hierarchy expansion up to third level: |
||||
|
|
||||
|
```javascript |
||||
|
return nodeCtx.level <= 2; |
||||
|
{:copy-code} |
||||
|
``` |
||||
|
|
||||
|
* Restrict entities expansion according to the value of example `nodeHasChildren` attribute: |
||||
|
|
||||
|
```javascript |
||||
|
var data = nodeCtx.data; |
||||
|
if (data.hasOwnProperty('nodeHasChildren') && data['nodeHasChildren'] !== null) { |
||||
|
return data['nodeHasChildren'] === 'true'; |
||||
|
} else { |
||||
|
return true; |
||||
|
} |
||||
|
{:copy-code} |
||||
|
``` |
||||
|
|
||||
|
<br> |
||||
|
<br> |
||||
@ -0,0 +1,53 @@ |
|||||
|
#### Node icon function |
||||
|
|
||||
|
<div class="divider"></div> |
||||
|
<br/> |
||||
|
|
||||
|
*function (nodeCtx): {iconUrl?: string, materialIcon?: string} | 'default'* |
||||
|
|
||||
|
A JavaScript function used to compute node icon info. |
||||
|
|
||||
|
**Parameters:** |
||||
|
|
||||
|
<ul> |
||||
|
<li><b>nodeCtx:</b> <code><a href="https://github.com/thingsboard/thingsboard/blob/e264f7b8ddff05bda85c4833bf497f47f447496e/ui-ngx/src/app/modules/home/components/widget/lib/entities-hierarchy-widget.models.ts#L35" target="_blank">HierarchyNodeContext</a></code> - An |
||||
|
<a href="https://github.com/thingsboard/thingsboard/blob/e264f7b8ddff05bda85c4833bf497f47f447496e/ui-ngx/src/app/modules/home/components/widget/lib/entities-hierarchy-widget.models.ts#L35" target="_blank">HierarchyNodeContext</a> object |
||||
|
containing <code>entity</code> field holding basic entity properties <br> (ex. <code>id</code>, <code>name</code>, <code>label</code>) and <code>data</code> field holding other entity attributes/timeseries declared in widget datasource configuration. |
||||
|
</li> |
||||
|
</ul> |
||||
|
|
||||
|
**Returns:** |
||||
|
|
||||
|
Should return node icon info object with the following structure: |
||||
|
|
||||
|
```typescript |
||||
|
{ |
||||
|
iconUrl?: string, |
||||
|
materialIcon?: string |
||||
|
} |
||||
|
``` |
||||
|
Resulting object should contain either `materialIcon` or `iconUrl` property.<br> |
||||
|
Where: |
||||
|
- `materialIcon` - name of the material icon to be used from the [Material Icons Library{:target="_blank"}](https://material.io/tools/icons); |
||||
|
- `iconUrl` - url of the external image to be used as node icon. |
||||
|
|
||||
|
Function can return `default` string value. In this case default icons according to entity type will be used. |
||||
|
|
||||
|
<div class="divider"></div> |
||||
|
|
||||
|
##### Examples |
||||
|
|
||||
|
* Use external image for devices which name starts with `Test` and use default icons for the rest of entities: |
||||
|
|
||||
|
```javascript |
||||
|
var entity = nodeCtx.entity; |
||||
|
if (entity.id.entityType === 'DEVICE' && entity.name.startsWith('Test')) { |
||||
|
return {iconUrl: 'https://avatars1.githubusercontent.com/u/14793288?v=4&s=117'}; |
||||
|
} else { |
||||
|
return 'default'; |
||||
|
} |
||||
|
{:copy-code} |
||||
|
``` |
||||
|
|
||||
|
<br> |
||||
|
<br> |
||||
@ -0,0 +1,35 @@ |
|||||
|
#### Node opened by default function |
||||
|
|
||||
|
<div class="divider"></div> |
||||
|
<br/> |
||||
|
|
||||
|
*function (nodeCtx): boolean* |
||||
|
|
||||
|
A JavaScript function evaluating whether current node should be opened (expanded) when it first loaded. |
||||
|
|
||||
|
**Parameters:** |
||||
|
|
||||
|
<ul> |
||||
|
<li><b>nodeCtx:</b> <code><a href="https://github.com/thingsboard/thingsboard/blob/e264f7b8ddff05bda85c4833bf497f47f447496e/ui-ngx/src/app/modules/home/components/widget/lib/entities-hierarchy-widget.models.ts#L35" target="_blank">HierarchyNodeContext</a></code> - An |
||||
|
<a href="https://github.com/thingsboard/thingsboard/blob/e264f7b8ddff05bda85c4833bf497f47f447496e/ui-ngx/src/app/modules/home/components/widget/lib/entities-hierarchy-widget.models.ts#L35" target="_blank">HierarchyNodeContext</a> object |
||||
|
containing <code>entity</code> field holding basic entity properties <br> (ex. <code>id</code>, <code>name</code>, <code>label</code>) and <code>data</code> field holding other entity attributes/timeseries declared in widget datasource configuration. |
||||
|
</li> |
||||
|
</ul> |
||||
|
|
||||
|
**Returns:** |
||||
|
|
||||
|
`true` if node should be opened (expanded), `false` otherwise. |
||||
|
|
||||
|
<div class="divider"></div> |
||||
|
|
||||
|
##### Examples |
||||
|
|
||||
|
* Open by default nodes up to third level: |
||||
|
|
||||
|
```javascript |
||||
|
return nodeCtx.level <= 2; |
||||
|
{:copy-code} |
||||
|
``` |
||||
|
|
||||
|
<br> |
||||
|
<br> |
||||
@ -0,0 +1,49 @@ |
|||||
|
#### Node relations query function |
||||
|
|
||||
|
<div class="divider"></div> |
||||
|
<br/> |
||||
|
|
||||
|
*function (nodeCtx): [EntityRelationsQuery{:target="_blank"}](https://github.com/thingsboard/thingsboard/blob/dda61383933cac9aa6821a77ff9b19291e69db9f/ui-ngx/src/app/shared/models/relation.models.ts#L69) | 'default'* |
||||
|
|
||||
|
A JavaScript function used to compute child nodes relations query for current node. |
||||
|
|
||||
|
**Parameters:** |
||||
|
|
||||
|
<ul> |
||||
|
<li><b>nodeCtx:</b> <code><a href="https://github.com/thingsboard/thingsboard/blob/e264f7b8ddff05bda85c4833bf497f47f447496e/ui-ngx/src/app/modules/home/components/widget/lib/entities-hierarchy-widget.models.ts#L35" target="_blank">HierarchyNodeContext</a></code> - An |
||||
|
<a href="https://github.com/thingsboard/thingsboard/blob/e264f7b8ddff05bda85c4833bf497f47f447496e/ui-ngx/src/app/modules/home/components/widget/lib/entities-hierarchy-widget.models.ts#L35" target="_blank">HierarchyNodeContext</a> object |
||||
|
containing <code>entity</code> field holding basic entity properties <br> (ex. <code>id</code>, <code>name</code>, <code>label</code>) and <code>data</code> field holding other entity attributes/timeseries declared in widget datasource configuration. |
||||
|
</li> |
||||
|
</ul> |
||||
|
|
||||
|
**Returns:** |
||||
|
|
||||
|
Should return [EntityRelationsQuery{:target="_blank"}](https://github.com/thingsboard/thingsboard/blob/dda61383933cac9aa6821a77ff9b19291e69db9f/ui-ngx/src/app/shared/models/relation.models.ts#L69) for current node used to fetch entity children.<br> |
||||
|
Function can return `default` string value. In this case default relations query will be used. |
||||
|
|
||||
|
<div class="divider"></div> |
||||
|
|
||||
|
##### Examples |
||||
|
|
||||
|
* Fetch child entities having relations of type `Contains` from the current entity: |
||||
|
|
||||
|
```javascript |
||||
|
var entity = nodeCtx.entity; |
||||
|
var query = { |
||||
|
parameters: { |
||||
|
rootId: entity.id.id, |
||||
|
rootType: entity.id.entityType, |
||||
|
direction: "FROM", |
||||
|
maxLevel: 1 |
||||
|
}, |
||||
|
filters: [{ |
||||
|
relationType: "Contains", |
||||
|
entityTypes: [] |
||||
|
}] |
||||
|
}; |
||||
|
return query; |
||||
|
{:copy-code} |
||||
|
``` |
||||
|
|
||||
|
<br> |
||||
|
<br> |
||||
@ -0,0 +1,41 @@ |
|||||
|
#### Node text function |
||||
|
|
||||
|
<div class="divider"></div> |
||||
|
<br/> |
||||
|
|
||||
|
*function (nodeCtx): string* |
||||
|
|
||||
|
A JavaScript function used to compute text or HTML code for the current node. |
||||
|
|
||||
|
**Parameters:** |
||||
|
|
||||
|
<ul> |
||||
|
<li><b>nodeCtx:</b> <code><a href="https://github.com/thingsboard/thingsboard/blob/e264f7b8ddff05bda85c4833bf497f47f447496e/ui-ngx/src/app/modules/home/components/widget/lib/entities-hierarchy-widget.models.ts#L35" target="_blank">HierarchyNodeContext</a></code> - An |
||||
|
<a href="https://github.com/thingsboard/thingsboard/blob/e264f7b8ddff05bda85c4833bf497f47f447496e/ui-ngx/src/app/modules/home/components/widget/lib/entities-hierarchy-widget.models.ts#L35" target="_blank">HierarchyNodeContext</a> object |
||||
|
containing <code>entity</code> field holding basic entity properties <br> (ex. <code>id</code>, <code>name</code>, <code>label</code>) and <code>data</code> field holding other entity attributes/timeseries declared in widget datasource configuration. |
||||
|
</li> |
||||
|
</ul> |
||||
|
|
||||
|
**Returns:** |
||||
|
|
||||
|
Should return string value presenting text or HTML for the current node. |
||||
|
|
||||
|
<div class="divider"></div> |
||||
|
|
||||
|
##### Examples |
||||
|
|
||||
|
* Display entity name and optionally temperature value if it is present in entity attributes/timeseries: |
||||
|
|
||||
|
```javascript |
||||
|
var data = nodeCtx.data; |
||||
|
var entity = nodeCtx.entity; |
||||
|
var text = entity.name; |
||||
|
if (data.hasOwnProperty('temperature') && data['temperature'] !== null) { |
||||
|
text += " <b>"+ data['temperature'] +" °C</b>"; |
||||
|
} |
||||
|
return text; |
||||
|
{:copy-code} |
||||
|
``` |
||||
|
|
||||
|
<br> |
||||
|
<br> |
||||
@ -0,0 +1,44 @@ |
|||||
|
#### Nodes sort function |
||||
|
|
||||
|
<div class="divider"></div> |
||||
|
<br/> |
||||
|
|
||||
|
*function (nodeCtx1, nodeCtx2): number* |
||||
|
|
||||
|
A JavaScript function used to compare nodes of the same level when sorting. |
||||
|
|
||||
|
**Parameters:** |
||||
|
|
||||
|
<ul> |
||||
|
<li><b>nodeCtx1:</b> <code><a href="https://github.com/thingsboard/thingsboard/blob/e264f7b8ddff05bda85c4833bf497f47f447496e/ui-ngx/src/app/modules/home/components/widget/lib/entities-hierarchy-widget.models.ts#L35" target="_blank">HierarchyNodeContext</a></code> - First |
||||
|
node object to be compared. |
||||
|
</li> |
||||
|
<li><b>nodeCtx2:</b> <code><a href="https://github.com/thingsboard/thingsboard/blob/e264f7b8ddff05bda85c4833bf497f47f447496e/ui-ngx/src/app/modules/home/components/widget/lib/entities-hierarchy-widget.models.ts#L35" target="_blank">HierarchyNodeContext</a></code> - Second |
||||
|
node object to be compared. |
||||
|
</li> |
||||
|
</ul> |
||||
|
|
||||
|
**Returns:** |
||||
|
|
||||
|
Should return integer value presenting nodes comparison result: |
||||
|
- **less than 0** - sort `nodeCtx1` to an index lower than `nodeCtx2`; |
||||
|
- **0** - leave `nodeCtx1` and `nodeCtx2` unchanged with respect to each other; |
||||
|
- **greater than 0** - sort `nodeCtx2` to an index lower than `nodeCtx1`; |
||||
|
|
||||
|
<div class="divider"></div> |
||||
|
|
||||
|
##### Examples |
||||
|
|
||||
|
* Sort entities first by entity type in alphabetical order then by entity name in alphabetical order: |
||||
|
|
||||
|
```javascript |
||||
|
var result = nodeCtx1.entity.id.entityType.localeCompare(nodeCtx2.entity.id.entityType); |
||||
|
if (result === 0) { |
||||
|
result = nodeCtx1.entity.name.localeCompare(nodeCtx2.entity.name); |
||||
|
} |
||||
|
return result; |
||||
|
{:copy-code} |
||||
|
``` |
||||
|
|
||||
|
<br> |
||||
|
<br> |
||||
@ -0,0 +1,61 @@ |
|||||
|
#### Cell content function |
||||
|
|
||||
|
<div class="divider"></div> |
||||
|
<br/> |
||||
|
|
||||
|
*function (value, entity, ctx): string* |
||||
|
|
||||
|
A JavaScript function used to compute entity cell content HTML depending on entity field value. |
||||
|
|
||||
|
**Parameters:** |
||||
|
|
||||
|
<ul> |
||||
|
<li><b>value:</b> <code>any</code> - An entity field value displayed in the cell. |
||||
|
</li> |
||||
|
<li><b>entity:</b> <code><a href="https://github.com/thingsboard/thingsboard/blob/e264f7b8ddff05bda85c4833bf497f47f447496e/ui-ngx/src/app/modules/home/components/widget/lib/table-widget.models.ts#L61" target="_blank">EntityData</a></code> - An |
||||
|
<a href="https://github.com/thingsboard/thingsboard/blob/e264f7b8ddff05bda85c4833bf497f47f447496e/ui-ngx/src/app/modules/home/components/widget/lib/table-widget.models.ts#L61" target="_blank">EntityData</a> object |
||||
|
presenting basic entity properties (ex. <code>id</code>, <code>entityName</code>) and <br> provides access to other entity attributes/timeseries declared in widget datasource configuration. |
||||
|
</li> |
||||
|
<li><b>ctx:</b> <code><a href="https://github.com/thingsboard/thingsboard/blob/5bb6403407aa4898084832d6698aa9ea6d484889/ui-ngx/src/app/modules/home/models/widget-component.models.ts#L107" target="_blank">WidgetContext</a></code> - A reference to <a href="https://github.com/thingsboard/thingsboard/blob/5bb6403407aa4898084832d6698aa9ea6d484889/ui-ngx/src/app/modules/home/models/widget-component.models.ts#L107" target="_blank">WidgetContext</a> that has all necessary API |
||||
|
and data used by widget instance. |
||||
|
</li> |
||||
|
</ul> |
||||
|
|
||||
|
**Returns:** |
||||
|
|
||||
|
Should return string value presenting cell content HTML. |
||||
|
|
||||
|
<div class="divider"></div> |
||||
|
|
||||
|
##### Examples |
||||
|
|
||||
|
* Format entity created time using date/time pattern: |
||||
|
|
||||
|
```javascript |
||||
|
var createdTime = value; |
||||
|
return createdTime ? ctx.date.transform(createdTime, 'yyyy-MM-dd HH:mm:ss') : ''; |
||||
|
{:copy-code} |
||||
|
``` |
||||
|
|
||||
|
* Styled cell content for device type field: |
||||
|
|
||||
|
```javascript |
||||
|
var deviceType = value; |
||||
|
var color = '#fff'; |
||||
|
switch (deviceType) { |
||||
|
case 'thermostat': |
||||
|
color = 'orange'; |
||||
|
break; |
||||
|
case 'default': |
||||
|
color = '#abab00'; |
||||
|
break; |
||||
|
} |
||||
|
return '<div style="border: 2px solid #0072ff; ' + |
||||
|
'border-radius: 10px; padding: 5px; ' + |
||||
|
'background-color: '+ color +'; ' + |
||||
|
'text-align: center;">' + deviceType + '</div>'; |
||||
|
{:copy-code} |
||||
|
``` |
||||
|
|
||||
|
<br> |
||||
|
<br> |
||||
@ -0,0 +1,52 @@ |
|||||
|
#### Cell style function |
||||
|
|
||||
|
<div class="divider"></div> |
||||
|
<br/> |
||||
|
|
||||
|
*function (value, entity, ctx): {[key: string]: string}* |
||||
|
|
||||
|
A JavaScript function used to compute entity cell style depending on entity field value. |
||||
|
|
||||
|
**Parameters:** |
||||
|
|
||||
|
<ul> |
||||
|
<li><b>value:</b> <code>any</code> - An entity field value displayed in the cell. |
||||
|
</li> |
||||
|
<li><b>entity:</b> <code><a href="https://github.com/thingsboard/thingsboard/blob/e264f7b8ddff05bda85c4833bf497f47f447496e/ui-ngx/src/app/modules/home/components/widget/lib/table-widget.models.ts#L61" target="_blank">EntityData</a></code> - An |
||||
|
<a href="https://github.com/thingsboard/thingsboard/blob/e264f7b8ddff05bda85c4833bf497f47f447496e/ui-ngx/src/app/modules/home/components/widget/lib/table-widget.models.ts#L61" target="_blank">EntityData</a> object |
||||
|
presenting basic entity properties (ex. <code>id</code>, <code>entityName</code>) and <br> provides access to other entity attributes/timeseries declared in widget datasource configuration. |
||||
|
</li> |
||||
|
<li><b>ctx:</b> <code><a href="https://github.com/thingsboard/thingsboard/blob/5bb6403407aa4898084832d6698aa9ea6d484889/ui-ngx/src/app/modules/home/models/widget-component.models.ts#L107" target="_blank">WidgetContext</a></code> - A reference to <a href="https://github.com/thingsboard/thingsboard/blob/5bb6403407aa4898084832d6698aa9ea6d484889/ui-ngx/src/app/modules/home/models/widget-component.models.ts#L107" target="_blank">WidgetContext</a> that has all necessary API |
||||
|
and data used by widget instance. |
||||
|
</li> |
||||
|
</ul> |
||||
|
|
||||
|
**Returns:** |
||||
|
|
||||
|
Should return key/value object presenting style attributes. |
||||
|
|
||||
|
<div class="divider"></div> |
||||
|
|
||||
|
##### Examples |
||||
|
|
||||
|
* Set color depending on device temperature value: |
||||
|
|
||||
|
```javascript |
||||
|
var temperature = value; |
||||
|
var color = 'black'; |
||||
|
if (temperature) { |
||||
|
if (temperature > 25) { |
||||
|
color = 'red'; |
||||
|
} else { |
||||
|
color = 'green'; |
||||
|
} |
||||
|
} |
||||
|
return { |
||||
|
fontWeight: 'bold', |
||||
|
color: color |
||||
|
}; |
||||
|
{:copy-code} |
||||
|
``` |
||||
|
|
||||
|
<br> |
||||
|
<br> |
||||
@ -0,0 +1,50 @@ |
|||||
|
#### Row style function |
||||
|
|
||||
|
<div class="divider"></div> |
||||
|
<br/> |
||||
|
|
||||
|
*function (entity, ctx): {[key: string]: string}* |
||||
|
|
||||
|
A JavaScript function used to compute entity row style depending on entity value. |
||||
|
|
||||
|
**Parameters:** |
||||
|
|
||||
|
<ul> |
||||
|
<li><b>entity:</b> <code><a href="https://github.com/thingsboard/thingsboard/blob/e264f7b8ddff05bda85c4833bf497f47f447496e/ui-ngx/src/app/modules/home/components/widget/lib/table-widget.models.ts#L61" target="_blank">EntityData</a></code> - An |
||||
|
<a href="https://github.com/thingsboard/thingsboard/blob/e264f7b8ddff05bda85c4833bf497f47f447496e/ui-ngx/src/app/modules/home/components/widget/lib/table-widget.models.ts#L61" target="_blank">EntityData</a> object |
||||
|
presenting basic entity properties (ex. <code>id</code>, <code>entityName</code>) and <br> provides access to other entity attributes/timeseries declared in widget datasource configuration. |
||||
|
</li> |
||||
|
<li><b>ctx:</b> <code><a href="https://github.com/thingsboard/thingsboard/blob/5bb6403407aa4898084832d6698aa9ea6d484889/ui-ngx/src/app/modules/home/models/widget-component.models.ts#L107" target="_blank">WidgetContext</a></code> - A reference to <a href="https://github.com/thingsboard/thingsboard/blob/5bb6403407aa4898084832d6698aa9ea6d484889/ui-ngx/src/app/modules/home/models/widget-component.models.ts#L107" target="_blank">WidgetContext</a> that has all necessary API |
||||
|
and data used by widget instance. |
||||
|
</li> |
||||
|
</ul> |
||||
|
|
||||
|
**Returns:** |
||||
|
|
||||
|
Should return key/value object presenting style attributes. |
||||
|
|
||||
|
<div class="divider"></div> |
||||
|
|
||||
|
##### Examples |
||||
|
|
||||
|
* Set row background color depending on device type: |
||||
|
|
||||
|
```javascript |
||||
|
var deviceType = entity.Type; |
||||
|
var color = '#fff'; |
||||
|
switch (deviceType) { |
||||
|
case 'thermostat': |
||||
|
color = 'orange'; |
||||
|
break; |
||||
|
case 'default': |
||||
|
color = '#abab00'; |
||||
|
break; |
||||
|
} |
||||
|
return { |
||||
|
backgroundColor: color |
||||
|
}; |
||||
|
{:copy-code} |
||||
|
``` |
||||
|
|
||||
|
<br> |
||||
|
<br> |
||||
@ -0,0 +1,111 @@ |
|||||
|
#### Point shape draw function |
||||
|
|
||||
|
<div class="divider"></div> |
||||
|
<br/> |
||||
|
|
||||
|
*function (ctx, x, y, radius, shadow): void* |
||||
|
|
||||
|
A JavaScript function used to draw custom shapes for chart points when `Custom function` for point shape is selected. |
||||
|
|
||||
|
**Parameters:** |
||||
|
|
||||
|
<ul> |
||||
|
<li> |
||||
|
<b>ctx:</b> <code><a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D">CanvasRenderingContext2D</a></code> - A canvas drawing context. |
||||
|
</li> |
||||
|
<li> |
||||
|
<b>x</b> <code>number</code> - point center X coordinate. |
||||
|
</li> |
||||
|
<li> |
||||
|
<b>y</b> <code>number</code> - point center Y coordinate. |
||||
|
</li> |
||||
|
<li> |
||||
|
<b>radius</b> <code>number</code> - point radius. |
||||
|
</li> |
||||
|
<li> |
||||
|
<b>shadow</b> <code>boolean</code> - whether to draw shadow. |
||||
|
</li> |
||||
|
</ul> |
||||
|
|
||||
|
<div class="divider"></div> |
||||
|
|
||||
|
##### Examples |
||||
|
|
||||
|
* Draw square: |
||||
|
|
||||
|
```javascript |
||||
|
var size = radius * Math.sqrt(Math.PI) / 2; |
||||
|
ctx.rect(x - size, y - size, size + size, size + size); |
||||
|
{:copy-code} |
||||
|
``` |
||||
|
|
||||
|
* Draw circle: |
||||
|
|
||||
|
```javascript |
||||
|
ctx.moveTo(x + radius, y); |
||||
|
ctx.arc(x, y, radius, 0, shadow ? Math.PI : Math.PI * 2, false); |
||||
|
{:copy-code} |
||||
|
``` |
||||
|
|
||||
|
* Draw diamond: |
||||
|
|
||||
|
```javascript |
||||
|
var size = radius * Math.sqrt(Math.PI / 2); |
||||
|
ctx.moveTo(x - size, y); |
||||
|
ctx.lineTo(x, y - size); |
||||
|
ctx.lineTo(x + size, y); |
||||
|
ctx.lineTo(x, y + size); |
||||
|
ctx.lineTo(x - size, y); |
||||
|
ctx.lineTo(x, y - size); |
||||
|
{:copy-code} |
||||
|
``` |
||||
|
|
||||
|
* Draw triangle: |
||||
|
|
||||
|
```javascript |
||||
|
var size = radius * Math.sqrt(2 * Math.PI / Math.sin(Math.PI / 3)); |
||||
|
var height = size * Math.sin(Math.PI / 3); |
||||
|
ctx.moveTo(x - size / 2, y + height / 2); |
||||
|
ctx.lineTo(x + size / 2, y + height / 2); |
||||
|
if (!shadow) { |
||||
|
ctx.lineTo(x, y - height / 2); |
||||
|
ctx.lineTo(x - size / 2, y + height / 2); |
||||
|
ctx.lineTo(x + size / 2, y + height / 2); |
||||
|
} |
||||
|
{:copy-code} |
||||
|
``` |
||||
|
|
||||
|
* Draw cross: |
||||
|
|
||||
|
```javascript |
||||
|
var size = radius * Math.sqrt(Math.PI) / 2; |
||||
|
ctx.moveTo(x - size, y - size); |
||||
|
ctx.lineTo(x + size, y + size); |
||||
|
ctx.moveTo(x - size, y + size); |
||||
|
ctx.lineTo(x + size, y - size); |
||||
|
{:copy-code} |
||||
|
``` |
||||
|
|
||||
|
* Draw ellipse: |
||||
|
|
||||
|
```javascript |
||||
|
if (!shadow) { |
||||
|
ctx.moveTo(x + radius, y); |
||||
|
ctx.arc(x, y, radius, 0, Math.PI * 2, false); |
||||
|
} |
||||
|
{:copy-code} |
||||
|
``` |
||||
|
|
||||
|
* Draw plus: |
||||
|
|
||||
|
```javascript |
||||
|
var size = radius * Math.sqrt(Math.PI / 2); |
||||
|
ctx.moveTo(x - size, y); |
||||
|
ctx.lineTo(x + size, y); |
||||
|
ctx.moveTo(x, y + size); |
||||
|
ctx.lineTo(x, y - size); |
||||
|
{:copy-code} |
||||
|
``` |
||||
|
|
||||
|
<br> |
||||
|
<br> |
||||
@ -0,0 +1,93 @@ |
|||||
|
#### Ticks formatter function |
||||
|
|
||||
|
<div class="divider"></div> |
||||
|
<br/> |
||||
|
|
||||
|
*function (value): string* |
||||
|
|
||||
|
A JavaScript function used to format Y axis ticks. |
||||
|
|
||||
|
**Parameters:** |
||||
|
|
||||
|
<ul> |
||||
|
<li><b>value:</b> <code>number</code> - A tick value that should be formatted. |
||||
|
</li> |
||||
|
</ul> |
||||
|
|
||||
|
**Returns:** |
||||
|
|
||||
|
A string presenting the formatted value to be displayed as Y axis tick. |
||||
|
|
||||
|
<div class="divider"></div> |
||||
|
|
||||
|
##### Examples |
||||
|
|
||||
|
* Display ticks as is: |
||||
|
|
||||
|
```javascript |
||||
|
return value; |
||||
|
{:copy-code} |
||||
|
``` |
||||
|
|
||||
|
* Present ticks in Amperage (A) units and two decimal places: |
||||
|
|
||||
|
```javascript |
||||
|
return value.toFixed(2) + ' A'; |
||||
|
{:copy-code} |
||||
|
``` |
||||
|
|
||||
|
* Disable ticks: |
||||
|
|
||||
|
```javascript |
||||
|
return ''; |
||||
|
{:copy-code} |
||||
|
``` |
||||
|
|
||||
|
<ul> |
||||
|
<li> |
||||
|
To present axis ticks for true / false or 1 / 0 data.<br> |
||||
|
Display <code>On</code> when value > <code>0</code> and <= <code>1</code>,<br> |
||||
|
<code>Off</code> when value = <code>0</code>,<br> |
||||
|
disable for all other values.<br> |
||||
|
<strong>Note: </strong> To avoid duplicates among Y axis ticks it is recommended to set <strong><i>Steps size between ticks</i></strong> to <code>1</code>: |
||||
|
</li> |
||||
|
</ul> |
||||
|
|
||||
|
```javascript |
||||
|
if (value > 0 && value <= 1) { |
||||
|
return 'On'; |
||||
|
} else if (value === 0) { |
||||
|
return 'Off'; |
||||
|
} else { |
||||
|
return ''; |
||||
|
} |
||||
|
{:copy-code} |
||||
|
``` |
||||
|
|
||||
|
<ul> |
||||
|
<li> |
||||
|
To present axis ticks for state or level data.<br> |
||||
|
Display <code>High</code> when value >= <code>2</code>,<br> |
||||
|
<code>Medium</code> when value >= <code>1</code> and < <code>2</code>,<br> |
||||
|
<code>Low</code> when value >= <code>0</code> and < <code>1</code>,<br> |
||||
|
disable for all other values.<br> |
||||
|
<strong>Note: </strong> To avoid duplicates among Y axis ticks it is recommended to set <strong><i>Steps size between ticks</i></strong> to <code>1</code><br> |
||||
|
or other suitable value depending on your case: |
||||
|
</li> |
||||
|
</ul> |
||||
|
|
||||
|
```javascript |
||||
|
if (value >= 2) { |
||||
|
return 'High'; |
||||
|
} else if (value >= 1) { |
||||
|
return 'Medium'; |
||||
|
} else if (value >= 0) { |
||||
|
return 'Low'; |
||||
|
} else { |
||||
|
return ''; |
||||
|
} |
||||
|
{:copy-code} |
||||
|
``` |
||||
|
|
||||
|
<br> |
||||
|
<br> |
||||
@ -0,0 +1,53 @@ |
|||||
|
#### Cell content function |
||||
|
|
||||
|
<div class="divider"></div> |
||||
|
<br/> |
||||
|
|
||||
|
*function (value, rowData, ctx): string* |
||||
|
|
||||
|
A JavaScript function used to compute timeseries cell content HTML depending on timeseries field value. |
||||
|
|
||||
|
**Parameters:** |
||||
|
|
||||
|
<ul> |
||||
|
<li><b>value:</b> <code>any</code> - An entity field value displayed in the cell. |
||||
|
</li> |
||||
|
<li><b>rowData:</b> <code><a href="https://github.com/thingsboard/thingsboard/blob/e264f7b8ddff05bda85c4833bf497f47f447496e/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.ts#L80" target="_blank">TimeseriesRow</a></code> - A |
||||
|
<a href="https://github.com/thingsboard/thingsboard/blob/e264f7b8ddff05bda85c4833bf497f47f447496e/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.ts#L80" target="_blank">TimeseriesRow</a> object |
||||
|
presenting <code>formattedTs</code> (a string value of formatted timestamp) and <br> timeseries values for each column declared in widget datasource configuration. |
||||
|
</li> |
||||
|
<li><b>ctx:</b> <code><a href="https://github.com/thingsboard/thingsboard/blob/5bb6403407aa4898084832d6698aa9ea6d484889/ui-ngx/src/app/modules/home/models/widget-component.models.ts#L107" target="_blank">WidgetContext</a></code> - A reference to <a href="https://github.com/thingsboard/thingsboard/blob/5bb6403407aa4898084832d6698aa9ea6d484889/ui-ngx/src/app/modules/home/models/widget-component.models.ts#L107" target="_blank">WidgetContext</a> that has all necessary API |
||||
|
and data used by widget instance. |
||||
|
</li> |
||||
|
</ul> |
||||
|
|
||||
|
**Returns:** |
||||
|
|
||||
|
Should return string value presenting cell content HTML. |
||||
|
|
||||
|
<div class="divider"></div> |
||||
|
|
||||
|
##### Examples |
||||
|
|
||||
|
* Styled cell content for temperature field: |
||||
|
|
||||
|
```javascript |
||||
|
var temperature = value; |
||||
|
var color = '#fff'; |
||||
|
if (temperature) { |
||||
|
if (temperature > 25) { |
||||
|
color = 'red'; |
||||
|
} else { |
||||
|
color = 'green'; |
||||
|
} |
||||
|
} |
||||
|
return '<div style="border: 2px solid #0072ff; ' + |
||||
|
'border-radius: 10px; padding: 5px; ' + |
||||
|
'color: #fff; ' + |
||||
|
'background-color: '+ color +'; ' + |
||||
|
'text-align: center;">' + temperature + '</div>'; |
||||
|
{:copy-code} |
||||
|
``` |
||||
|
|
||||
|
<br> |
||||
|
<br> |
||||
@ -0,0 +1,52 @@ |
|||||
|
#### Cell style function |
||||
|
|
||||
|
<div class="divider"></div> |
||||
|
<br/> |
||||
|
|
||||
|
*function (value, rowData, ctx): {[key: string]: string}* |
||||
|
|
||||
|
A JavaScript function used to compute timeseries cell style depending on timeseries field value. |
||||
|
|
||||
|
**Parameters:** |
||||
|
|
||||
|
<ul> |
||||
|
<li><b>value:</b> <code>any</code> - An timeseries field value displayed in the cell. |
||||
|
</li> |
||||
|
<li><b>rowData:</b> <code><a href="https://github.com/thingsboard/thingsboard/blob/e264f7b8ddff05bda85c4833bf497f47f447496e/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.ts#L80" target="_blank">TimeseriesRow</a></code> - A |
||||
|
<a href="https://github.com/thingsboard/thingsboard/blob/e264f7b8ddff05bda85c4833bf497f47f447496e/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.ts#L80" target="_blank">TimeseriesRow</a> object |
||||
|
presenting <code>formattedTs</code> (a string value of formatted timestamp) and <br> timeseries values for each column declared in widget datasource configuration. |
||||
|
</li> |
||||
|
<li><b>ctx:</b> <code><a href="https://github.com/thingsboard/thingsboard/blob/5bb6403407aa4898084832d6698aa9ea6d484889/ui-ngx/src/app/modules/home/models/widget-component.models.ts#L107" target="_blank">WidgetContext</a></code> - A reference to <a href="https://github.com/thingsboard/thingsboard/blob/5bb6403407aa4898084832d6698aa9ea6d484889/ui-ngx/src/app/modules/home/models/widget-component.models.ts#L107" target="_blank">WidgetContext</a> that has all necessary API |
||||
|
and data used by widget instance. |
||||
|
</li> |
||||
|
</ul> |
||||
|
|
||||
|
**Returns:** |
||||
|
|
||||
|
Should return key/value object presenting style attributes. |
||||
|
|
||||
|
<div class="divider"></div> |
||||
|
|
||||
|
##### Examples |
||||
|
|
||||
|
* Set color depending on temperature value: |
||||
|
|
||||
|
```javascript |
||||
|
var temperature = value; |
||||
|
var color = 'black'; |
||||
|
if (temperature) { |
||||
|
if (temperature > 25) { |
||||
|
color = 'red'; |
||||
|
} else { |
||||
|
color = 'green'; |
||||
|
} |
||||
|
} |
||||
|
return { |
||||
|
fontWeight: 'bold', |
||||
|
color: color |
||||
|
}; |
||||
|
{:copy-code} |
||||
|
``` |
||||
|
|
||||
|
<br> |
||||
|
<br> |
||||
@ -0,0 +1,49 @@ |
|||||
|
#### Row style function |
||||
|
|
||||
|
<div class="divider"></div> |
||||
|
<br/> |
||||
|
|
||||
|
*function (rowData, ctx): {[key: string]: string}* |
||||
|
|
||||
|
A JavaScript function used to compute timeseries row style depending on row value. |
||||
|
|
||||
|
**Parameters:** |
||||
|
|
||||
|
<ul> |
||||
|
<li><b>rowData:</b> <code><a href="https://github.com/thingsboard/thingsboard/blob/e264f7b8ddff05bda85c4833bf497f47f447496e/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.ts#L80" target="_blank">TimeseriesRow</a></code> - A |
||||
|
<a href="https://github.com/thingsboard/thingsboard/blob/e264f7b8ddff05bda85c4833bf497f47f447496e/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.ts#L80" target="_blank">TimeseriesRow</a> object |
||||
|
presenting <code>formattedTs</code> (a string value of formatted timestamp) and <br> timeseries values for each column declared in widget datasource configuration. |
||||
|
</li> |
||||
|
<li><b>ctx:</b> <code><a href="https://github.com/thingsboard/thingsboard/blob/5bb6403407aa4898084832d6698aa9ea6d484889/ui-ngx/src/app/modules/home/models/widget-component.models.ts#L107" target="_blank">WidgetContext</a></code> - A reference to <a href="https://github.com/thingsboard/thingsboard/blob/5bb6403407aa4898084832d6698aa9ea6d484889/ui-ngx/src/app/modules/home/models/widget-component.models.ts#L107" target="_blank">WidgetContext</a> that has all necessary API |
||||
|
and data used by widget instance. |
||||
|
</li> |
||||
|
</ul> |
||||
|
|
||||
|
**Returns:** |
||||
|
|
||||
|
Should return key/value object presenting style attributes. |
||||
|
|
||||
|
<div class="divider"></div> |
||||
|
|
||||
|
##### Examples |
||||
|
|
||||
|
* Set row background color depending on temperature value: |
||||
|
|
||||
|
```javascript |
||||
|
var temperature = rowData.temperature; |
||||
|
var color = '#fff'; |
||||
|
if (temperature) { |
||||
|
if (temperature > 25) { |
||||
|
color = 'red'; |
||||
|
} else { |
||||
|
color = 'green'; |
||||
|
} |
||||
|
} |
||||
|
return { |
||||
|
backgroundColor: color |
||||
|
}; |
||||
|
{:copy-code} |
||||
|
``` |
||||
|
|
||||
|
<br> |
||||
|
<br> |
||||
Loading…
Reference in new issue