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

label fix & tooltips support

Browse Source
This commit is contained in:
Artem Halushko 2020-03-13 14:24:56 +02:00
parent e77754a6b1
commit 09a446bdad
11 changed files with 91 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
ui-ngx/src/app/core/utils.ts
View File

@ -518,3 +518,50 @@ export function parseFunction(source: string, params: string[] = []): Function {
}
return res;
}
export function parseTemplate(template, data) {
function formatValue(value, pattern) {
}
let res = '';
try {
let variables = '';
let expressions = template
.match(/\{(.*?)\}/g) // find expressions
.map(exp => exp.replace(/{|}/g, '')) // remove brackets
.map(exp => exp.split(':'))
.filter(arr => !!arr[1]) //filter expressions without format
.reduce((res, current) => {
res[current[0]] = current[1];
return res;
}, {});
for (let key in data) {
if (!key.includes('|'))
variables += `let ${key} = '${expressions[key] ? padValue(data[key], +expressions[key]) : data[key]}';`;
}
template = template.replace(/:\d+}/g, '}');
res = safeExecute(parseFunction(variables + 'return' + '`' + template + '`'));
}
catch (ex) {
}
return res;
}
export function padValue(val: any, dec: number): string {
let strVal;
let n;
val = parseFloat(val);
n = (val < 0);
val = Math.abs(val);
if (dec > 0) {
strVal = val.toFixed(dec).toString()
} else {
strVal = Math.round(val).toString();
}
strVal = (n ? '-' : '') + strVal;
return strVal;
}

22
ui-ngx/src/app/modules/home/components/widget/lib/canvas-digital-gauge.ts
View File

