Browse Source

UI: Refactor parameters of clustering function

pull/7311/head
Artem Dzhereleiko 4 years ago
parent
commit
8bedf285df
  1. 3
      ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts
  2. 7
      ui-ngx/src/assets/help/en_US/widget/lib/map/clustering_color_fn.md

3
ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts

@ -140,9 +140,10 @@ export default abstract class LeafletMap {
if (markerClusteringSettings.useIconCreateFunction && markerClusteringSettings.clusterMarkerFunction) { if (markerClusteringSettings.useIconCreateFunction && markerClusteringSettings.clusterMarkerFunction) {
this.clusteringSettings.iconCreateFunction = (cluster) => { this.clusteringSettings.iconCreateFunction = (cluster) => {
const childCount = cluster.getChildCount(); const childCount = cluster.getChildCount();
const formattedData = cluster.getAllChildMarkers().map(clusterMarker => clusterMarker.options.tbMarkerData);
const markerColor = markerClusteringSettings.clusterMarkerFunction const markerColor = markerClusteringSettings.clusterMarkerFunction
? safeExecute(markerClusteringSettings.parsedClusterMarkerFunction, ? safeExecute(markerClusteringSettings.parsedClusterMarkerFunction,
[cluster.getAllChildMarkers(), childCount]) [formattedData, childCount])
: null; : null;
if (isDefinedAndNotNull(markerColor) && tinycolor(markerColor).isValid()) { if (isDefinedAndNotNull(markerColor) && tinycolor(markerColor).isValid()) {
const parsedColor = tinycolor(markerColor); const parsedColor = tinycolor(markerColor);

7
ui-ngx/src/assets/help/en_US/widget/lib/map/clustering_color_fn.md

@ -10,10 +10,11 @@ A JavaScript function used to compute clustering marker color.
**Parameters:** **Parameters:**
<ul> <ul>
<li><b>data:</b> Array<<code><a href="https://github.com/thingsboard/thingsboard/blob/5bb6403407aa4898084832d6698aa9ea6d484889/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-models.ts#L108" target="_blank">FormattedData</a></code>> - A <a href="https://github.com/thingsboard/thingsboard/blob/5bb6403407aa4898084832d6698aa9ea6d484889/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-models.ts#L108" target="_blank">FormattedData</a> object associated with marker or data point of the route.<br/> <li><b>data:</b> <code><a href="https://github.com/thingsboard/thingsboard/blob/5bb6403407aa4898084832d6698aa9ea6d484889/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-models.ts#L108" target="_blank">FormattedData[]</a></code>
- the array of total markers contained within each cluster.<br/>
Represents basic entity properties (ex. <code>entityId</code>, <code>entityName</code>)<br/>and provides access to other entity attributes/timeseries declared in widget datasource configuration. Represents basic entity properties (ex. <code>entityId</code>, <code>entityName</code>)<br/>and provides access to other entity attributes/timeseries declared in widget datasource configuration.
</li> </li>
<li><b>childCount:</b> <code>number</code> - number of markers in this cluster <li><b>childCount:</b> <code>number</code> - the total number of markers contained within that cluster
</li> </li>
</ul> </ul>
@ -36,7 +37,7 @@ Calculate color depending on temperature telemetry value:
```javascript ```javascript
let customColor; let customColor;
for (let markerData of data) { for (let markerData of data) {
if (markerData.options.tbMarkerData.temperature > 40) { if (markerData.temperature > 40) {
customColor = 'red' customColor = 'red'
} }
} }

Loading…
Cancel
Save