Fix resize trip-animation widget and calculate dsIndex
This commit is contained in:
Vladyslav_Prykhodko
parent
7fee32c2f3
commit
7985fb31f0
@ -125,9 +125,9 @@
|
||||
"sizeX": 10,
|
||||
"sizeY": 6.5,
|
||||
"resources": [],
|
||||
"templateHtml": "<trip-animation #tripanimation [ctx]=\"ctx\" ></trip-animation>",
|
||||
"templateHtml": "<trip-animation #tripanimation [ctx]=\"ctx\"></trip-animation>",
|
||||
"templateCss": ".legend {\n font-size: 13px;\n line-height: 10px;\n}\n\n.legend table { \n border-spacing: 0px;\n border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n cursor: crosshair; \n}\n\n",
|
||||
"controllerScript": " self.onInit = function() {\n var $scope = self.ctx.$scope;\n $scope.self = self;\n }\n \n \n self.actionSources = function () {\n return {\n 'tooltipAction': {\n name: 'widget-action.tooltip-tag-action',\n multiple: false\n }\n }\n };\n \n self.getSettingsSchema = function() {\n return TbTripAnimationWidget.getSettingsSchema();\n}\n",
|
||||
"controllerScript": "self.onInit = function() {\n var $scope = self.ctx.$scope;\n $scope.self = self;\n}\n\nself.actionSources = function() {\n return {\n 'tooltipAction': {\n name: 'widget-action.tooltip-tag-action',\n multiple: false\n }\n }\n};\n\nself.getSettingsSchema = function() {\n return TbTripAnimationWidget.getSettingsSchema();\n}",
|
||||
"settingsSchema": "",
|
||||
"dataKeySettingsSchema": "{}",
|
||||
"defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"entityAliasId\":null,\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"latitude\",\"color\":\"#2196f3\",\"settings\":{\"showLines\":true,\"fillLines\":true,\"showPoints\":false},\"_hash\":0.8587686344902596,\"funcBody\":\"var gpsData = [\\n37.771210000, -122.510960000,\\n 37.771990000, -122.497070000,\\n 37.772730000, -122.480740000,\\n 37.773360000, -122.466870000,\\n 37.774270000, -122.458520000,\\n 37.771980000, -122.454110000,\\n 37.768250000, -122.453380000,\\n 37.765920000, -122.456810000,\\n 37.765930000, -122.467680000,\\n 37.765500000, -122.477180000,\\n 37.765300000, -122.481660000,\\n 37.764780000, -122.493350000,\\n 37.764120000, -122.508360000,\\n 37.766410000, -122.510260000,\\n 37.770010000, -122.510830000,\\n 37.770980000, -122.510930000\\n];\\n let value = gpsData.indexOf(prevValue); \\nreturn gpsData[(value == -1 ? 0 : (value + 2) % gpsData.length)];\",\"units\":null,\"decimals\":null,\"usePostProcessing\":null,\"postFuncBody\":null},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"longitude\",\"color\":\"#ffc107\",\"settings\":{\"showLines\":true,\"fillLines\":false,\"showPoints\":false},\"_hash\":0.12775350966079668,\"funcBody\":\"var gpsData = [\\n37.771210000, -122.510960000,\\n 37.771990000, -122.497070000,\\n 37.772730000, -122.480740000,\\n 37.773360000, -122.466870000,\\n 37.774270000, -122.458520000,\\n 37.771980000, -122.454110000,\\n 37.768250000, -122.453380000,\\n 37.765920000, -122.456810000,\\n 37.765930000, -122.467680000,\\n 37.765500000, -122.477180000,\\n 37.765300000, -122.481660000,\\n 37.764780000, -122.493350000,\\n 37.764120000, -122.508360000,\\n 37.766410000, -122.510260000,\\n 37.770010000, -122.510830000,\\n 37.770980000, -122.510930000\\n];\\n let value = gpsData.indexOf(prevValue); \\nreturn gpsData[(value == -1 ? 1 : (value + 2) % gpsData.length)];\",\"units\":null,\"decimals\":null,\"usePostProcessing\":null,\"postFuncBody\":null}]}],\"timewindow\":{\"history\":{\"interval\":1000,\"timewindowMs\":60000},\"aggregation\":{\"type\":\"NONE\",\"limit\":500}},\"showTitle\":true,\"backgroundColor\":\"#fff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"mapProvider\":\"OpenStreetMap.Mapnik\",\"latKeyName\":\"latitude\",\"lngKeyName\":\"longitude\",\"showLabel\":true,\"label\":\"${entityName}\",\"showTooltip\":true,\"tooltipColor\":\"#fff\",\"tooltipFontColor\":\"#000\",\"tooltipOpacity\":1,\"tooltipPattern\":\"<b>${entityName}</b><br/><br/><b>Latitude:</b> ${latitude:7}<br/><b>Longitude:</b> ${longitude:7}<br/><b>End Time:</b> ${maxTime}<br/><b>Start Time:</b> ${minTime}\",\"strokeWeight\":2,\"strokeOpacity\":1,\"pointSize\":10,\"markerImageSize\":34,\"rotationAngle\":180,\"provider\":\"openstreet-map\",\"normalizationStep\":1000,\"polKeyName\":\"coordinates\",\"decoratorSymbol\":\"arrowHead\",\"decoratorSymbolSize\":10,\"decoratorCustomColor\":\"#000\",\"decoratorOffset\":\"20px\",\"endDecoratorOffset\":\"20px\",\"decoratorRepeat\":\"20px\",\"polygonTooltipPattern\":\"<b>${entityName}</b><br/><br/><b>TimeStamp:</b> ${ts:7}\",\"polygonOpacity\":0.5,\"polygonStrokeOpacity\":1,\"polygonStrokeWeight\":1,\"pointTooltipOnRightPanel\":true,\"autocloseTooltip\":true},\"title\":\"Trip Animation\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"mobileHeight\":null,\"widgetStyle\":{},\"useDashboardTimewindow\":false,\"showLegend\":false,\"actions\":{},\"legendConfig\":{\"position\":\"bottom\",\"showMin\":false,\"showMax\":false,\"showAvg\":false,\"showTotal\":false},\"displayTimewindow\":true}"
|
||||
|
||||
@ -254,7 +254,7 @@ export function parseArray(input: any[]): any[] {
|
||||
const obj = {
|
||||
entityName: entityArray[0]?.datasource?.entityName,
|
||||
$datasource: entityArray[0]?.datasource,
|
||||
dsIndex,
|
||||
dsIndex: i,
|
||||
time: el[0],
|
||||
deviceType: null
|
||||
};
|
||||
|
||||
@ -17,7 +17,16 @@
|
||||
import _ from 'lodash';
|
||||
import tinycolor from 'tinycolor2';
|
||||
|
||||
import { AfterViewInit, ChangeDetectorRef, Component, Input, OnInit, SecurityContext, ViewChild } from '@angular/core';
|
||||
import {
|
||||
AfterViewInit,
|
||||
ChangeDetectorRef,
|
||||
Component,
|
||||
Input,
|
||||
OnDestroy,
|
||||
OnInit,
|
||||
SecurityContext,
|
||||
ViewChild
|
||||
} from '@angular/core';
|
||||
import { MapWidgetController, TbMapWidgetV2 } from '../lib/maps/map-widget2';
|
||||
import { FormattedData, MapProviders, TripAnimationSettings } from '../lib/maps/map-models';
|
||||
import { addCondition, addGroupInfo, addToSchema, initSchema } from '@app/core/schema-utils';
|
||||
@ -36,6 +45,7 @@ import {
|
||||
import { JsonSettingsSchema, WidgetConfig } from '@shared/models/widget.models';
|
||||
import moment from 'moment';
|
||||
import { isUndefined } from '@core/utils';
|
||||
import { ResizeObserver } from '@juggle/resize-observer';
|
||||
|
||||
|
||||
@Component({
|
||||
@ -44,7 +54,9 @@ import { isUndefined } from '@core/utils';
|
||||
templateUrl: './trip-animation.component.html',
|
||||
styleUrls: ['./trip-animation.component.scss']
|
||||
})
|
||||
export class TripAnimationComponent implements OnInit, AfterViewInit {
|
||||
export class TripAnimationComponent implements OnInit, AfterViewInit, OnDestroy {
|
||||
|
||||
private mapResize$: ResizeObserver;
|
||||
|
||||
constructor(private cd: ChangeDetectorRef, private sanitizer: DomSanitizer) { }
|
||||
|
||||
@ -113,6 +125,16 @@ export class TripAnimationComponent implements OnInit, AfterViewInit {
|
||||
ngAfterViewInit() {
|
||||
const ctxCopy: WidgetContext = _.cloneDeep(this.ctx);
|
||||
this.mapWidget = new MapWidgetController(MapProviders.openstreet, false, ctxCopy, this.mapContainer.nativeElement);
|
||||
this.mapResize$ = new ResizeObserver(() => {
|
||||
this.mapWidget.resize();
|
||||
});
|
||||
this.mapResize$.observe(this.mapContainer.nativeElement);
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
if (this.mapResize$) {
|
||||
this.mapResize$.disconnect();
|
||||
}
|
||||
}
|
||||
|
||||
timeUpdated(time: number) {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user