add limit by

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

@@ -1,7 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 import { PlotService, PlotType } from '../plot.service';
 import { Observable } from 'rxjs/Observable';
-import { FormControl } from '@angular/forms';
+import { FormControl, Validators } from '@angular/forms';
+
 
 @Component({
   selector: 'pdb-visualization-page',
@@ -22,12 +23,22 @@ export class VisualizationPageComponent implements OnInit {
   
   tagFields: Array<any>;
   
+  groupBy: Array<any> = [];
+  limitBy: string = "NO_LIMIT";
+  limit = 10;
+  
   yAxis: string;
   yAxisUnit: string;
   minYValue: number;
   maxYValue: number;
   
   query: string;
+  
+    
+  enableGallery = true;
+  splitBy = new FormControl(null, [
+    Validators.required
+  ]);
 
   constructor(private plotService: PlotService) {
   }
@@ -47,24 +58,38 @@ export class VisualizationPageComponent implements OnInit {
     this.yAxisUnit = "MINUTES";
     this.minYValue = 0;
     this.maxYValue = 120;
-    
-    
+        
     this.selectedPlotType.valueChanges.subscribe(function(selectedMainPlotType){
       that.combinePlotTypes = that.getCombinablePlotTypes(selectedMainPlotType);
     });
   }
   
   getCombinablePlotTypes(selectedMainPlotType) : Array<any>{
-      // get compatible plot types
       const mainPlotType = this.availablePlotTypes[selectedMainPlotType];
       
       const compatiblePlotTypes = this.plotTypes.filter(pt => pt.compatible(mainPlotType));
-      console.log(compatiblePlotTypes);
       return compatiblePlotTypes;
   }
-  
+    
   plot(){
-    console.log("plot clicked");
+    
+    var request = {};
+    request['query'] = this.query;
+    request['height'] = document.getElementById("results").offsetHeight;
+    request['width'] = document.getElementById("results").offsetWidth;
+    request['groupBy'] = this.groupBy.map(o => o.name);
+    request['limitBy'] = this.limitBy;
+    request['limit'] = this.limit;
+    request['dateRange'] = this.dateRange.value;
+    request['axisScale'] = this.yAxis;
+    request['aggregate'] = this.selectedCombinePlotType.value;
+    request['keyOutside'] = false;
+    request['generateThumbnail'] = this.enableGallery;
+    request['yRangeMin'] = this.minYValue;
+    request['yRangeMax'] = this.maxYValue;
+    request['yRangeUnit'] = this.yAxisUnit;
+    
+    console.log("plot clicked: "+  JSON.stringify(request));
   }
 
 }