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

update plotType drop down on selection

Browse Source 
The drop down for plot types should only contain plot types that can
be combined. The reason is, that we can only draw images with two
x/y-axis. Therefore a combination of types that would need three or more
axis is not supported.
This commit is contained in:
Andreas Huber
2019-12-27 18:45:37 +01:00
parent aede78a285
commit 4f5fe15ac7
4 changed files with 29 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
pdb-js/src/app/plot.service.ts
View File

@@ -14,13 +14,13 @@ export class PlotService {
constructor(private http: HttpClient) {
this.plotTypes = new Array<PlotType>();
this.plotTypes.push(new PlotType("SCATTER","Scatter","scatter-chart2",true,DataType.Time,DataType.Duration));
this.plotTypes.push(new PlotType("HEATMAP", "Heatmap", "heatmap", false, DataType.Other, DataType.Other));
this.plotTypes.push(new PlotType("CONTOUR", "Contour", "contour-chart", false, DataType.Time, DataType.Duration));
this.plotTypes.push(new PlotType("CUM_DISTRIBUTION", "Cumulative Distribution", "cumulative-distribution-chart", true, DataType.Percent, DataType.Duration));
this.plotTypes.push(new PlotType("HISTOGRAM", "Histogram", "histogram", true, DataType.HistogramBin, DataType.HistogramCount));
this.plotTypes.push(new PlotType("PARALLEL", "Parallel Requests", "parallel-requests-chart", true, DataType.Time, DataType.Count));
this.plotTypes.push(new PlotType("HEATMAP", "Heatmap", "heatmap", false, DataType.Other, DataType.Other));
this.plotTypes.push(new PlotType("CONTOUR", "Contour", "contour-chart", false, DataType.Time, DataType.Duration));
this.plotTypes.push(new PlotType("RIDGELINES", "Ridgelines", "ridgelines", false, DataType.Other, DataType.Other));
this.plotTypes.push(new PlotType("QQ", "Quantile-Quantile", "quantile-quantile", false, DataType.Other, DataType.Other));
this.plotTypes.push(new PlotType("PARALLEL", "Parallel Requests", "parallel-requests-chart", true, DataType.Time, DataType.Count));
this.plotTypes.push(new PlotType("VIOLIN", "Violin", "violin-chart", false, DataType.Group, DataType.Duration));
this.plotTypes.push(new PlotType("STRIP", "Strip", "strip-chart", false, DataType.Group, DataType.Duration));
this.plotTypes.push(new PlotType("PIE", "Pie", "pie-chart", false, DataType.Other, DataType.Other));
@@ -92,23 +92,20 @@ export class PlotType {
this.yAxis = yAxis;
}
compatible(other: PlotType) : boolean {
compatible(others: Array<PlotType>) : boolean {
var result = true;
var other : PlotType;
const xEqual = this.xAxis === other.xAxis;
const yEqual = this.yAxis === other.yAxis;
const anyIsOther = this.xAxis === DataType.Other
|| this.yAxis === DataType.Other
|| other.xAxis === DataType.Other
|| other.yAxis === DataType.Other;
var xAxisTypes = new Set([this.xAxis]);
var yAxisTypes = new Set([this.yAxis]);
var result = xEqual || yEqual;
for(var i = 0; i < others.length; i++){
other = others[i];
xAxisTypes.add(other.xAxis);
yAxisTypes.add(other.yAxis);
}
// if either dimension is Other, then this plot is not compatible with any other plot
result = result && !anyIsOther;
// is not the same
result = result && this.name != other.name;
return result;
return xAxisTypes.size <= 2 && yAxisTypes.size <= 2;
}
}

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

@@ -17,7 +17,7 @@
<mat-form-field>
<mat-label>Type:</mat-label>
<mat-select multiple [(value)]="selectedPlotType">
<mat-select multiple [(ngModel)]="selectedPlotType" (ngModelChange)="changePlotType($event)">
<mat-option *ngFor="let plotType of plotTypes" [value]="plotType">
<img src="assets/img/{{plotType.icon}}.svg" class="icon-select" /> {{plotType.name}}
</mat-option>

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

@@ -21,7 +21,7 @@ export class VisualizationPageComponent implements OnInit {
dateRange = new FormControl('2019-10-05 00:00:00 - 2019-10-11 23:59:59');
availablePlotTypes = {};
availablePlotTypes = [];
selectedPlotType = [];
plotTypes: Array<any>;
@@ -65,7 +65,7 @@ export class VisualizationPageComponent implements OnInit {
this.plotTypes = this.plotService.getPlotTypes();
this.selectedPlotType.push(this.plotTypes[0]);
this.plotTypes.forEach(pt => this.availablePlotTypes[pt.name] = pt);
this.availablePlotTypes = [].concat(this.plotTypes);
that.plotService.getFilterDefaults().subscribe(function(filterDefaults) {
@@ -82,14 +82,12 @@ export class VisualizationPageComponent implements OnInit {
this.yAxisScale = "LOG10";
}
getCombinablePlotTypes(selectedMainPlotType) : Array<any>{
//const mainPlotType = this.availablePlotTypes[selectedMainPlotType];
const mainPlotType = selectedMainPlotType;
const compatiblePlotTypes = this.plotTypes.filter(pt => pt.compatible(mainPlotType));
return compatiblePlotTypes;
changePlotType(selectedPlotTypes: Array<PlotType>) {
const compatiblePlotTypes = this.availablePlotTypes.filter(pt => pt.compatible(selectedPlotTypes));
this.plotTypes = compatiblePlotTypes;
}
dateRangeAsString() : string {
return (<HTMLInputElement>document.getElementById("search-date-range")).value;
}

5
pdb-plotting/src/main/java/org/lucares/pdb/plot/api/AggregateHandlerCollection.java
View File

@@ -45,7 +45,10 @@ public class AggregateHandlerCollection {
// TODO merge axis definitions and use the greater values for: range,
// ticsIncrement
} else {
Preconditions.checkSmaller(result.size(), 2, "at most two different axis are supported");
Preconditions.checkSmaller(result.size(), 2,
"At most two different axis are supported. "
+ "The combination of plot types needs more than two " + axis
+ "-axis. Remove one or more plot types.");
final GnuplotAxis mirrorAxis = axis.mirrorAxis();
handler.updateAxis(mirrorAxis);
result.add(type);