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

use one multi-select drop down for plot type

Browse Source 
All plot types we currently have can be combined
in one image. So there is no need to compute
combinable types.
This commit is contained in:
Andreas Huber
2019-11-24 10:53:30 +01:00
parent 06b379494f
commit 20b710547f
2 changed files with 6 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -17,23 +17,13 @@
<mat-form-field> <mat-form-field>
<mat-label>Type:</mat-label> <mat-label>Type:</mat-label>
<mat-select [formControl]="selectedPlotType"> <mat-select multiple [(value)]="selectedPlotType">
<mat-option *ngFor="let plotType of plotTypes" [value]="plotType"> <mat-option *ngFor="let plotType of plotTypes" [value]="plotType">
<img src="assets/img/{{plotType.icon}}.svg" class="icon-select" /> {{plotType.name}} <img src="assets/img/{{plotType.icon}}.svg" class="icon-select" /> {{plotType.name}}
</mat-option> </mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<mat-form-field>
<mat-label>Combine With Type:</mat-label>
<mat-select [formControl]="selectedCombinePlotType">
<mat-option>-</mat-option>
<mat-option *ngFor="let plotType of combinePlotTypes" [value]="plotType">
<img src="assets/img/{{plotType.icon}}.svg" class="icon-select" /> {{plotType.name}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field> <mat-form-field>
<mat-label>Group By:</mat-label> <mat-label>Group By:</mat-label>
<mat-select multiple [(value)]="groupBy"> <mat-select multiple [(value)]="groupBy">

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

@@ -23,12 +23,9 @@ export class VisualizationPageComponent implements OnInit {
availablePlotTypes = {}; availablePlotTypes = {};
selectedPlotType = new FormControl(''); selectedPlotType = [];
plotTypes: Array<any>; plotTypes: Array<any>;
selectedCombinePlotType = new FormControl('');
combinePlotTypes: Array<any>;
tagFields: Array<TagField> = new Array<TagField>(); tagFields: Array<TagField> = new Array<TagField>();
groupBy = new Array<TagField>(); groupBy = new Array<TagField>();
@@ -66,12 +63,10 @@ export class VisualizationPageComponent implements OnInit {
ngOnInit() { ngOnInit() {
const that = this; const that = this;
this.plotTypes = this.plotService.getPlotTypes(); this.plotTypes = this.plotService.getPlotTypes();
this.selectedPlotType.setValue(this.plotTypes[0]); this.selectedPlotType.push(this.plotTypes[0]);
this.plotTypes.forEach(pt => this.availablePlotTypes[pt.name] = pt); this.plotTypes.forEach(pt => this.availablePlotTypes[pt.name] = pt);
this.combinePlotTypes = this.getCombinablePlotTypes(this.selectedPlotType.value);
that.plotService.getFilterDefaults().subscribe(function(filterDefaults) { that.plotService.getFilterDefaults().subscribe(function(filterDefaults) {
filterDefaults.fields.forEach(function(name) { filterDefaults.fields.forEach(function(name) {
@@ -85,16 +80,6 @@ export class VisualizationPageComponent implements OnInit {
that.splitBy = that.tagFields.find(val => filterDefaults.splitBy == val.name); that.splitBy = that.tagFields.find(val => filterDefaults.splitBy == val.name);
}); });
this.yAxisScale = "LOG10"; this.yAxisScale = "LOG10";
this.selectedPlotType.valueChanges.subscribe(function(selectedMainPlotType){
that.combinePlotTypes = that.getCombinablePlotTypes(selectedMainPlotType);
if (!that.combinePlotTypes.includes(that.selectedCombinePlotType.value)){
that.selectedCombinePlotType.setValue('');
}
},
error => {
that.showError(error.error.message);
});
} }
getCombinablePlotTypes(selectedMainPlotType) : Array<any>{ getCombinablePlotTypes(selectedMainPlotType) : Array<any>{
@@ -137,10 +122,7 @@ export class VisualizationPageComponent implements OnInit {
createPlotRequest(): PlotRequest { createPlotRequest(): PlotRequest {
const aggregates = []; const aggregates = [];
aggregates.push(this.selectedPlotType.value.id); this.selectedPlotType.forEach(a => aggregates.push(a.id));
if (this.selectedCombinePlotType.value){
aggregates.push(this.selectedCombinePlotType.value.id);
}
const request = new PlotRequest(); const request = new PlotRequest();
request.query = this.query.query; request.query = this.query.query;