put y axis definition into its own object

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

@@ -208,9 +208,9 @@ export class PlotRequest {
 
 export class YAxisDefinition {
   axisScale : string;
-  yRangeMin : number;
-  yRangeMax : number;
-  yRangeUnit  : string;
+  rangeMin : number;
+  rangeMax : number;
+  rangeUnit  : string;
 }
 
 export class PlotResponse {

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

@@ -34,7 +34,8 @@
       <pdb-limit-by #limitbycomponent></pdb-limit-by>
       
       
-     <pdb-y-axis-definition #yAxisDefinitionComponent></pdb-y-axis-definition>
+     <pdb-y-axis-definition #y1AxisDefinitionComponent yIndex="1"></pdb-y-axis-definition>
+     
      
      
      <mat-checkbox [(ngModel)]="enableGallery">Gallery</mat-checkbox>
@@ -77,7 +78,8 @@
       #plotView 
       (zoomRange)="zoomRange($event)" 
       (zoomWithDateAnchor)="zoomWithDateAnchor($event)"></pdb-plot-view>
-    <pdb-gallery-view>
+    <pdb-gallery-view
+      #galleryView>
     </pdb-gallery-view>
   </div>
   

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

@@ -28,19 +28,23 @@ export class VisualizationPageComponent implements OnInit {
   
   groupBy = new Array<TagField>();
   
-  @ViewChild(LimitByComponent, {static: false})
+  @ViewChild('limitbycomponent', {static: false})
   private limitbycomponent : LimitByComponent;
   
-  @ViewChild(YAxisDefinitionComponent, {static: false})
-  private yAxisDefinitionComponent : YAxisDefinitionComponent;
   
-  @ViewChild(QueryAutocompleteComponent, {static: false})
+  @ViewChild('y1AxisDefinitionComponent',  {static: false, read: YAxisDefinitionComponent})
+  private y1AxisDefinitionComponent : YAxisDefinitionComponent;
+  
+  @ViewChild('y2AxisDefinitionComponent',  {static: false, read: YAxisDefinitionComponent})
+  private y2AxisDefinitionComponent : YAxisDefinitionComponent;
+  
+  @ViewChild('query', {static: false})
   query: QueryAutocompleteComponent;
   
-  @ViewChild(PlotViewComponent, {static: false})
+  @ViewChild('plotView', {static: false})
   plotView: PlotViewComponent;
   
-  @ViewChild(GalleryViewComponent, {static: false})
+  @ViewChild('galleryView', {static: false})
   galleryView: GalleryViewComponent;
     
   enableGallery = false;
@@ -139,11 +143,8 @@ export class VisualizationPageComponent implements OnInit {
     const aggregates = [];
     this.selectedPlotType.forEach(a => aggregates.push(a.id));
     
-    const y1 = new YAxisDefinition();
-    y1.axisScale = this.yAxisDefinitionComponent.yAxisScale;
-    y1.yRangeMin = this.yAxisDefinitionComponent.minYValue;
-    y1.yRangeMax = this.yAxisDefinitionComponent.maxYValue;
-    y1.yRangeUnit = this.yAxisDefinitionComponent.yAxisUnit;
+    const y1 = this.y1AxisDefinitionComponent.getAxisDefinition();
+    const y2 = this.y2AxisDefinitionComponent.getAxisDefinition();
     
     const request = new PlotRequest();
     request.query = this.query.query;
@@ -153,6 +154,7 @@ export class VisualizationPageComponent implements OnInit {
     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;

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

@@ -1,7 +1,6 @@
 <div>
-  
     <mat-form-field>
-      <mat-label>Y-Axis:</mat-label>
+      <mat-label>Y{{yIndex}}-Axis:</mat-label>
       <mat-select [(value)]="yAxisScale">
         <mat-option value="LOG10">Logarithm</mat-option>
         <mat-option value="LINEAR">Linear</mat-option>
@@ -9,7 +8,7 @@
     </mat-form-field>
 
    <mat-form-field class="pdb-form-mid">
-    <mat-label>Y-Axis Range:</mat-label>
+    <mat-label>Y{{yIndex}}-Axis Range:</mat-label>
     <mat-select [(value)]="yAxisUnit">
       <mat-option value="AUTOMATIC">automatic</mat-option>
       <mat-option value="MILLISECONDS">millis</mat-option>

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

@@ -1,4 +1,5 @@
 import { Component,  Input } from '@angular/core';
+import { YAxisDefinition  } from '../plot.service';
 
 @Component({
   selector: 'pdb-y-axis-definition',
@@ -7,12 +8,23 @@ import { Component,  Input } from '@angular/core';
 })
 export class YAxisDefinitionComponent {
 
-
   yAxisScale: string = "LOG10";
   yAxisUnit: string = "SECONDS";
   minYValue: number = 0;
   maxYValue: number = 300;
+  
+  @Input()
+  yIndex: string = "";
 
   constructor() {
   }
+  
+  getAxisDefinition() {
+    const result = new YAxisDefinition();
+    result.axisScale = this.yAxisScale;
+    result.rangeMin = this.minYValue;
+    result.rangeMax = this.maxYValue;
+    result.rangeUnit = this.yAxisUnit;
+    return result;
+  }
 }