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

add box plots

Browse Source
This commit is contained in:
Andreas Huber
2022-11-19 20:02:10 +01:00
parent bea6096441
commit 0d1b9744a9
14 changed files with 290 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -17,7 +17,8 @@ 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("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("BAR", "Bar", "bar-chart", true, DataType.Group, DataType.Count));
this.plotTypes.push(new PlotType("BAR", "Bar (number of requests)", "bar-chart", true, DataType.Group, DataType.Count));
this.plotTypes.push(new PlotType("BOX", "Box", "box-plot", 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));

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

@@ -31,7 +31,7 @@
</mat-form-field>
<pdb-limit-by #limitbycomponent></pdb-limit-by>
<div [hidden]="!selectedPlotTypesContains('BAR')">
<div [hidden]="!selectedPlotTypesContains(['BAR', 'BOX'])">
<mat-form-field >
<mat-label>Intervals (only bar chart):</mat-label>
<mat-select [(value)]="intervalUnit">
@@ -46,7 +46,7 @@
</mat-select>
</mat-form-field>
</div>
<div [hidden]="!selectedPlotTypesContains('BAR')">
<div [hidden]="!selectedPlotTypesContains(['BAR', 'BOX'])">
<mat-checkbox [(ngModel)]="renderBarChartTickLabels">Show Tic Labels (bar chart)</mat-checkbox>
</div>
<pdb-y-axis-definition #y1AxisDefinitionComponent yIndex="1"></pdb-y-axis-definition>

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

@@ -92,8 +92,8 @@ export class VisualizationPageComponent implements OnInit {
this.y2AxisAvailable = axesTypes.y.length == 2;
}
selectedPlotTypesContains(plotTypeId: string){
return this.selectedPlotType.filter(pt => pt.id == plotTypeId).length > 0;
selectedPlotTypesContains(plotTypeIds: Array<string>){
return this.selectedPlotType.filter(pt => plotTypeIds.includes(pt.id)).length > 0;
}

25
pdb-js/src/assets/img/box-plot.svg Normal file
View File

@@ -0,0 +1,25 @@
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 32 32">
<g transform="translate(0.5,0.5)">
<rect x="5" y="8" width="8" height="15" style="fill: none; stroke: black;stroke-width:2;" />
<line x1="6" y1="3" x2="12" y2="3" style="stroke:black;stroke-width:2;"/>
<line x1="9" y1="8" x2="9" y2="3" style="stroke:black;stroke-width:2;"/>
<line x1="5" y1="15" x2="13" y2="15" style="stroke:black;stroke-width:2;"/>
<line x1="9" y1="23" x2="9" y2="28" style="stroke:black;stroke-width:2;"/>
<line x1="6" y1="28" x2="12" y2="28" style="stroke:black;stroke-width:2;"/>
<rect x="18" y="6" width="8" height="13" style="fill: none; stroke: black; stroke-width:2;" />
<line x1="19" y1="2" x2="25" y2="2" style="stroke:black;stroke-width:2;"/>
<line x1="22" y1="6" x2="22" y2="2" style="stroke:black;stroke-width:2;"/>
<line x1="18" y1="13" x2="26" y2="13" style="stroke:black;stroke-width:2;"/>
<line x1="22" y1="19" x2="22" y2="26" style="stroke:black;stroke-width:2;"/>
<line x1="19" y1="26" x2="25" y2="26" style="stroke:black;stroke-width:2;"/>
<path d="M1,0
L1,30
L32,30"
style="stroke:black; stroke-width: 3px; fill:none;"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB