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