update angular to 13.1.0

pdb-js/src/app/gallery-view/gallery-filter-view.component.html

@@ -10,7 +10,7 @@
   </mat-select>
 </mat-form-field>
 
-<pdb-image-toggle *ngIf="filterBy" images="{{compareImages}}" (valueChanged)="comparatorChanged($event)"></pdb-image-toggle>
+<pdb-image-toggle *ngIf="filterBy" images="{{compareImages}}" (valueChanged)="comparatorChanged()"></pdb-image-toggle>
 
 <mat-form-field  *ngIf="filterBy" class="pdb-form-number-long">
   <input matInput type="number" placeholder="" min="0" [(ngModel)]="value">

pdb-js/src/app/gallery-view/gallery-view.component.html

@@ -15,10 +15,10 @@
     </mat-form-field>
     
     
-    <pdb-image-toggle images="{{ascDescImages}}" (valueChanged)="sortOrderChanged($event)"></pdb-image-toggle>
+    <pdb-image-toggle images="{{ascDescImages}}" (valueChanged)="sortOrderChanged()"></pdb-image-toggle>
     
     
-    <pdb-gallery-filter-view (valueChanged)="filterChanged($event)"></pdb-gallery-filter-view>
+    <pdb-gallery-filter-view (valueChanged)="filterChanged()"></pdb-gallery-filter-view>
     
     <mat-checkbox [(ngModel)]="showDetails">Show Details</mat-checkbox>
   </div>

pdb-js/src/app/gallery-view/gallery-view.component.ts

