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-enable no-undef */
/* eslint-disable no-undef */ /* eslint-disable no-undef */
createMarker(location, settings, onClickListener, markerArgs) { createMarker(location, dsIndex, settings, onClickListener, markerArgs) {
var marker; var marker;
if (settings.showLabel) { if (settings.showLabel) {
marker = new MarkerWithLabel({ marker = new MarkerWithLabel({
@ -244,7 +244,7 @@ export default class TbGoogleMap {
}); });
if (settings.displayTooltip) { if (settings.displayTooltip) {
this.createTooltip(marker, settings.tooltipPattern, settings.tooltipReplaceInfo, settings.autocloseTooltip, markerArgs); this.createTooltip(marker, dsIndex, settings, markerArgs);
} }
if (onClickListener) { if (onClickListener) {
@ -261,13 +261,13 @@ export default class TbGoogleMap {
/* eslint-enable no-undef */ /* eslint-enable no-undef */
/* eslint-disable no-undef */ /* eslint-disable no-undef */
createTooltip(marker, pattern, replaceInfo, autoClose, markerArgs) { createTooltip(marker, dsIndex, settings, markerArgs) {
var popup = new google.maps.InfoWindow({ var popup = new google.maps.InfoWindow({
content: '' content: ''
}); });
var map = this; var map = this;
marker.addListener('click', function() { marker.addListener('click', function() {
if (autoClose) { if (settings.autocloseTooltip) {
map.tooltips.forEach((tooltip) => { map.tooltips.forEach((tooltip) => {
tooltip.popup.close(); tooltip.popup.close();
}); });
@ -277,8 +277,8 @@ export default class TbGoogleMap {
this.tooltips.push( { this.tooltips.push( {
markerArgs: markerArgs, markerArgs: markerArgs,
popup: popup, popup: popup,
pattern: pattern, locationSettings: settings,
replaceInfo: replaceInfo dsIndex: dsIndex
}); });
} }
/* eslint-enable no-undef */ /* 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); onMarkerIconReady(iconInfo);
} }
createMarker(position, settings, onClickListener, markerArgs) { createMarker(position, dsIndex, settings, onClickListener, markerArgs) {
var pos = this.posFunction(position.x, position.y); var pos = this.posFunction(position.x, position.y);
var x = pos.x * this.width; var x = pos.x * this.width;
var y = pos.y * this.height; var y = pos.y * this.height;
@ -319,7 +319,7 @@ export default class TbImageMap {
}); });
if (settings.displayTooltip) { if (settings.displayTooltip) {
this.createTooltip(marker, settings.tooltipPattern, settings.tooltipReplaceInfo, settings.autocloseTooltip, markerArgs); this.createTooltip(marker, dsIndex, settings, markerArgs);
} }
if (onClickListener) { 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(); var popup = L.popup();
popup.setContent(''); popup.setContent('');
marker.bindPopup(popup, {autoClose: autoClose, closeOnClick: false}); marker.bindPopup(popup, {autoClose: settings.autocloseTooltip, closeOnClick: false});
this.tooltips.push( { this.tooltips.push( {
markerArgs: markerArgs, markerArgs: markerArgs,
popup: popup, popup: popup,
pattern: pattern, locationSettings: settings,
replaceInfo: replaceInfo dsIndex: dsIndex
}); });
} }

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

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

@ -126,7 +126,7 @@ export default class TbOpenStreetMap {
onMarkerIconReady(iconInfo); onMarkerIconReady(iconInfo);
} }
createMarker(location, settings, onClickListener, markerArgs) { createMarker(location, dsIndex, settings, onClickListener, markerArgs) {
var marker = L.marker(location, {}); var marker = L.marker(location, {});
var opMap = this; var opMap = this;
this.createMarkerIcon(marker, settings, (iconInfo) => { this.createMarkerIcon(marker, settings, (iconInfo) => {
@ -140,7 +140,7 @@ export default class TbOpenStreetMap {
}); });
if (settings.displayTooltip) { if (settings.displayTooltip) {
this.createTooltip(marker, settings.tooltipPattern, settings.tooltipReplaceInfo, settings.autocloseTooltip, markerArgs); this.createTooltip(marker, dsIndex, settings, markerArgs);
} }
if (onClickListener) { if (onClickListener) {
@ -154,15 +154,15 @@ export default class TbOpenStreetMap {
this.map.removeLayer(marker); this.map.removeLayer(marker);
} }
createTooltip(marker, pattern, replaceInfo, autoClose, markerArgs) { createTooltip(marker, dsIndex, settings, markerArgs) {
var popup = L.popup(); var popup = L.popup();
popup.setContent(''); popup.setContent('');
marker.bindPopup(popup, {autoClose: autoClose, closeOnClick: false}); marker.bindPopup(popup, {autoClose: settings.autocloseTooltip, closeOnClick: false});
this.tooltips.push( { this.tooltips.push( {
markerArgs: markerArgs, markerArgs: markerArgs,
popup: popup, popup: popup,
pattern: pattern, locationSettings: settings,
replaceInfo: replaceInfo 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-enable no-undef */
/* eslint-disable no-undef */ /* eslint-disable no-undef */
createMarker(location, settings, onClickListener, markerArgs) { createMarker(location, dsIndex, settings, onClickListener, markerArgs) {
var marker = new qq.maps.Marker({ var marker = new qq.maps.Marker({
position: location position: location
}); });
@ -247,7 +247,7 @@ export default class TbTencentMap {
}); });
if (settings.displayTooltip) { if (settings.displayTooltip) {
this.createTooltip(marker, settings.tooltipPattern, settings.tooltipReplaceInfo, settings.autocloseTooltip, markerArgs); this.createTooltip(marker, dsIndex, settings, markerArgs);
} }
if (onClickListener) { if (onClickListener) {
@ -268,13 +268,13 @@ export default class TbTencentMap {
/* eslint-enable no-undef */ /* eslint-enable no-undef */
/* eslint-disable no-undef */ /* eslint-disable no-undef */
createTooltip(marker, pattern, replaceInfo, autoClose, markerArgs) { createTooltip(marker, dsIndex, settings, markerArgs) {
var popup = new qq.maps.InfoWindow({ var popup = new qq.maps.InfoWindow({
map :this.map map :this.map
}); });
var map = this; var map = this;
qq.maps.event.addListener(marker, 'click', function() { qq.maps.event.addListener(marker, 'click', function() {
if (autoClose) { if (settings.autocloseTooltip) {
map.tooltips.forEach((tooltip) => { map.tooltips.forEach((tooltip) => {
tooltip.popup.close(); tooltip.popup.close();
}); });
@ -285,8 +285,8 @@ export default class TbTencentMap {
this.tooltips.push( { this.tooltips.push( {
markerArgs: markerArgs, markerArgs: markerArgs,
popup: popup, popup: popup,
pattern: pattern, locationSettings: settings,
replaceInfo: replaceInfo dsIndex: dsIndex
}); });
} }
/* eslint-enable no-undef */ /* eslint-enable no-undef */