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

add component for y-axis range

Browse Source
This commit is contained in:
Andreas Huber
2019-10-10 16:54:02 +02:00
parent 9cf9bf4673
commit ca8ee7d8f7
10 changed files with 146 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,47 +3,67 @@
</style>
<div id="visualization">
<div id="query-box">
<input matInput placeholder="Query" value="{{query}}" />
</div>
<div id="filters">
<button mat-button>
<img src="assets/img/scatter-chart2.svg" class="icon-inline" aria-hidden="true" title="create plot" />
Plot
</button>
<button mat-button>
<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>Type:</mat-label>
<mat-select [(value)]="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>Type:</mat-label>
<mat-select [(value)]="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>
<textarea matInput placeholder="Query"></textarea>
</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>
<mat-form-field>
<mat-label>Split By:</mat-label>
<mat-select>
<mat-option *ngFor="let tagField of tagFields" [value]="tagField">{{tagField.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>
<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>
<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>
<div id="results"></div>

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

@@ -12,6 +12,7 @@
height: 100%;
margin: 0;
grid:
"query-box query-box" auto
"filters results" 1fr
/ minmax(200px, 1fr) 3fr;
}
@@ -23,12 +24,19 @@
height: 100%;
margin: 0;
grid:
"query-box" auto
"filters" auto
"results" 1fr
/ 1fr;
}
}
#query-box {
grid-area: query-box;
padding: 2px;
border-bottom: 1px solid black;
}
#filters {
grid-area: filters;
background-color: #eee;

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

@@ -15,18 +15,29 @@ export class VisualizationPageComponent implements OnInit {
combinePlotTypes: Array<any>;
tagFields: Array<any>;
yAxis: string;
yAxisUnit: string;
minYValue: number;
maxYValue: number;
query: string;
constructor(private plotService: PlotService) {
}
ngOnInit() {
this.query = "pod=*";
this.plotTypes = this.plotService.getPlotTypes();
this.selectedPlotType = this.plotTypes[0].name;
this.combinePlotTypes = this.plotTypes;
this.tagFields = this.plotService.getTagFields();
this.yAxis = "log";
this.yAxisUnit = "MINUTES";
this.minYValue = 0;
this.maxYValue = 120;
}
}