@ -20,7 +20,7 @@ import BaseGauge = CanvasGauges.BaseGauge;
import { FontStyle, FontWeight } from '@home/components/widget/lib/settings.models';
import * as tinycolor_ from 'tinycolor2';
import { ColorFormats } from 'tinycolor2';
import { isDefined, isString, isUndefined } from '@core/utils';
import { isDefined, isString, isUndefined, padValue } from '@core/utils';
const tinycolor = tinycolor_;
@ -765,24 +765,6 @@ function drawDigitalMinMax(context: DigitalGaugeCanvasRenderingContext2D, option
drawText(context, options, 'MinMax', options.maxValue+'', maxX, maxY);
}
function padValue(val: any, options: CanvasDigitalGaugeOptions): string {
const dec = options.valueDec;
let strVal;
let n;
val = parseFloat(val);
n = (val < 0);
val = Math.abs(val);
if (dec > 0) {
strVal = val.toFixed(dec).toString()
} else {
strVal = Math.round(val).toString();
}
strVal = (n ? '-' : '') + strVal;
return strVal;
}
function drawDigitalValue(context: DigitalGaugeCanvasRenderingContext2D, options: CanvasDigitalGaugeOptions, value: any) {
if (options.hideValue) return;
@ -792,7 +774,7 @@ function drawDigitalValue(context: DigitalGaugeCanvasRenderingContext2D, options
const textX = Math.round(baseX + width / 2);
const textY = valueY;
let text = options.valueText || padValue(value, options);
let text = options.valueText || padValue(value, options.valueDec);
text += options.symbol;
context.save();

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

@ -98,26 +98,6 @@ export default abstract class LeafletMap {
this.map.invalidateSize(true);
}
createTooltip(marker, dsIndex, settings, markerArgs) {
var popup = L.popup();
popup.setContent('');
marker.bindPopup(popup, { autoClose: settings.autocloseTooltip, closeOnClick: false });
if (settings.displayTooltipAction == 'hover') {
marker.off('click');
marker.on('mouseover', function () {
this.openPopup();
});
marker.on('mouseout', function () {
this.closePopup();
});
}
return {
markerArgs: markerArgs,
popup: popup,
locationSettings: settings,
dsIndex: dsIndex
}
}
onResize() {
@ -169,6 +149,9 @@ export default abstract class LeafletMap {
if (!location.equals(marker.location)) {
marker.updateMarkerPosition(location);
}
if (settings.showTooltip) {
marker.updateMarkerTooltip(data);
}
marker.setDataSources(data, dataSources);
marker.updateMarkerIcon(settings);
}
@ -207,11 +190,11 @@ export default abstract class LeafletMap {
updatePolyline(data, dataSources, settings) {
this.ready$.subscribe(() => {
this.poly.updatePolyline(settings, data, dataSources);
const bounds = this.bounds.extend(this.poly.leafletPoly.getBounds());
if (bounds.isValid()) {
this.map.fitBounds(bounds);
this.bounds = bounds;
}
/* const bounds = this.bounds.extend(this.poly.leafletPoly.getBounds());
if (bounds.isValid()) {
this.map.fitBounds(bounds);
this.bounds = bounds;
}*/
});
}
}

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

@ -46,10 +46,11 @@ export enum MapProviders {
}
export interface MarkerSettings extends MapOptions {
tooltipPattern?: any;
icon?: any;
showLabel?: boolean,
draggable?: boolean,
displayTooltip?: boolean,
showTooltip?: boolean,
color?: string,
currentImage?: string;
useMarkerImageFunction?: boolean,

4
ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts
View File

@ -40,7 +40,7 @@ export class MapWidgetController implements MapWidgetInterface {
schema;
data;
constructor(public mapProvider: MapProviders, private drawRoutes, ctx, $element) {
constructor(public mapProvider: MapProviders, private drawRoutes, public ctx, $element) {
if (this.map) {
this.map.map.remove();
delete this.map;
@ -73,6 +73,7 @@ export class MapWidgetController implements MapWidgetInterface {
colorFunction: parseFunction(settings.colorFunction, functionParams),
polygonColorFunction: parseFunction(settings.polygonColorFunction, functionParams),
markerImageFunction: parseFunction(settings.markerImageFunction, ['data', 'images', 'dsData', 'dsIndex']),
labelColor: this.ctx.widgetConfig.color,
tooltipPattern: settings.tooltipPattern ||
"<b>${entityName}</b><br/><br/><b>Latitude:</b> ${" + settings.latKeyName + ":7}<br/><b>Longitude:</b> ${" + settings.lngKeyName + ":7}",
defaultCenterPosition: settings?.defaultCenterPosition?.split(',') || [0, 0],
@ -120,7 +121,6 @@ export class MapWidgetController implements MapWidgetInterface {
//const providerInfo = providerSets[mapProvider];
let schema = initSchema();
addToSchema(schema,this.getProvidersSchema());
addGroupInfo(schema, "Map Provider Settings");
addToSchema(schema, commonMapSettingsSchema);
addGroupInfo(schema, "Common Map Settings");

4
ui-ngx/src/app/modules/home/components/widget/lib/maps/maps-utils.ts
View File

@ -31,12 +31,12 @@ export function createTooltip(target, settings, targetArgs?) {
this.closePopup();
});
}
return {
return popup/*{
markerArgs: targetArgs,
popup: popup,
locationSettings: settings,
dsIndex: settings.dsIndex
};
};*/
}

7
ui-ngx/src/app/modules/home/components/widget/lib/maps/markers.scss
View File

@ -22,7 +22,10 @@
background-position: center center;
}
.leaflet-div-icon {
background: none;
.leaflet-div-icon,
.tb-marker-label,
.tb-marker-label:before {
border: none;
background: none;
box-shadow: none;
}

52
ui-ngx/src/app/modules/home/components/widget/lib/maps/markers.ts
View File

@ -16,7 +16,7 @@
import L from 'leaflet';
import { MarkerSettings } from './map-models';
import { aspectCache, safeExecute, parseFunction } from '@app/core/utils';
import { aspectCache, safeExecute, parseTemplate } from '@app/core/utils';
import { createTooltip } from './maps-utils';
export class Marker {
@ -32,24 +32,21 @@ export class Marker {
constructor(private map: L.Map, location: L.LatLngExpression, public settings: MarkerSettings, data, dataSources, onClickListener?, markerArgs?, onDragendListener?) {
//this.map = map;
this.location = location;
this.setDataSources(data, dataSources)
this.setDataSources(data, dataSources);
this.leafletMarker = L.marker(location, {
draggable: settings.draggable
});
this.createMarkerIcon((iconInfo) => {
this.leafletMarker.setIcon(iconInfo.icon);
if (settings.showLabel) {
this.tooltipOffset = [0, -iconInfo.size[1] + 10];
// this.updateMarkerLabel(settings)
}
this.tooltipOffset = [0, -iconInfo.size[1] + 10];
this.updateMarkerLabel(settings);
this.leafletMarker.addTo(map);
});
this.leafletMarker.addTo(map)
}
);
if (settings.displayTooltip) {
if (settings.showTooltip) {
this.tooltip = createTooltip(this.leafletMarker, settings, markerArgs);
this.tooltip.setContent(parseTemplate(this.settings.tooltipPattern, data));
}
if (onClickListener) {
@ -67,35 +64,22 @@ export class Marker {
this.dataSources = dataSources;
}
updateMarkerTooltip(data) {
this.tooltip.setContent(parseTemplate(this.settings.tooltipPattern, data));
}
updateMarkerPosition(position: L.LatLngExpression) {
this.leafletMarker.setLatLng(position);
}
updateMarkerLabel(settings) {
function getText(template, data) {
let res = null;
try {
let variables = '';
for (let key in data) {
if (!key.includes('|'))
variables += `var ${key} = '${data[key]}';`;
}
res = safeExecute(parseFunction(variables + 'return' + '`' + template + '`'));
}
catch (ex) {
}
return res;
}
this.leafletMarker.unbindTooltip();
if (settings.showLabel) {
if (settings.useLabelFunction) {
settings.labelText = safeExecute(settings.labelFunction, [this.data, this.dataSources, this.data.dsIndex])
}
else settings.labelText = getText(settings.label, this.data);
else settings.labelText = parseTemplate(settings.label, this.data);
this.leafletMarker.bindTooltip(`<div style="color: ${settings.labelColor};"><b>${settings.labelText}</b></div>`,
{ className: 'tb-marker-label', permanent: true, direction: 'top', offset: this.tooltipOffset });
}
@ -110,10 +94,8 @@ export class Marker {
updateMarkerIcon(settings) {
this.createMarkerIcon((iconInfo) => {
this.leafletMarker.setIcon(iconInfo.icon);
if (settings.showLabel) {
this.tooltipOffset = [0, -iconInfo.size[1] + 10];
this.updateMarkerLabel(settings)
}
this.tooltipOffset = [0, -iconInfo.size[1] + 10];
this.updateMarkerLabel(settings);
});
}
@ -121,7 +103,7 @@ export class Marker {
if (this.settings.icon) {
onMarkerIconReady({
size: [30,30],
size: [30, 30],
icon: this.settings.icon,
});
return;

2
ui-ngx/src/app/modules/home/components/widget/lib/maps/polygon.ts
View File

@ -34,7 +34,7 @@ export class Polygon {
opacity: settings.polygonStrokeOpacity
}).addTo(this.map);
if (settings.displayTooltip) {
if (settings.showTooltip) {
this.tooltip = createTooltip(this.leafletPoly, location.dsIndex, settings);
}
if (onClickListener) {

3
ui-ngx/src/app/modules/home/components/widget/trip-animation/trip-animation.component.ts
View File

@ -48,6 +48,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit {
this.widgetConfig = this.ctx.widgetConfig;
const settings = {
normalizationStep: 1000,
showLabel: false,
buttonColor: tinycolor(this.widgetConfig.color).setAlpha(0.54).toRgbString(),
disabledButtonColor: tinycolor(this.widgetConfig.color).setAlpha(0.3).toRgbString(),
rotationAngle: 0
@ -73,7 +74,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit {
timeUpdated(time) {
const currentPosition = this.interpolatedData.map(dataSource => dataSource[time]);
this.mapWidget.map.updateMarkers(currentPosition);
this.mapWidget.map.updateMarkers(currentPosition);
}
calculateIntervals() {

1
ui-ngx/src/polyfills.ts
View File

@ -108,4 +108,3 @@ const tinycolor = tinycolor_;
(window as any).TbCanvasDigitalGauge = TbCanvasDigitalGauge;
(window as any).TbMapWidgetV2 = TbMapWidgetV2;
(window as any).TbTripAnimationWidget = TbTripAnimationWidget;
console.log("TbTripAnimationWidget", TbTripAnimationWidget)