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

Merge pull request #2792 from vvlladd28/improvement/map/anchor-point

Browse Source 
Improvment anchor function and fix show point [trip-animation]
This commit is contained in:
Igor Kulikov 2020-05-19 10:33:02 +03:00 committed by GitHub
commit 6f065804a5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 60 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -345,8 +345,8 @@ export default abstract class LeafletMap {
updatePolylines(polyData: FormattedData[][], data?: FormattedData) {
polyData.forEach((dataSource) => {
data = data || dataSource[0];
if (dataSource.length) {
data = data || dataSource[0];
if (this.polylines.get(data.$datasource.entityName)) {
this.updatePolyline(data, dataSource, this.options);
}

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

@ -860,15 +860,15 @@ export const pointSchema =
type: 'number',
default: 10
},
// usePointAsAnchor: {
// title: 'Use point as anchor',
// type: 'boolean',
// default: false
// },
// pointAsAnchorFunction: {
// title: 'Point as anchor function: f(data, dsData, dsIndex)',
// type: 'string'
// },
usePointAsAnchor: {
title: 'Use point as anchor',
type: 'boolean',
default: false
},
pointAsAnchorFunction: {
title: 'Point as anchor function: f(data, dsData, dsIndex)',
type: 'string'
},
pointTooltipOnRightPanel: {
title: 'Independant point tooltip',
type: 'boolean',
@ -884,11 +884,11 @@ export const pointSchema =
type: 'color'
},
'pointSize',
// 'usePointAsAnchor',
// {
// key: 'pointAsAnchorFunction',
// type: 'javascript'
// },
'usePointAsAnchor',
{
key: 'pointAsAnchorFunction',
type: 'javascript'
},
'pointTooltipOnRightPanel',
]
};

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

@ -37,5 +37,7 @@
[minTime]="minTime"
[maxTime]="maxTime"
[step]="normalizationStep"
[anchors]="anchors"
[useAnchors]="useAnchors"
(timeUpdated)="timeUpdated($event)"></tb-history-selector>
</div>

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

@ -29,6 +29,7 @@ import {
getRatio,
interpolateOnLineSegment,
parseArray,
parseFunction,
parseWithTranslation,
safeExecute
} from '../lib/maps/maps-utils';
@ -65,7 +66,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit {
minTimeFormat: string;
maxTime: number;
maxTimeFormat: string;
anchors = [];
anchors: number[] = [];
useAnchors: boolean;
static getSettingsSchema(): JsonSettingsSchema {
@ -94,6 +95,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit {
}
this.settings = { ...settings, ...this.ctx.settings };
this.useAnchors = this.settings.showPoints && this.settings.usePointAsAnchor;
this.settings.pointAsAnchorFunction = parseFunction(this.settings.pointAsAnchorFunction, ['data', 'dsData', 'dsIndex']);
this.settings.fitMapBounds = true;
this.normalizationStep = this.settings.normalizationStep;
const subscription = this.ctx.subscriptions[Object.keys(this.ctx.subscriptions)[0]];
@ -141,11 +143,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit {
this.mapWidget.map.updatePolygons(this.interpolatedTimeData);
}
if (this.settings.showPoints) {
this.mapWidget.map.updatePoints(this.interpolatedTimeData, this.calcTooltip);
// this.anchors = this.interpolatedTimeData
// .filter(data =>
// this.settings.usePointAsAnchor ||
// safeExecute(this.settings.pointAsAnchorFunction, [this.interpolatedTimeData, data, data.dsIndex])).map(data => data.time);
this.mapWidget.map.updatePoints(_.values(_.union(this.interpolatedTimeData)[0]), this.calcTooltip);
}
this.mapWidget.map.updateMarkers(currentPosition);
}
@ -162,7 +160,12 @@ export class TripAnimationComponent implements OnInit, AfterViewInit {
this.maxTimeFormat = this.maxTime !== -Infinity ? moment(this.maxTime).format('YYYY-MM-DD HH:mm:ss') : '';
this.interpolatedTimeData[index] = this.interpolateArray(dataSource);
});
if (this.useAnchors) {
const anchorDate = Object.entries(_.union(this.interpolatedTimeData)[0]);
this.anchors = anchorDate
.filter((data: [string, FormattedData]) => safeExecute(this.settings.pointAsAnchorFunction, [data[1], anchorDate, data[1].dsIndex]))
.map(data => parseInt(data[0], 10));
}
}
calcTooltip = (point?: FormattedData, setTooltip = true) => {
@ -200,20 +203,17 @@ export class TripAnimationComponent implements OnInit, AfterViewInit {
const result = {};
const latKeyName = this.settings.latKeyName;
const lngKeyName = this.settings.lngKeyName;
for (let i = 0; i < originData.length; i++) {
const currentTime = originData[i].time;
for (const data of originData) {
const currentTime = data.time;
const normalizeTime = this.minTime + Math.ceil((currentTime - this.minTime) / this.normalizationStep) * this.normalizationStep;
if (i !== originData.length - 1) {
result[normalizeTime] = {
...originData[i],
rotationAngle: this.settings.rotationAngle + findAngle(originData[i], originData[i + 1], latKeyName, lngKeyName)
};
} else {
result[normalizeTime] = {
...originData[i],
rotationAngle: this.settings.rotationAngle + findAngle(originData[i - 1], originData[i], latKeyName, lngKeyName)
...data,
rotationAngle: this.settings.rotationAngle
};
}
const timeStamp = Object.keys(result);
for(let i = 0; i < timeStamp.length - 1; i++){
result[timeStamp[i]].rotationAngle += findAngle(result[timeStamp[i]], result[timeStamp[i + 1]], latKeyName, lngKeyName)
}
return result;
}

22
ui-ngx/src/app/shared/components/time/history-selector/history-selector.component.ts
View File

@ -30,6 +30,8 @@ export class HistorySelectorComponent implements OnInit, OnChanges {
@Input() minTime: number;
@Input() maxTime: number;
@Input() step = 1000;
@Input() anchors = [];
@Input() useAnchors = false;
@Output() timeUpdated: EventEmitter<number> = new EventEmitter();
@ -95,19 +97,37 @@ export class HistorySelectorComponent implements OnInit, OnChanges {
}
moveNext() {
if (this.index <= this.maxTimeIndex) {
if (this.index < this.maxTimeIndex) {
if (this.useAnchors) {
const anchorIndex = this.findIndex(this.currentTime, this.anchors) + 1;
this.index = Math.floor((this.anchors[anchorIndex] - this.minTime) / this.step);
} else {
this.index++;
}
}
this.pause();
}
movePrev() {
if (this.index > this.minTimeIndex) {
if (this.useAnchors) {
const anchorIndex = this.findIndex(this.currentTime, this.anchors) - 1;
this.index = Math.floor((this.anchors[anchorIndex] - this.minTime) / this.step);
} else {
this.index--;
}
}
this.pause();
}
findIndex(value: number, array: number[]): number {
let i = 0;
while (array[i] < value) {
i++;
}
return i;
}
moveStart() {
this.index = this.minTimeIndex;
this.pause();