update angular to 13.1.0

pdb-js/src/app/visualization-page/visualization-page.component.ts

@@ -1,6 +1,5 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { PlotService, PlotType, PlotRequest, PlotResponse, TagField, FilterDefaults, DataType, YAxisDefinition, AxesTypes  } from '../plot.service';
-import { Observable } from 'rxjs/Observable';
 import { FormControl, Validators } from '@angular/forms';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { LimitByComponent } from '../limit-by/limit-by.component';
@@ -21,34 +20,34 @@ export class VisualizationPageComponent implements OnInit {
   
   dateRange = new FormControl('2019-10-05 00:00:00 - 2019-10-11 23:59:59');
     
-  selectedPlotType = [];
-  plotTypes: Array<any>;
+  selectedPlotType = new Array<PlotType>();
+  plotTypes: Array<any> = [];
     
   tagFields: Array<TagField> = new Array<TagField>();
   
   groupBy = new Array<TagField>();
   
   @ViewChild('limitbycomponent')
-  private limitbycomponent : LimitByComponent;
+  private limitbycomponent! : LimitByComponent;
   
   
   @ViewChild('y1AxisDefinitionComponent',  { read: YAxisDefinitionComponent })
-  private y1AxisDefinitionComponent : YAxisDefinitionComponent;
+  private y1AxisDefinitionComponent! : YAxisDefinitionComponent;
   
   @ViewChild('y2AxisDefinitionComponent',  { read: YAxisDefinitionComponent })
-  private y2AxisDefinitionComponent : YAxisDefinitionComponent;
+  private y2AxisDefinitionComponent! : YAxisDefinitionComponent;
   
   @ViewChild('query')
-  query: QueryAutocompleteComponent;
+  query!: QueryAutocompleteComponent;
   
   @ViewChild('plotView')
-  plotView: PlotViewComponent;
+  plotView!: PlotViewComponent;
   
   @ViewChild('galleryView')
-  galleryView: GalleryViewComponent;
+  galleryView!: GalleryViewComponent;
     
   enableGallery = false;
-  splitBy = null;
+  splitBy : TagField | undefined = undefined;
   y2AxisAvailable = false;
   
   intervalUnit = 'NO_INTERVAL';
@@ -58,7 +57,7 @@ export class VisualizationPageComponent implements OnInit {
   constructor(private plotService: PlotService, private snackBar: MatSnackBar) {
   }
 
-  showError(message) {
+  showError(message:string) {
     this.snackBar.open(message, "", {
       duration: 5000,
       verticalPosition: 'top'
@@ -70,12 +69,12 @@ export class VisualizationPageComponent implements OnInit {
     this.plotTypes = this.plotService.getPlotTypes();
     this.selectedPlotType.push(this.plotTypes[0]);
             
-    that.plotService.getFilterDefaults().subscribe(function(filterDefaults) {
+    that.plotService.getFilterDefaults().subscribe(function(filterDefaults: FilterDefaults) {
     
-      filterDefaults.fields.forEach(function(name) {
+      filterDefaults.fields.forEach(function(name:string) {
         that.tagFields.push(new TagField(name));
       },
-      error => {
+      (error: any) => {
         that.showError(error.error.message);
       });
     
@@ -103,12 +102,16 @@ export class VisualizationPageComponent implements OnInit {
   }
   
   gallery(){
-    const that = this;
-    this.plotView.imageUrl = '';
-    that.plotView.stats = null;
-    that.galleryView.show=true;
-    const request = this.createPlotRequest();
-    this.galleryView.renderGallery(request, this.splitBy.name);
+    if (this.splitBy != null){
+      const that = this;
+      this.plotView.imageUrl = '';
+      that.plotView.stats = null;
+      that.galleryView.show=true;
+      const request = this.createPlotRequest();
+      this.galleryView.renderGallery(request, this.splitBy.name);
+    } else {
+      console.error("variable splitBy was null when rendering gallery");
+    }
   }
   
   getAxes() : AxesTypes {
@@ -141,13 +144,13 @@ export class VisualizationPageComponent implements OnInit {
     
     const request = this.createPlotRequest();
     
-    this.plotService.sendPlotRequest(request).subscribe(function(plotResponse){
+    this.plotService.sendPlotRequest(request).subscribe(function(plotResponse: PlotResponse){
       console.log("response: " + JSON.stringify(plotResponse));
       that.plotView.imageUrl = "http://"+window.location.hostname+':'+window.location.port+'/'+plotResponse.imageUrl;
       that.plotView.stats = plotResponse.stats;
       document.dispatchEvent(new Event("invadersPause", {}));
     },
-    error => {
+    (error:any) => {
       that.plotView.imageUrl = '';
       that.plotView.stats = null;
       that.showError(error.error.message);
@@ -156,28 +159,31 @@ export class VisualizationPageComponent implements OnInit {
   }
   
   createPlotRequest(): PlotRequest {
-    const aggregates = [];
+    const aggregates = new Array<string>();
     this.selectedPlotType.forEach(a => aggregates.push(a.id));
     
     const y1 = this.y1AxisDefinitionComponent.getAxisDefinition();
     const y2 = this.y2AxisDefinitionComponent ? this.y2AxisDefinitionComponent.getAxisDefinition() : undefined;
+    const results = document.getElementById("results");
     
-    const request = new PlotRequest();
-    request.query = this.query.query;
-    request.height = document.getElementById("results").offsetHeight-1;
-    request.width = document.getElementById("results").offsetWidth-1;
-    request.groupBy = this.groupBy.map(o => o.name);
-    request.limitBy = this.limitbycomponent.limitBy;
-    request.limit = this.limitbycomponent.limit;
-    request.y1 = y1;
-    request.y2 = y2;
-    request.dateRange = this.dateRangeAsString(); 
-    request.aggregates = aggregates; 
-    request.keyOutside = false;
-    request.generateThumbnail = this.enableGallery;
-    request.intervalUnit = this.intervalUnit;
-    request.intervalValue = this.intervalValue;
-    request.renderBarChartTickLabels = this.renderBarChartTickLabels;
+    const request = new PlotRequest(
+      this.query.query,
+      results != null ? results.offsetHeight-1: 1024,
+      results != null ? results.offsetWidth-1 : 1024,
+      300, // thumbnailMaxWidth
+      200, // thumbnailMaxHeight
+      this.groupBy.map(o => o.name),
+      this.limitbycomponent.limitBy,
+      this.limitbycomponent.limit,
+      y1,
+      y2,
+      this.dateRangeAsString(), // dateRange 
+      aggregates, // aggregates 
+      false, // keyOutside
+      this.enableGallery, // generateThumbnail
+      this.intervalUnit,
+      this.intervalValue,
+      this.renderBarChartTickLabels);
     return request;
   }
   
@@ -222,16 +228,14 @@ export class VisualizationPageComponent implements OnInit {
   }
   
   parseDateRange(dateRangeAsString : string) : DateRange {
-    if (dateRangeAsString) {
-      const startDate = moment(dateRangeAsString.slice(0, 19));
-      const endDate = moment(dateRangeAsString.slice(22, 41));
-      
-      return {
-        startDate: startDate,
-        endDate: endDate,
-        duration: moment.duration(endDate.diff(startDate))
-      };
-    }
+    const startDate = moment(dateRangeAsString.slice(0, 19));
+    const endDate = moment(dateRangeAsString.slice(22, 41));
+    
+    return {
+      startDate: startDate,
+      endDate: endDate,
+      duration: moment.duration(endDate.diff(startDate))
+    };
   }
   
   setDateRange(startDate: any, endDate: any) {
@@ -260,9 +264,11 @@ export class DateRange {
   duration: any;
 }
 
+/*
 export class AxesUsed {
   x1: DataType;
   y1: DataType;
   x2: DataType;
   y2: DataType;
 }
+*/