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

extract plot detail view into its own component

Browse Source
This commit is contained in:
Andreas Huber
2020-11-01 09:15:01 +01:00
parent 50c9e56f2e
commit 08328ec1e5
15 changed files with 201 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
pdb-js/src/app/plot-details/plot-details.component.html Normal file
View File

@@ -0,0 +1,28 @@
<table class="gallery-item-details">
<tr>
<th>Name</th>
<th>Type</th>
<th>Values</th>
<th>Avg</th>
</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(stats.average) }}</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>

30
pdb-js/src/app/plot-details/plot-details.component.scss Normal file
View File

@@ -0,0 +1,30 @@
.plot-details-plotType {
background-image: url(/assets/img/pointTypes.png);
width: 9px;
height: 7px;
transform: scale(1.5);
}
.plot-details-plotType_0 {background-position-x: 0px;}
.plot-details-plotType_1 {background-position-x: -10px;}
.plot-details-plotType_2 {background-position-x: -20px;}
.plot-details-plotType_3 {background-position-x: -30px;}
.plot-details-plotType_4 {background-position-x: -40px;}
.plot-details-plotType_5 {background-position-x: -50px;}
.plot-details-plotType_6 {background-position-x: -60px;}
.plot-details-plotType_7 {background-position-x: -70px;}
.plot-details-plotType_8 {background-position-x: -80px;}
.plot-details-plotType_9 {background-position-x: -90px;}
.plot-details-plotType_10 {background-position-x:-100px;}
.plot-details-plotType_11 {background-position-x:-110px;}
.plot-details-plotType_12 {background-position-x:-120px;}
.plot-details-plotType_0051c2 {background-position-y: 0px;}
.plot-details-plotType_bf8300 {background-position-y: -8px;}
.plot-details-plotType_9400d3 {background-position-y: -16px;}
.plot-details-plotType_00c254 {background-position-y: -24px;}
.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;}

24
pdb-js/src/app/plot-details/plot-details.component.ts Normal file
View File

@@ -0,0 +1,24 @@
import { Component, OnInit, Input, Output, ViewChild, EventEmitter, ɵpublishDefaultGlobalUtils } from '@angular/core';
import { DashTypeAndColor, PlotResponseStats } from '../plot.service';
import { UtilService } from '../utils.service';
@Component({
selector: 'pdb-plot-details',
templateUrl: './plot-details.component.html',
styleUrls: ['./plot-details.component.scss']
})
export class PlotDetailsComponent {
@Input()
stats: PlotResponseStats;
constructor(public utils: UtilService){
}
pointTypeClass(typeAndColor: DashTypeAndColor): string {
return "plot-details-plotType"
+" plot-details-plotType_"+typeAndColor.pointType
+" plot-details-plotType_"+typeAndColor.color.toLocaleLowerCase();
}
}