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

2
pdb-js/src/app/app.module.ts
View File

@@ -12,6 +12,7 @@ import { VisualizationPageComponent } from './visualization-page/visualization-p
import {MatSelectModule} from '@angular/material/select'; import {MatSelectModule} from '@angular/material/select';
import {MatFormFieldModule, MatInputModule} from '@angular/material'; import {MatFormFieldModule, MatInputModule} from '@angular/material';
import { YAxisRangeComponent } from './y-axis-range/y-axis-range.component';
@NgModule({ @NgModule({
declarations: [ declarations: [
@@ -20,6 +21,7 @@ import {MatFormFieldModule, MatInputModule} from '@angular/material';
HelpPageComponent, HelpPageComponent,
UploadPageComponent, UploadPageComponent,
VisualizationPageComponent, VisualizationPageComponent,
YAxisRangeComponent,
], ],
imports: [ imports: [
BrowserModule, BrowserModule,

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

@@ -3,47 +3,67 @@
</style> </style>
<div id="visualization"> <div id="visualization">
<div id="query-box">
<input matInput placeholder="Query" value="{{query}}" />
</div>
<div id="filters"> <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-form-field>
<mat-label>Type:</mat-label> <mat-label>Type:</mat-label>
<mat-select [(value)]="selectedPlotType"> <mat-select [(value)]="selectedPlotType">
<mat-option *ngFor="let plotType of plotTypes" [value]="plotType.name"> <mat-option *ngFor="let plotType of plotTypes" [value]="plotType.name">
<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>
</mat-form-field> </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-form-field>
<textarea matInput placeholder="Query"></textarea> <mat-label>Combine with:</mat-label>
</mat-form-field> <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-form-field>
<mat-label>Group By:</mat-label> <mat-label>Group By:</mat-label>
<mat-select multiple> <mat-select multiple>
<mat-option *ngFor="let tagField of tagFields" [value]="tagField">{{tagField.name}}</mat-option> <mat-option *ngFor="let tagField of tagFields" [value]="tagField">{{tagField.name}}</mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<mat-form-field> <mat-form-field>
<mat-label>Split By:</mat-label> <mat-label>Split By:</mat-label>
<mat-select> <mat-select>
<mat-option *ngFor="let tagField of tagFields" [value]="tagField">{{tagField.name}}</mat-option> <mat-option>-</mat-option>
</mat-select> <mat-option *ngFor="let tagField of tagFields" [value]="tagField">{{tagField.name}}</mat-option>
</mat-form-field> </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>
<div id="results"></div> <div id="results"></div>

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

@@ -12,6 +12,7 @@
height: 100%; height: 100%;
margin: 0; margin: 0;
grid: grid:
"query-box query-box" auto
"filters results" 1fr "filters results" 1fr
/ minmax(200px, 1fr) 3fr; / minmax(200px, 1fr) 3fr;
} }
@@ -23,12 +24,19 @@
height: 100%; height: 100%;
margin: 0; margin: 0;
grid: grid:
"query-box" auto
"filters" auto "filters" auto
"results" 1fr "results" 1fr
/ 1fr; / 1fr;
} }
} }
#query-box {
grid-area: query-box;
padding: 2px;
border-bottom: 1px solid black;
}
#filters { #filters {
grid-area: filters; grid-area: filters;
background-color: #eee; 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>; combinePlotTypes: Array<any>;
tagFields: Array<any>; tagFields: Array<any>;
yAxis: string;
yAxisUnit: string;
minYValue: number;
maxYValue: number;
query: string;
constructor(private plotService: PlotService) { constructor(private plotService: PlotService) {
} }
ngOnInit() { ngOnInit() {
this.query = "pod=*";
this.plotTypes = this.plotService.getPlotTypes(); this.plotTypes = this.plotService.getPlotTypes();
this.selectedPlotType = this.plotTypes[0].name; this.selectedPlotType = this.plotTypes[0].name;
this.combinePlotTypes = this.plotTypes; this.combinePlotTypes = this.plotTypes;
this.tagFields = this.plotService.getTagFields(); this.tagFields = this.plotService.getTagFields();
this.yAxis = "log";
this.yAxisUnit = "MINUTES";
this.minYValue = 0;
this.maxYValue = 120;
} }
} }

