Igor Kulikov
4 years ago
committed by
GitHub
GitHub
11 changed files with 226 additions and 49 deletions
@ -0,0 +1,65 @@ |
|||||
|
#### Clustering marker function |
||||
|
|
||||
|
<div class="divider"></div> |
||||
|
<br/> |
||||
|
|
||||
|
*function (data, childCount): string* |
||||
|
|
||||
|
A JavaScript function used to compute clustering marker color. |
||||
|
|
||||
|
**Parameters:** |
||||
|
|
||||
|
<ul> |
||||
|
<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. |
||||
|
</li> |
||||
|
<li><b>childCount:</b> <code>number</code> - the total number of markers contained within that cluster |
||||
|
</li> |
||||
|
</ul> |
||||
|
|
||||
|
**Returns:** |
||||
|
|
||||
|
Should return string value presenting color of the marker. |
||||
|
|
||||
|
In case no data is returned, color value from **Color** settings field will be used. |
||||
|
|
||||
|
<div class="divider"></div> |
||||
|
|
||||
|
##### Examples |
||||
|
|
||||
|
<ul> |
||||
|
<li> |
||||
|
Calculate color depending on temperature telemetry value: |
||||
|
</li> |
||||
|
|
||||
|
|
||||
|
```javascript |
||||
|
let customColor; |
||||
|
for (let markerData of data) { |
||||
|
if (markerData.temperature > 40) { |
||||
|
customColor = 'red' |
||||
|
} |
||||
|
} |
||||
|
return customColor ? customColor : 'green'; |
||||
|
{:copy-code} |
||||
|
``` |
||||
|
|
||||
|
<li> |
||||
|
Calculate color depending on childCount: |
||||
|
</li> |
||||
|
|
||||
|
```javascript |
||||
|
if (childCount < 10) { |
||||
|
return 'green'; |
||||
|
} else if (childCount < 100) { |
||||
|
return 'yellow'; |
||||
|
} else { |
||||
|
return 'red'; |
||||
|
} |
||||
|
{:copy-code} |
||||
|
``` |
||||
|
|
||||
|
</ul> |
||||
|
<br> |
||||
|
<br> |
||||
@ -0,0 +1,24 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2022 The Thingsboard Authors
|
||||
|
///
|
||||
|
/// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
|
/// you may not use this file except in compliance with the License.
|
||||
|
/// You may obtain a copy of the License at
|
||||
|
///
|
||||
|
/// http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
///
|
||||
|
/// Unless required by applicable law or agreed to in writing, software
|
||||
|
/// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
|
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
|
/// See the License for the specific language governing permissions and
|
||||
|
/// limitations under the License.
|
||||
|
///
|
||||
|
|
||||
|
import { FormattedData } from '@shared/models/widget.models'; |
||||
|
|
||||
|
// redeclare module, maintains compatibility with @types/leaflet
|
||||
|
declare module 'leaflet' { |
||||
|
interface MarkerOptions { |
||||
|
tbMarkerData?: FormattedData; |
||||
|
} |
||||
|
} |
||||
Loading…
Reference in new issue