Fix resize trip-animation widget and calculate dsIndex

application/src/main/data/json/system/widget_bundles/maps.json

@@ -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}"

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

@@ -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
         };

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

@@ -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) {