@@ -46,8 +46,7 @@ export class GalleryFilterView {
   @Output()
   valueChanged : EventEmitter<GalleryFilterData> = new EventEmitter<GalleryFilterData>();
   
-  comparatorChanged(newComparator: string){
-    this._comparator = newComparator;
+  comparatorChanged(){
     this.valueChanged.emit(undefined);
   }
   
@@ -115,7 +114,7 @@ export class GalleryViewComponent implements OnInit {
   showDetails = false;
   
   @ViewChild(GalleryFilterView)
-  filter : GalleryFilterView;
+  filter! : GalleryFilterView;
   
   ascDescImages = JSON.stringify([
     {
@@ -133,7 +132,7 @@ export class GalleryViewComponent implements OnInit {
   constructor(private plotService: PlotService, private snackBar: MatSnackBar) {
   }
 
-  showError(message) {
+  showError(message: string) {
     this.snackBar.open(message, "", {
       duration: 5000,
       verticalPosition: 'top'
@@ -193,8 +192,8 @@ export class GalleryViewComponent implements OnInit {
   
   filterPredicate(galleryItem: GalleryItem){
     const predicate = this.filter.comparator == 'LESS_EQUAL'
-      ? function(a, b) { return a <= b; }
-      : function(a, b) { return a >= b; };
+      ? function(a: number, b: number) { return a <= b; }
+      : function(a: number, b: number) { return a >= b; };
     const millis = this.timeUnitToMillis(this.filter.value, this.filter.unit);
     switch(this.filter.filterBy){
       case 'NONE':
@@ -214,7 +213,7 @@ export class GalleryViewComponent implements OnInit {
     throw "unhandled option: " + this.filter.filterBy;
   }
   
-  timeUnitToMillis(value, unit)
+  timeUnitToMillis(value: number, unit: string)
   {
     switch(unit){
       case 'NO_UNIT':
@@ -260,7 +259,7 @@ export class GalleryViewComponent implements OnInit {
       return;
     }
     
-    const splitByValue = this.splitByValuesQueue.pop();
+    const splitByValue = <string>this.splitByValuesQueue.pop();
     
     let request = masterRequest.copy();
     request.query = "("+request.query+") and " + splitByField+"="+ splitByValue;
@@ -283,7 +282,7 @@ export class GalleryViewComponent implements OnInit {
       that.sortAndFilterGallery();
       that.renderGalleryRecursively(masterRequest, splitByField);
     },
-    error => {
+    (error:any) => {
       that.showError(error.error.message);
     });
   }
@@ -295,12 +294,11 @@ export class GalleryViewComponent implements OnInit {
 
   get sortBy(): string { return this._sortBy; }
  
-  sortOrderChanged(event){
-    this.sortOrder = event;
+  sortOrderChanged(){
     this.sortAndFilterGallery();
   }
   
-  filterChanged(event){
+  filterChanged(){
     this.sortAndFilterGallery();
   }
 
@@ -313,7 +311,7 @@ export class GalleryViewComponent implements OnInit {
 })
 export class GalleryItemView {
   @Input()
-  data: GalleryItem;
+  data!: GalleryItem;
 
   @Input()
   showDetails: boolean = false;
@@ -338,7 +336,7 @@ export class GalleryItem {
   imageUrl: string;
   stats: PlotResponseStats;
   splitByValue : string;
-  show : boolean;
+  show : boolean = false;
   
   constructor(splitByValue: string, plotResponse: PlotResponse){
     this.thumbnailUrl = plotResponse.thumbnailUrl;

pdb-js/src/app/image-toggle/image-toggle.component.ts

@@ -17,7 +17,7 @@ export class ImageToggleComponent implements OnInit {
   
   text = undefined;
   
-  _states : Array<any>;
+  _states : Array<any> = [];
 
   constructor() { }
 
@@ -34,7 +34,7 @@ export class ImageToggleComponent implements OnInit {
     return this._states[this.index].title;
   }
 
-  toggle(event){
+  toggle(event: any){
     this.index = (this.index+1) % this._states.length;
     this.text = this._states[this.index].text;
     this.valueChanged.emit(this._states[this.index].value);

pdb-js/src/app/plot-details/plot-details.component.html

@@ -17,7 +17,7 @@
     <td><div class="{{ pointTypeClass(stat.dashTypeAndColor) }}" title="{{ stat.name }}"></div></td>
     <td>{{ stat.values }}</td>
     <td>{{ utils.format(stat.average, valueFormat) }}</td>
-    <td *ngFor="let key of percentilesToPlot.keys()">{{utils.format(stat.percentiles[percentilesToPlot.get(key)], valueFormat)}}</td>
+    <td *ngFor="let key of percentilesToPlot.keys()">{{percentileStat(key, stat)}}</td> 
     <td>{{ utils.format(stat.maxValue, valueFormat)}}</td>
   </tr>
 </table>
@@ -51,7 +51,7 @@
       <tr *ngFor="let statsRow of stats.dataSeriesStats">
         <td><div class="{{ pointTypeClass(statsRow.dashTypeAndColor) }}" title="{{ statsRow.name }}"></div></td>
         <td *ngFor="let statsCol of stats.dataSeriesStats">
-          {{ utils.toPercent(statsRow.percentiles[percentilesToPlot.get(p)] / statsCol.percentiles[percentilesToPlot.get(p)])  }}
+          {{ toPercent(statsRow, statsCol, p) }}
         </td>
       </tr>
     </table>

pdb-js/src/app/plot-details/plot-details.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, Input, Output, ViewChild, EventEmitter, ɵpublishDefaultGlobalUtils } from '@angular/core';
-import { DashTypeAndColor, PlotResponseStats } from '../plot.service';
+import { DashTypeAndColor, PlotResponseStats, DataSeriesStats } from '../plot.service';
 import { UtilService } from '../utils.service';
 
 @Component({
@@ -10,7 +10,7 @@ import { UtilService } from '../utils.service';
 export class PlotDetailsComponent {
 
   @Input()
-  stats: PlotResponseStats;
+  stats!: PlotResponseStats;
 
   hasPercentiles = false;
   
@@ -25,17 +25,19 @@ export class PlotDetailsComponent {
   ngOnInit() {
     this.hasPercentiles = false;
     this.percentilesToPlot.clear();
-    for (let i = 0; i < this.stats.dataSeriesStats.length; i++)
-    {
-      const stat = this.stats.dataSeriesStats[i];
-      if (stat.percentiles.hasOwnProperty("50.000"))
+    if (this.stats) {
+      for (let i = 0; i < this.stats.dataSeriesStats.length; i++)
       {
-        this.hasPercentiles = true;
-        this.percentilesToPlot.set('median','50.000');
-        this.percentilesToPlot.set('75th','75.000');
-        this.percentilesToPlot.set('95th','95.000');
-        this.percentilesToPlot.set('99th','99.000');
-        break;
+        const stat = this.stats.dataSeriesStats[i];
+        if (stat.percentiles.hasOwnProperty("50.000"))
+        {
+          this.hasPercentiles = true;
+          this.percentilesToPlot.set('median','50.000');
+          this.percentilesToPlot.set('75th','75.000');
+          this.percentilesToPlot.set('95th','95.000');
+          this.percentilesToPlot.set('99th','99.000');
+          break;
+        }
       }
     }
   }
@@ -49,4 +51,27 @@ export class PlotDetailsComponent {
       +" plot-details-plotType_"+typeAndColor.pointType
       +" plot-details-plotType_"+typeAndColor.color.toLocaleLowerCase();
   } 
+  
+  toPercent(statsRow: DataSeriesStats, statsCol: DataSeriesStats, key: string){
+    const percentile = this.percentilesToPlot.get(key);
+    if (percentile) {
+      const rowValue = statsRow.percentiles.get(percentile);
+      const columnValue = statsCol.percentiles.get(percentile);
+      if (rowValue !== undefined && columnValue !== undefined) {
+        return this.utils.toPercent(rowValue / columnValue);
+      }
+    }
+    return "?%"
+  }
+
+  percentileStat(key: string, stat: DataSeriesStats): string{
+    const plotKey = this.percentilesToPlot.get(key);
+    if (plotKey !== undefined){
+      const value = stat.percentiles.get(plotKey);
+      if (value !== undefined){
+        return this.utils.format(value, this.valueFormat);
+      }
+    }
+    return "no value";
+  }
 }

pdb-js/src/app/plot-view/plot-view.component.html

@@ -29,7 +29,7 @@
        [style.width]="zoomInSliderStyleWidth"
     ></div>
   </div>
-  <div *ngIf="showStats" class="plot-view-overlay">
+  <div *ngIf="showStats && stats != null" class="plot-view-overlay">
     <pdb-plot-details [stats]="stats"></pdb-plot-details>
     <div class="top-right">
       <img 

pdb-js/src/app/plot-view/plot-view.component.ts

@@ -15,10 +15,10 @@ export class PlotViewComponent implements OnInit {
   readonly gnuplotBMargin = 76; // The bottom margin configured for gnuplot
 
 
-  imageUrl : string;
-  stats : PlotResponseStats;
+  imageUrl! : string;
+  stats: PlotResponseStats | null = null;
   
-  axes: AxesTypes;
+  axes!: AxesTypes;
   
   @Output()
   zoomRange : EventEmitter<SelectionRange> = new EventEmitter<SelectionRange>();
@@ -49,20 +49,20 @@ export class PlotViewComponent implements OnInit {
   hideZoomInSlider() {
     this.zoomInSliderStyleDisplay = "none";
   }
-  update_cursor(event){
+  update_cursor(event: MouseEvent){
     //$('#result-image').css('cursor', this.isInPlot(event) ? 'crosshair' : 'default');
     this.imageCursor = this.isInPlot(event) ? 'crosshair' : 'default';
   }
   
   imageWidth() {
-    return Math.floor(document.getElementById('result-image').offsetWidth);
+    return Math.floor(document.getElementById('result-image')!.offsetWidth);
   }
   
   imageHeight() {
-    return Math.floor(document.getElementById('result-image').offsetHeight);
+    return Math.floor(document.getElementById('result-image')!.offsetHeight);
   }
   
-  positionInImage(event) : any {
+  positionInImage(event: MouseEvent) : any {
     const rect = (<HTMLImageElement>document.getElementById('result-image')).getBoundingClientRect();
     const x= event.clientX - rect.left; 
     const y= event.clientY - rect.top; 
@@ -73,7 +73,7 @@ export class PlotViewComponent implements OnInit {
     return {x: x, y: y};
   }
   
-  isInPlot(event) : boolean{
+  isInPlot(event: MouseEvent) : boolean{
     const pos = this.positionInImage(event);
         
     return pos.x > this.gnuplotLMargin 
@@ -82,7 +82,7 @@ export class PlotViewComponent implements OnInit {
         && pos.y < this.imageHeight()- this.gnuplotBMargin;
   }
   
-  isInImage(event) : boolean{
+  isInImage(event: MouseEvent) : boolean{
     const pos = this.positionInImage(event);
         
     return pos.x > 0 
@@ -91,7 +91,7 @@ export class PlotViewComponent implements OnInit {
         && pos.y < this.imageHeight();
   }
   
-  dragStart(event) {
+  dragStart(event: MouseEvent) {
     //console.log("dragStart inPlot: " + this.isInPlot(event));
     
     event.preventDefault();
@@ -104,7 +104,7 @@ export class PlotViewComponent implements OnInit {
     }
   }
 
-  dragging(event) {
+  dragging(event: MouseEvent) {
     //console.log("dragging " + this.isInPlot(event));
     
     this.update_cursor(event);
@@ -128,7 +128,7 @@ export class PlotViewComponent implements OnInit {
     }
   }
   
-  dragStop(event) {
+  dragStop(event: MouseEvent) {
    if (this.in_drag_mode){
       this.in_drag_mode = false;
       this.hideZoomInSlider();
@@ -152,7 +152,7 @@ export class PlotViewComponent implements OnInit {
     }
   }
   
-  dragAbort(event) {
+  dragAbort(event: MouseEvent) {
     //console.log("drag_abort");
     if (this.in_drag_mode && !this.isInImage(event)) {
       this.in_drag_mode = false;
@@ -162,7 +162,7 @@ export class PlotViewComponent implements OnInit {
     }
   }
   
-  zoomByScroll(event) {
+  zoomByScroll(event: WheelEvent) {
     if (this.isInImage(event) && event.deltaY != 0 && this.axes.hasXAxis(DataType.Time)) {
       this.in_drag_mode = false;
       this.hideZoomInSlider();

pdb-js/src/app/plot.service.ts

@@ -1,6 +1,6 @@
 import { Injectable, OnInit } from '@angular/core';
 import { HttpClient, HttpParams } from '@angular/common/http';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 
 
@@ -80,7 +80,7 @@ export class PlotService {
     const q = "("+query+") and "+splitBy+"=";
     return this.autocomplete(q, q.length+1, ResultMode.FULL_VALUES).pipe(
       map(
-        autocompleteResult => autocompleteResult.proposals.map(suggestion => suggestion.value)
+        (autocompleteResult: AutocompleteResult) => autocompleteResult.proposals.map((suggestion:Suggestion) => suggestion.value)
       )
     );
   }
@@ -181,39 +181,44 @@ export class AxesTypes {
     const x2 = this.getXAxisDataType(2);
     const y2 = this.getYAxisDataType(2);
   
-    return "x1:"+DataType[x1]+ " y1:"+DataType[y1]+ " x2:"+DataType[x2]+ " y2:"+DataType[y2]; 
+    return (x1 ? "x1:"+DataType[x1] : "")
+      + (y1 ? " y1:"+DataType[y1] : "")
+      + (x2 ? " x2:"+DataType[x2] : "")
+      + (y2 ? " y2:"+DataType[y2] : ""); 
   }
 }
 
 export class Suggestion {
-  value: string;
-  newQuery: string;
-  newCaretPosition: number;
+  constructor(
+    public value: string,
+    public newQuery: string,
+    public newCaretPosition: number){}
 }
 
 
 export class AutocompleteResult{
-  proposals: Array<Suggestion>;
+  constructor(public proposals: Array<Suggestion>){}
 }
 
 export class PlotRequest {
-  query : string;
-  height : number;
-  width : number;
-  thumbnailMaxWidth : number = 300;
-  thumbnailMaxHeight : number = 200;
-  groupBy : Array<string>;
-  limitBy : string;
-  limit : number;
-  y1:YAxisDefinition;
-  y2:YAxisDefinition;
-  dateRange : string;
-  aggregates : Array<string>;
-  keyOutside : boolean = false;
-  generateThumbnail : boolean;
-  intervalUnit: string;
-  intervalValue: number;
-  renderBarChartTickLabels: boolean = false;
+  constructor(
+    public query : string,
+    public height : number,
+    public width : number,
+    public thumbnailMaxWidth : number = 300,
+    public thumbnailMaxHeight : number = 200,
+    public groupBy : Array<string>,
+    public limitBy : string,
+    public limit : number,
+    public y1:YAxisDefinition,
+    public y2:YAxisDefinition|undefined,
+    public dateRange : string,
+    public aggregates : Array<string>,
+    public keyOutside : boolean = false,
+    public generateThumbnail : boolean,
+    public intervalUnit: string,
+    public intervalValue: number,
+    public renderBarChartTickLabels: boolean = false){}
   
   copy(): PlotRequest {
     return JSON.parse(JSON.stringify(this));
@@ -221,46 +226,52 @@ export class PlotRequest {
 }
 
 export class YAxisDefinition {
-  axisScale : string;
-  rangeMin : number;
-  rangeMax : number;
-  rangeUnit  : string;
+  constructor(
+    public axisScale : string,
+    public rangeMin : number,
+    public rangeMax : number,
+    public rangeUnit  : string){}
 }
 
 export class PlotResponse {
-  imageUrl : string;
-  stats : PlotResponseStats;
-  thumbnailUrl : string;
+  constructor(
+    public imageUrl : string,
+    public stats : PlotResponseStats,
+    public thumbnailUrl : string){}
 }
 
 export class PlotResponseStats {
-  maxValue : number;
-  values : number;
-  average : number ;
-  plottedValues : number;
-  maxAvgRatio: number;
-  dataSeriesStats : Array<DataSeriesStats>;
+  constructor(
+    public maxValue : number,
+    public values : number,
+    public average : number,
+    public plottedValues : number,
+    public maxAvgRatio: number,
+    public dataSeriesStats : Array<DataSeriesStats>){}
 }
 
 export class DataSeriesStats {
-  name: string;
-  values : number;
-  maxValue : number;
-  average : number;
-  plottedValues : number;
-  dashTypeAndColor: DashTypeAndColor;
-  percentiles: Map<string, number>
+  constructor(
+    public name: string,
+    public values : number,
+    public maxValue : number,
+    public average : number ,
+    public plottedValues : number,
+    public dashTypeAndColor: DashTypeAndColor,
+    public percentiles: Map<string, number>){}
 }
 
 export class DashTypeAndColor {
-  color: string;
-  pointType: number;
+  constructor(
+    public color: string,
+    public pointType: number) {}
 }
 
 export class FilterDefaults {
-  groupBy: Array<string>;
-  fields: Array<string>; 
-  splitBy: string;
+  constructor(
+    public groupBy: Array<string>,
+    public fields: Array<string>, 
+    public splitBy: string){}
 }
 
 export enum ResultMode {

pdb-js/src/app/query-autocomplete/query-autocomplete.component.ts

@@ -16,12 +16,12 @@ export class QueryAutocompleteComponent implements OnInit {
 
   suggestions = new FormControl();
     
-  filteredSuggestions: Observable<Suggestion[]>;
+  filteredSuggestions!: Observable<Suggestion[]>;
   
-  query : string; 
+  query : string = ""; 
   
   @ViewChild(MatAutocompleteTrigger)
-  autocomplete: MatAutocompleteTrigger;
+  autocomplete!: MatAutocompleteTrigger;
   
   
   constructor(private plotService: PlotService) {}
@@ -72,12 +72,12 @@ export class QueryAutocompleteComponent implements OnInit {
           
           that.autocomplete.openPanel();
         }, 
-        error => console.log(error)
+        (error:any) => console.log(error)
       );
   }
   
-  displaySuggestion(suggestion?: Suggestion): string | undefined {
+  displaySuggestion(suggestion?: Suggestion): string {
     //console.log("suggestion: "+JSON.stringify(suggestion));
-    return suggestion ? suggestion.newQuery : undefined;
+    return suggestion ? suggestion.newQuery : '';
   }
 }

pdb-js/src/app/utils.service.ts

@@ -17,7 +17,7 @@ export class UtilService {
         }
     }
 
-    formatMs(valueInMs):string {
+    formatMs(valueInMs: number):string {
         const ms = Math.floor(valueInMs % 1000);
         const s = Math.floor((valueInMs / 1000) % 60);
         const m = Math.floor((valueInMs / (60*1000)) % 60);

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;
 }
+*/

pdb-js/src/app/y-axis-definition/y-axis-definition.component.ts

@@ -20,11 +20,6 @@ export class YAxisDefinitionComponent {
   }
   
   getAxisDefinition() {
-    const result = new YAxisDefinition();
-    result.axisScale = this.yAxisScale;
-    result.rangeMin = this.minYValue;
-    result.rangeMax = this.maxYValue;
-    result.rangeUnit = this.yAxisUnit;
-    return result;
+    return new YAxisDefinition(this.yAxisScale,this.minYValue,this.maxYValue,this.yAxisUnit);
   }
 }