16
pdb-js/src/app/y-axis-range/y-axis-range.component.html Normal file
View File

@@ -0,0 +1,16 @@
<mat-form-field>
<input matInput type="number" placeholder="Min Y-Value" min="0" value="{{minYValue}}">
</mat-form-field>
<mat-form-field>
<input matInput type="number" placeholder="Max Y-Value" min="0" value="{{maxYValue}}">
</mat-form-field>
<mat-form-field>
<mat-select [(value)]="yAxisUnit">
<mat-option value="AUTOMATIC">automatic</mat-option>
<mat-option value="MILLISECONDS">milli seconds</mat-option>
<mat-option value="SECONDS">seconds</mat-option>
<mat-option value="MINUTES">minutes</mat-option>
<mat-option value="HOURS">hours</mat-option>
<mat-option value="DAYS">days</mat-option>
</mat-select>
</mat-form-field>

0
pdb-js/src/app/y-axis-range/y-axis-range.component.scss Normal file
View File

25
pdb-js/src/app/y-axis-range/y-axis-range.component.spec.ts Normal file
View File

@@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { YAxisRangeComponent } from './y-axis-range.component';
describe('YAxisRangeComponent', () => {
let component: YAxisRangeComponent;
let fixture: ComponentFixture<YAxisRangeComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ YAxisRangeComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(YAxisRangeComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

19
pdb-js/src/app/y-axis-range/y-axis-range.component.ts Normal file
View File

@@ -0,0 +1,19 @@
import { Component, Input } from '@angular/core';
@Component({
selector: 'pdb-y-axis-range',
templateUrl: './y-axis-range.component.html',
styleUrls: ['./y-axis-range.component.scss']
})
export class YAxisRangeComponent {
@Input() yAxisUnit: string;
@Input() minYValue: number;
@Input() maxYValue: number;
constructor() {
this.yAxisUnit = "AUTOMATIC";
this.minYValue = 1;
this.maxYValue = 123;
}
}

1
pdb-js/src/assets/img/four-squares-line.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3016 2973" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd"><path d="M1826 1615h1017c48 0 91 19 122 51 31 31 51 75 51 122v1012c0 48-19 91-51 122-31 31-75 51-122 51H1826c-48 0-91-19-122-51-31-31-51-75-51-122V1788c0-48 19-91 51-122 31-31 75-51 122-51zM173 0h1017c48 0 91 19 122 51 31 31 51 75 51 122v1012c0 48-19 91-51 122-31 31-75 51-122 51H173c-47 0-91-19-122-51-31-31-51-75-51-122V173c0-48 19-91 51-122 2-2 5-4 7-6C89 17 129 1 173 1zm1008 182H181v995h1000V182zM1826 0h1017c48 0 91 19 122 51 31 31 51 75 51 122v1012c0 48-19 91-51 122-31 31-75 51-122 51H1826c-48 0-91-19-122-51-31-31-51-75-51-122V173c0-48 19-91 51-122 31-31 75-51 122-51zm1008 182H1834v995h1000V182zM173 1615h1017c48 0 91 19 122 51 31 31 51 75 51 122v1012c0 48-19 91-51 122-31 31-75 51-122 51H173c-47 0-91-19-122-51-31-31-51-75-51-122V1788c0-48 19-91 51-122 2-2 5-4 7-6 31-28 71-44 115-44zm1008 182H181v995h1000v-995zm1653 0H1834v995h1000v-995z" fill-rule="nonzero"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

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

@@ -29,6 +29,12 @@ body {
margin: 0; margin: 0;
} }
.icon-inline {
width: 1em;
height: 1em;
vertical-align: text-bottom;
}
.icon-small { .icon-small {
max-width: 1.5em; max-width: 1.5em;
max-height: 1.5em; max-height: 1.5em;