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

disable plot types instead of hiding them

Browse Source
This commit is contained in:
Andreas Huber
2019-12-27 19:36:08 +01:00
parent 90244c6e4b
commit 1587046907
4 changed files with 10 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -17,6 +17,7 @@ export class PlotService {
this.plotTypes.push(new PlotType("CUM_DISTRIBUTION", "Cumulative Distribution", "cumulative-distribution-chart", true, DataType.Percent, 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("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("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("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("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("RIDGELINES", "Ridgelines", "ridgelines", false, DataType.Other, DataType.Other));

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

@@ -18,7 +18,7 @@
<mat-form-field> <mat-form-field>
<mat-label>Type:</mat-label> <mat-label>Type:</mat-label>
<mat-select multiple [(ngModel)]="selectedPlotType" (ngModelChange)="changePlotType($event)"> <mat-select multiple [(ngModel)]="selectedPlotType" (ngModelChange)="changePlotType($event)">
<mat-option *ngFor="let plotType of plotTypes" [value]="plotType"> <mat-option *ngFor="let plotType of plotTypes" [value]="plotType" [disabled]="!plotType.active">
<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>

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

@@ -20,9 +20,7 @@ export class VisualizationPageComponent implements OnInit {
readonly DATE_PATTERN = "YYYY-MM-DD HH:mm:ss"; // for moment-JS readonly DATE_PATTERN = "YYYY-MM-DD HH:mm:ss"; // for moment-JS
dateRange = new FormControl('2019-10-05 00:00:00 - 2019-10-11 23:59:59'); dateRange = new FormControl('2019-10-05 00:00:00 - 2019-10-11 23:59:59');
availablePlotTypes = [];
selectedPlotType = []; selectedPlotType = [];
plotTypes: Array<any>; plotTypes: Array<any>;
@@ -64,9 +62,7 @@ export class VisualizationPageComponent implements OnInit {
const that = this; const that = this;
this.plotTypes = this.plotService.getPlotTypes(); this.plotTypes = this.plotService.getPlotTypes();
this.selectedPlotType.push(this.plotTypes[0]); this.selectedPlotType.push(this.plotTypes[0]);
this.availablePlotTypes = [].concat(this.plotTypes);
that.plotService.getFilterDefaults().subscribe(function(filterDefaults) { that.plotService.getFilterDefaults().subscribe(function(filterDefaults) {
filterDefaults.fields.forEach(function(name) { filterDefaults.fields.forEach(function(name) {
@@ -83,8 +79,9 @@ export class VisualizationPageComponent implements OnInit {
} }
changePlotType(selectedPlotTypes: Array<PlotType>) { changePlotType(selectedPlotTypes: Array<PlotType>) {
const compatiblePlotTypes = this.availablePlotTypes.filter(pt => pt.compatible(selectedPlotTypes)); const compatiblePlotTypes = this.plotTypes.filter(pt => pt.compatible(selectedPlotTypes));
this.plotTypes = compatiblePlotTypes; this.plotTypes.forEach(pt => pt.active=false);
compatiblePlotTypes.forEach(pt => pt.active=true);
} }

3
pdb-js/src/styles.scss
View File

@@ -64,6 +64,9 @@ button[disabled] .icon-inline {
height: 1.5em; height: 1.5em;
vertical-align: text-bottom; vertical-align: text-bottom;
} }
.mat-option-disabled .icon-select {
opacity: 0.25;
}
a.external-link:after { a.external-link:after {
background: transparent url('/assets/img/external-link.svg') no-repeat center bottom; background: transparent url('/assets/img/external-link.svg') no-repeat center bottom;