dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #1263 from Terny22/improvement/map-widgets

Browse Source 
Added label/tooltip-function settings to Map-widgets
This commit is contained in:
Igor Kulikov 2018-11-23 12:32:31 +02:00 committed by GitHub
commit d7a23f4048
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 148 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
application/src/main/data/json/system/widget_bundles/maps.json
View File

File diff suppressed because one or more lines are too long

12
ui/src/app/widget/lib/google-map.js
View File

@ -221,7 +221,7 @@ export default class TbGoogleMap {
/* eslint-enable no-undef */
/* eslint-disable no-undef */
createMarker(location, settings, onClickListener, markerArgs) {
createMarker(location, dsIndex, settings, onClickListener, markerArgs) {
var marker;
if (settings.showLabel) {
marker = new MarkerWithLabel({
@ -244,7 +244,7 @@ export default class TbGoogleMap {
});
if (settings.displayTooltip) {
this.createTooltip(marker, settings.tooltipPattern, settings.tooltipReplaceInfo, settings.autocloseTooltip, markerArgs);
this.createTooltip(marker, dsIndex, settings, markerArgs);
}
if (onClickListener) {
@ -261,13 +261,13 @@ export default class TbGoogleMap {
/* eslint-enable no-undef */
/* eslint-disable no-undef */
createTooltip(marker, pattern, replaceInfo, autoClose, markerArgs) {
createTooltip(marker, dsIndex, settings, markerArgs) {
var popup = new google.maps.InfoWindow({
content: ''
});
var map = this;
marker.addListener('click', function() {
if (autoClose) {
if (settings.autocloseTooltip) {
map.tooltips.forEach((tooltip) => {
tooltip.popup.close();
});
@ -277,8 +277,8 @@ export default class TbGoogleMap {
this.tooltips.push( {
markerArgs: markerArgs,
popup: popup,
pattern: pattern,
replaceInfo: replaceInfo
locationSettings: settings,
dsIndex: dsIndex
});
}
/* eslint-enable no-undef */

12
ui/src/app/widget/lib/image-map.js
View File

@ -298,7 +298,7 @@ export default class TbImageMap {
onMarkerIconReady(iconInfo);
}
createMarker(position, settings, onClickListener, markerArgs) {
createMarker(position, dsIndex, settings, onClickListener, markerArgs) {
var pos = this.posFunction(position.x, position.y);
var x = pos.x * this.width;
var y = pos.y * this.height;
@ -319,7 +319,7 @@ export default class TbImageMap {
});
if (settings.displayTooltip) {
this.createTooltip(marker, settings.tooltipPattern, settings.tooltipReplaceInfo, settings.autocloseTooltip, markerArgs);
this.createTooltip(marker, dsIndex, settings, markerArgs);
}
if (onClickListener) {
@ -348,15 +348,15 @@ export default class TbImageMap {
}
}
createTooltip(marker, pattern, replaceInfo, autoClose, markerArgs) {
createTooltip(marker, dsIndex, settings, markerArgs) {
var popup = L.popup();
popup.setContent('');
marker.bindPopup(popup, {autoClose: autoClose, closeOnClick: false});
marker.bindPopup(popup, {autoClose: settings.autocloseTooltip, closeOnClick: false});
this.tooltips.push( {
markerArgs: markerArgs,
popup: popup,
pattern: pattern,
replaceInfo: replaceInfo
locationSettings: settings,
dsIndex: dsIndex
});
}

120
ui/src/app/widget/lib/map-widget2.js
View File

@ -138,6 +138,24 @@ export default class TbMapWidgetV2 {
this.locationSettings.label = this.ctx.settings.label || "${entityName}";
this.locationSettings.color = this.ctx.settings.color ? tinycolor(this.ctx.settings.color).toHexString() : "#FE7569";
this.locationSettings.useLabelFunction = this.ctx.settings.useLabelFunction === true;
if (angular.isDefined(this.ctx.settings.labelFunction) && this.ctx.settings.labelFunction.length > 0) {
try {
this.locationSettings.labelFunction = new Function('data, dsData, dsIndex', this.ctx.settings.labelFunction);
} catch (e) {
this.locationSettings.labelFunction = null;
}
}
this.locationSettings.useTooltipFunction = this.ctx.settings.useTooltipFunction === true;
if (angular.isDefined(this.ctx.settings.tooltipFunction) && this.ctx.settings.tooltipFunction.length > 0) {
try {
this.locationSettings.tooltipFunction = new Function('data, dsData, dsIndex', this.ctx.settings.tooltipFunction);
} catch (e) {
this.locationSettings.tooltipFunction = null;
}
}
this.locationSettings.useColorFunction = this.ctx.settings.useColorFunction === true;
if (angular.isDefined(this.ctx.settings.colorFunction) && this.ctx.settings.colorFunction.length > 0) {
try {
@ -192,14 +210,30 @@ export default class TbMapWidgetV2 {
var tbMap = this;
function updateLocationLabel(location) {
if (location.settings.showLabel && location.settings.labelReplaceInfo.variables.length) {
function updateLocationLabel(location, dataMap) {
if (location.settings.showLabel) {
if (location.settings.useLabelFunction && location.settings.labelFunction) {
try {
location.settings.label = location.settings.labelFunction(dataMap.dataMap, dataMap.dsDataMap, location.dsIndex);
} catch (e) {
location.settings.label = null;
}
if (location.settings.label) {
var datasources = tbMap.subscription.datasources;
location.settings.label = tbMap.utils.createLabelFromDatasource(datasources[location.dsIndex], location.settings.label);
location.settings.labelReplaceInfo = processPattern(location.settings.label, datasources, location.dsIndex);
location.settings.labelText = location.settings.label;
}
}
if (location.settings.labelReplaceInfo.variables.length) {
location.settings.labelText = fillPattern(location.settings.label,
location.settings.labelReplaceInfo, tbMap.subscription.data);
}
tbMap.map.updateMarkerLabel(location.marker, location.settings);
}
}
function calculateLocationColor(location, dataMap) {
if (location.settings.useColorFunction && location.settings.colorFunction) {
var color;
@ -249,7 +283,7 @@ export default class TbMapWidgetV2 {
}
function updateLocationStyle(location, dataMap) {
updateLocationLabel(location);
updateLocationLabel(location, dataMap);
var color = calculateLocationColor(location, dataMap);
var image = calculateLocationMarkerImage(location, dataMap);
updateLocationColor(location, color, image);
@ -263,7 +297,7 @@ export default class TbMapWidgetV2 {
if (image && (!location.settings.currentImage || !angular.equals(location.settings.currentImage, image))) {
location.settings.currentImage = image;
}
location.marker = tbMap.map.createMarker(markerLocation, location.settings,
location.marker = tbMap.map.createMarker(markerLocation, location.dsIndex, location.settings,
function (event) {
tbMap.callbacks.onLocationClick(location);
locationRowClick(event, location);
@ -425,6 +459,25 @@ export default class TbMapWidgetV2 {
}
}
function createTooltipContent(tooltip, data, datasources) {
var content;
var settings = tooltip.locationSettings;
if (settings.useTooltipFunction && settings.tooltipFunction) {
var dataMap = toLabelValueMap(data, datasources);
try {
settings.tooltipPattern = settings.tooltipFunction(dataMap.dataMap, dataMap.dsDataMap, tooltip.dsIndex);
} catch (e) {
settings.tooltipPattern = null;
}
if (settings.tooltipPattern) {
settings.tooltipPattern = tbMap.utils.createLabelFromDatasource(datasources[tooltip.dsIndex], settings.tooltipPattern);
settings.tooltipReplaceInfo = processPattern(settings.tooltipPattern, datasources, tooltip.dsIndex);
}
}
content = fillPattern(settings.tooltipPattern, settings.tooltipReplaceInfo, data);
return fillPatternWithActions(content, 'onTooltipAction', tooltip.markerArgs);
}
if (this.map && this.map.inited() && this.subscription) {
if (this.subscription.data) {
if (!this.locations) {
@ -435,8 +488,7 @@ export default class TbMapWidgetV2 {
var tooltips = this.map.getTooltips();
for (var t = 0; t < tooltips.length; t++) {
var tooltip = tooltips[t];
var text = fillPattern(tooltip.pattern, tooltip.replaceInfo, this.subscription.data);
text = fillPatternWithActions(text, 'onTooltipAction', tooltip.markerArgs);
var text = createTooltipContent(tooltip, this.subscription.data, this.subscription.datasources);
tooltip.popup.setContent(text);
}
}
@ -683,6 +735,15 @@ const commonMapSettingsSchema =
"type":"string",
"default":"${entityName}"
},
"useLabelFunction": {
"title":"Use label function",
"type":"boolean",
"default":false
},
"labelFunction":{
"title":"Label function: f(data, dsData, dsIndex)",
"type":"string"
},
"showTooltip": {
"title": "Show tooltip",
"type":"boolean",
@ -698,6 +759,15 @@ const commonMapSettingsSchema =
"type":"string",
"default":"<b>${entityName}</b><br/><br/><b>Latitude:</b> ${latitude:7}<br/><b>Longitude:</b> ${longitude:7}"
},
"useTooltipFunction": {
"title":"Use tooltip function",
"type":"boolean",
"default":false
},
"tooltipFunction":{
"title":"Tooltip function: f(data, dsData, dsIndex)",
"type":"string"
},
"color":{
"title":"Color",
"type":"string"
@ -747,12 +817,22 @@ const commonMapSettingsSchema =
"lngKeyName",
"showLabel",
"label",
"useLabelFunction",
{
"key":"labelFunction",
"type":"javascript"
},
"showTooltip",
"autocloseTooltip",
{
"key": "tooltipPattern",
"type": "textarea"
},
"useTooltipFunction",
{
"key":"tooltipFunction",
"type":"javascript"
},
{
"key":"color",
"type":"color"
@ -851,6 +931,15 @@ const imageMapSettingsSchema =
"type":"string",
"default":"${entityName}"
},
"useLabelFunction": {
"title":"Use label function",
"type":"boolean",
"default":false
},
"labelFunction":{
"title":"Label function: f(data, dsData, dsIndex)",
"type":"string"
},
"showTooltip": {
"title": "Show tooltip",
"type":"boolean",
@ -866,6 +955,15 @@ const imageMapSettingsSchema =
"type":"string",
"default":"<b>${entityName}</b><br/><br/><b>X Pos:</b> ${xPos:2}<br/><b>Y Pos:</b> ${yPos:2}"
},
"useTooltipFunction": {
"title":"Use tooltip function",
"type":"boolean",
"default":false
},
"tooltipFunction":{
"title":"Tooltip function: f(data, dsData, dsIndex)",
"type":"string"
},
"color":{
"title":"Color",
"type":"string"
@ -934,12 +1032,22 @@ const imageMapSettingsSchema =
"yPosKeyName",
"showLabel",
"label",
"useLabelFunction",
{
"key":"labelFunction",
"type":"javascript"
},
"showTooltip",
"autocloseTooltip",
{
"key": "tooltipPattern",
"type": "textarea"
},
"useTooltipFunction",
{
"key":"tooltipFunction",
"type":"javascript"
},
{
"key":"color",
"type":"color"

12
ui/src/app/widget/lib/openstreet-map.js
View File

@ -126,7 +126,7 @@ export default class TbOpenStreetMap {
onMarkerIconReady(iconInfo);
}
createMarker(location, settings, onClickListener, markerArgs) {
createMarker(location, dsIndex, settings, onClickListener, markerArgs) {
var marker = L.marker(location, {});
var opMap = this;
this.createMarkerIcon(marker, settings, (iconInfo) => {
@ -140,7 +140,7 @@ export default class TbOpenStreetMap {
});
if (settings.displayTooltip) {
this.createTooltip(marker, settings.tooltipPattern, settings.tooltipReplaceInfo, settings.autocloseTooltip, markerArgs);
this.createTooltip(marker, dsIndex, settings, markerArgs);
}
if (onClickListener) {
@ -154,15 +154,15 @@ export default class TbOpenStreetMap {
this.map.removeLayer(marker);
}
createTooltip(marker, pattern, replaceInfo, autoClose, markerArgs) {
createTooltip(marker, dsIndex, settings, markerArgs) {
var popup = L.popup();
popup.setContent('');
marker.bindPopup(popup, {autoClose: autoClose, closeOnClick: false});
marker.bindPopup(popup, {autoClose: settings.autocloseTooltip, closeOnClick: false});
this.tooltips.push( {
markerArgs: markerArgs,
popup: popup,
pattern: pattern,
replaceInfo: replaceInfo
locationSettings: settings,
dsIndex: dsIndex
});
}

12
ui/src/app/widget/lib/tencent-map.js
View File

@ -224,7 +224,7 @@ export default class TbTencentMap {
/* eslint-enable no-undef */
/* eslint-disable no-undef */
createMarker(location, settings, onClickListener, markerArgs) {
createMarker(location, dsIndex, settings, onClickListener, markerArgs) {
var marker = new qq.maps.Marker({
position: location
});
@ -247,7 +247,7 @@ export default class TbTencentMap {
});
if (settings.displayTooltip) {
this.createTooltip(marker, settings.tooltipPattern, settings.tooltipReplaceInfo, settings.autocloseTooltip, markerArgs);
this.createTooltip(marker, dsIndex, settings, markerArgs);
}
if (onClickListener) {
@ -268,13 +268,13 @@ export default class TbTencentMap {
/* eslint-enable no-undef */
/* eslint-disable no-undef */
createTooltip(marker, pattern, replaceInfo, autoClose, markerArgs) {
createTooltip(marker, dsIndex, settings, markerArgs) {
var popup = new qq.maps.InfoWindow({
map :this.map
});
var map = this;
qq.maps.event.addListener(marker, 'click', function() {
if (autoClose) {
if (settings.autocloseTooltip) {
map.tooltips.forEach((tooltip) => {
tooltip.popup.close();
});
@ -285,8 +285,8 @@ export default class TbTencentMap {
this.tooltips.push( {
markerArgs: markerArgs,
popup: popup,
pattern: pattern,
replaceInfo: replaceInfo
locationSettings: settings,
dsIndex: dsIndex
});
}
/* eslint-enable no-undef */