andi/perfdb
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Activity

add limit by

Browse Source
This commit is contained in:
Andreas Huber
2019-10-19 08:48:21 +02:00
parent a3099d4981
commit 24bf7c98e3
15 changed files with 286 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

150
pdb-js/src/app/visualization-page/visualization-page.component.html
View File

@@ -1,80 +1,92 @@
<style>
</style>
<div id="visualization">
<div id="query-box">
<!-- [query]="query"-->
<pdb-query-autocomplete ></pdb-query-autocomplete>
</div>
<div id="filters">
<mat-form-field class="mat-field-full-width">
<mat-label>Date Range:</mat-label>
<input matInput [formControl]="dateRange" name="dates" />
</mat-form-field>
<mat-form-field class="mat-field-full-width">
<mat-label>Type:</mat-label>
<mat-select [formControl]="selectedPlotType">
<mat-option *ngFor="let plotType of plotTypes" [value]="plotType.name">
<img src="assets/img/{{plotType.icon}}.svg" class="icon-select" /> {{plotType.name}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<mat-label>Combine with:</mat-label>
<mat-select [(value)]="selectedCombinePlotType">
<mat-option>-</mat-option>
<mat-option *ngFor="let plotType of combinePlotTypes" [value]="plotType.name">
<img src="assets/img/{{plotType.icon}}.svg" class="icon-select" /> {{plotType.name}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<mat-label>Group By:</mat-label>
<mat-select multiple>
<mat-option *ngFor="let tagField of tagFields" [value]="tagField">{{tagField.name}}</mat-option>
</mat-select>
</mat-form-field>
<div id="filterpanel">
<mat-form-field class="mat-field-full-width">
<mat-label>Date Range:</mat-label>
<input matInput [formControl]="dateRange" name="dates" />
</mat-form-field>
<mat-form-field>
<mat-label>Split By:</mat-label>
<mat-select>
<mat-option>-</mat-option>
<mat-option *ngFor="let tagField of tagFields" [value]="tagField">{{tagField.name}}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="mat-field-full-width">
<mat-label>Type:</mat-label>
<mat-select [formControl]="selectedPlotType">
<mat-option *ngFor="let plotType of plotTypes" [value]="plotType.name">
<img src="assets/img/{{plotType.icon}}.svg" class="icon-select" /> {{plotType.name}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<mat-label>Y-Axis:</mat-label>
<mat-select [(value)]="yAxis">
<mat-option value="log">Logarithm</mat-option>
<mat-option value="linear">Linear</mat-option>
</mat-select>
</mat-form-field>
<pdb-y-axis-range
[(yAxisUnit)]="yAxisUnit"
[(minYValue)]="minYValue"
[(maxYValue)]="maxYValue"
></pdb-y-axis-range>
<div>
<button mat-button (click)="plot()">
<img src="assets/img/scatter-chart2.svg" class="icon-inline" aria-hidden="true" title="create plot" />
Plot
</button>
<!--
<button mat-button (click)="gallery()">
<img src="assets/img/four-squares-line.svg" class="icon-inline" aria-hidden="true" title="Create Gallery (only active if 'Split' is set)" />
Gallery
</button>
-->
<mat-form-field>
<mat-label>Combine with:</mat-label>
<mat-select [(value)]="selectedCombinePlotType">
<mat-option>-</mat-option>
<mat-option *ngFor="let plotType of combinePlotTypes" [value]="plotType.name">
<img src="assets/img/{{plotType.icon}}.svg" class="icon-select" /> {{plotType.name}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<mat-label>Group By:</mat-label>
<mat-select multiple [(value)]="groupBy">
<mat-option *ngFor="let tagField of tagFields" [value]="tagField">{{tagField.name}}</mat-option>
</mat-select>
</mat-form-field>
<pdb-limit-by
[(limitBy)]="limitBy"
[limit]="limit"
></pdb-limit-by>
<mat-form-field>
<mat-label>Y-Axis:</mat-label>
<mat-select [(value)]="yAxis">
<mat-option value="log">Logarithm</mat-option>
<mat-option value="linear">Linear</mat-option>
</mat-select>
</mat-form-field>
<pdb-y-axis-range
[(yAxisUnit)]="yAxisUnit"
[(minYValue)]="minYValue"
[(maxYValue)]="maxYValue"
></pdb-y-axis-range>
<mat-checkbox [(ngModel)]="enableGallery">Gallery</mat-checkbox>
<mat-form-field *ngIf="enableGallery">
<mat-label>Split By:</mat-label>
<mat-select [(value)]="splitBy">
<mat-option *ngFor="let tagField of tagFields" [value]="tagField">{{tagField.name}}</mat-option>
</mat-select>
<mat-error *ngIf="splitBy == null || true">
Please select a value!
</mat-error>
</mat-form-field>
<div id="plot-button-bar">
<button
*ngIf="!enableGallery"
mat-button
matTooltip="Create Plot"
(click)="plot()">
<img src="assets/img/scatter-chart2.svg" class="icon-inline" aria-hidden="true" title="create plot" />
Plot
</button>
<button
*ngIf="enableGallery"
mat-button
matTooltip="Create Gallery"
(click)="plot()"
[disabled]="this.splitBy == null">
<img src="assets/img/four-squares-line.svg" class="icon-inline" aria-hidden="true" title="Create Gallery (only active if 'Split' is set)" />
Gallery
</button>
</div>
</div>
</div>
<div id="results"></div>

20
pdb-js/src/app/visualization-page/visualization-page.component.scss
View File

@@ -14,14 +14,13 @@
grid:
"query-box query-box" auto
"filters results" 1fr
/ 23em 3fr;
/ 25em 3fr;
}
}
@media screen and (max-width: 800px) {
@media screen and (max-width: 1000px) {
#visualization {
display: grid;
height: 100%;
margin: 0;
grid:
"query-box" auto
@@ -29,22 +28,31 @@
"results" 1fr
/ 1fr;
}
#results {
height: 600px;
}
}
#query-box {
grid-area: query-box;
padding: 2px;
border-bottom: 1px solid black;
margin: 1em;
}
#filters {
grid-area: filters;
background-color: #fafafa;
}
#filterpanel {
background-color: #f8f8f8;/*#fafafa;*/
padding: 1em;
margin: 0 1em 1em 1em;
border-radius: 5px;
}
#results {
grid-area: results;
}
#plot-button-bar {
text-align: right;
}

39
pdb-js/src/app/visualization-page/visualization-page.component.ts
View File

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