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

add percentile information if available

Browse Source
This commit is contained in:
Andreas Huber
2021-04-02 18:29:18 +02:00
parent f56744eb6b
commit a1b4c7006d
15 changed files with 322 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
pdb-js/src/app/plot-details/plot-details.component.html
View File

@@ -1,28 +1,59 @@
<mat-radio-group [(ngModel)]="valueFormat" aria-label="Value format">
<mat-radio-button value="time">Time</mat-radio-button>
<mat-radio-button value="numbers">Numbers</mat-radio-button>
</mat-radio-group>
<table class="gallery-item-details">
<tr>
<th>Name</th>
<th>Type</th>
<th>Values</th>
<th>Avg</th>
<td *ngFor="let label of percentilesToPlot.keys()">{{label}}</td>
<td>Max</td>
</tr>
<tr *ngFor="let stat of stats.dataSeriesStats">
<td>{{ stat.name }}</td>
<td><div class="{{ pointTypeClass(stat.dashTypeAndColor) }}" title="{{ stat.name }}"></div></td>
<td>{{ stat.values }}</td>
<td>{{ utils.formatMs(stat.average) }}</td>
<td>{{ utils.format(stat.average, valueFormat) }}</td>
<td *ngFor="let key of percentilesToPlot.keys()">{{utils.format(stat.percentiles[percentilesToPlot.get(key)], valueFormat)}}</td>
<td>{{ utils.format(stat.maxValue, valueFormat)}}</td>
</tr>
</table>
<table class="gallery-item-details-matrix">
<tr>
<th></th>
<th *ngFor="let statsCol of stats.dataSeriesStats">
<div class="{{ pointTypeClass(statsCol.dashTypeAndColor) }}" title="{{ statsCol.name }}"></div>
</th>
</tr>
<tr *ngFor="let statsRow of stats.dataSeriesStats">
<td><div class="{{ pointTypeClass(statsRow.dashTypeAndColor) }}" title="{{ statsRow.name }}"></div></td>
<td *ngFor="let statsCol of stats.dataSeriesStats">
{{ utils.toPercent(statsRow.average / statsCol.average) }}
</td>
</tr>
</table>
<div *ngIf="stats.dataSeriesStats.length > 1">
<h2>Compare Averages</h2>
<table class="gallery-item-details-matrix">
<tr>
<th></th>
<th *ngFor="let statsCol of stats.dataSeriesStats">
<div class="{{ pointTypeClass(statsCol.dashTypeAndColor) }}" title="{{ statsCol.name }}"></div>
</th>
</tr>
<tr *ngFor="let statsRow of stats.dataSeriesStats">
<td><div class="{{ pointTypeClass(statsRow.dashTypeAndColor) }}" title="{{ statsRow.name }}"></div></td>
<td *ngFor="let statsCol of stats.dataSeriesStats">
{{ utils.toPercent(statsRow.average / statsCol.average) }}
</td>
</tr>
</table>
<h2>Compare Percentiles</h2>
<div *ngFor="let p of percentilesToPlot.keys()">
<h3>{{p}} percentile</h3>
<table class="gallery-item-details-matrix">
<tr>
<th></th>
<th *ngFor="let statsCol of stats.dataSeriesStats">
<div class="{{ pointTypeClass(statsCol.dashTypeAndColor) }}" title="{{ statsCol.name }}"></div>
</th>
</tr>
<tr *ngFor="let statsRow of stats.dataSeriesStats">
<td><div class="{{ pointTypeClass(statsRow.dashTypeAndColor) }}" title="{{ statsRow.name }}"></div></td>
<td *ngFor="let statsCol of stats.dataSeriesStats">
{{ utils.toPercent(statsRow.percentiles[percentilesToPlot.get(p)] / statsCol.percentiles[percentilesToPlot.get(p)]) }}
</td>
</tr>
</table>
</div>
</div>

7
pdb-js/src/app/plot-details/plot-details.component.scss
View File

@@ -27,4 +27,9 @@
.plot-details-plotType_e6e600 {background-position-y: -32px;}
.plot-details-plotType_e51e10 {background-position-y: -40px;}
.plot-details-plotType_57a1c2 {background-position-y: -48px;}
.plot-details-plotType_bd36c2 {background-position-y: -56px;}
.plot-details-plotType_bd36c2 {background-position-y: -56px;}
.gallery-item-details td {
white-space: pre;
}

28
pdb-js/src/app/plot-details/plot-details.component.ts
View File

@@ -12,10 +12,38 @@ export class PlotDetailsComponent {
@Input()
stats: PlotResponseStats;
hasPercentiles = false;
valueFormat = "time";
percentilesToPlot : Map<string,string> = new Map();
constructor(public utils: UtilService){
}
ngOnInit() {
this.hasPercentiles = false;
this.percentilesToPlot.clear();
for (let i = 0; i < this.stats.dataSeriesStats.length; i++)
{
const stat = this.stats.dataSeriesStats[i];
if (stat.percentiles.hasOwnProperty("50.000"))
{
this.hasPercentiles = true;
this.percentilesToPlot.set('median','50.000');
this.percentilesToPlot.set('75th','75.000');
this.percentilesToPlot.set('95th','95.000');
this.percentilesToPlot.set('99th','99.000');
break;
}
}
}
percentile(value: number): string {
return this.utils.format(value, this.valueFormat);
}
pointTypeClass(typeAndColor: DashTypeAndColor): string {
return "plot-details-plotType"
+" plot-details-plotType_"+typeAndColor.pointType