From ca8ee7d8f7f891d687f644f5620e060b68426e88 Mon Sep 17 00:00:00 2001 From: Andreas Huber Date: Thu, 10 Oct 2019 16:54:02 +0200 Subject: [PATCH] add component for y-axis range --- pdb-js/src/app/app.module.ts | 2 + .../visualization-page.component.html | 94 +++++++++++-------- .../visualization-page.component.scss | 8 ++ .../visualization-page.component.ts | 13 ++- .../y-axis-range/y-axis-range.component.html | 16 ++++ .../y-axis-range/y-axis-range.component.scss | 0 .../y-axis-range.component.spec.ts | 25 +++++ .../y-axis-range/y-axis-range.component.ts | 19 ++++ pdb-js/src/assets/img/four-squares-line.svg | 1 + pdb-js/src/styles.scss | 6 ++ 10 files changed, 146 insertions(+), 38 deletions(-) create mode 100644 pdb-js/src/app/y-axis-range/y-axis-range.component.html create mode 100644 pdb-js/src/app/y-axis-range/y-axis-range.component.scss create mode 100644 pdb-js/src/app/y-axis-range/y-axis-range.component.spec.ts create mode 100644 pdb-js/src/app/y-axis-range/y-axis-range.component.ts create mode 100644 pdb-js/src/assets/img/four-squares-line.svg diff --git a/pdb-js/src/app/app.module.ts b/pdb-js/src/app/app.module.ts index 07308df..79296c7 100644 --- a/pdb-js/src/app/app.module.ts +++ b/pdb-js/src/app/app.module.ts @@ -12,6 +12,7 @@ import { VisualizationPageComponent } from './visualization-page/visualization-p import {MatSelectModule} from '@angular/material/select'; import {MatFormFieldModule, MatInputModule} from '@angular/material'; +import { YAxisRangeComponent } from './y-axis-range/y-axis-range.component'; @NgModule({ declarations: [ @@ -20,6 +21,7 @@ import {MatFormFieldModule, MatInputModule} from '@angular/material'; HelpPageComponent, UploadPageComponent, VisualizationPageComponent, + YAxisRangeComponent, ], imports: [ BrowserModule, diff --git a/pdb-js/src/app/visualization-page/visualization-page.component.html b/pdb-js/src/app/visualization-page/visualization-page.component.html index 25aac92..b1a8179 100644 --- a/pdb-js/src/app/visualization-page/visualization-page.component.html +++ b/pdb-js/src/app/visualization-page/visualization-page.component.html @@ -3,47 +3,67 @@
+
+ +
+ + + - - Type: - - - {{plotType.name}} - - - - - - Combine with: - - - - - {{plotType.name}} - - - + + Type: + + + {{plotType.name}} + + + - - - + + Combine with: + + - + + {{plotType.name}} + + + - - Group By: - - {{tagField.name}} - - - - - Split By: - - {{tagField.name}} - - - - - + + Group By: + + {{tagField.name}} + + + + + Split By: + + - + {{tagField.name}} + + + + + Y-Axis: + + Logarithm + Linear + + + +
diff --git a/pdb-js/src/app/visualization-page/visualization-page.component.scss b/pdb-js/src/app/visualization-page/visualization-page.component.scss index fa6429b..d07161c 100644 --- a/pdb-js/src/app/visualization-page/visualization-page.component.scss +++ b/pdb-js/src/app/visualization-page/visualization-page.component.scss @@ -12,6 +12,7 @@ height: 100%; margin: 0; grid: + "query-box query-box" auto "filters results" 1fr / minmax(200px, 1fr) 3fr; } @@ -23,12 +24,19 @@ height: 100%; margin: 0; grid: + "query-box" auto "filters" auto "results" 1fr / 1fr; } } +#query-box { + grid-area: query-box; + padding: 2px; + border-bottom: 1px solid black; +} + #filters { grid-area: filters; background-color: #eee; diff --git a/pdb-js/src/app/visualization-page/visualization-page.component.ts b/pdb-js/src/app/visualization-page/visualization-page.component.ts index a3bc27b..70b1e9b 100644 --- a/pdb-js/src/app/visualization-page/visualization-page.component.ts +++ b/pdb-js/src/app/visualization-page/visualization-page.component.ts @@ -15,18 +15,29 @@ export class VisualizationPageComponent implements OnInit { combinePlotTypes: Array; tagFields: Array; + + yAxis: string; + yAxisUnit: string; + minYValue: number; + maxYValue: number; + + query: string; constructor(private plotService: PlotService) { } ngOnInit() { + this.query = "pod=*"; this.plotTypes = this.plotService.getPlotTypes(); this.selectedPlotType = this.plotTypes[0].name; this.combinePlotTypes = this.plotTypes; - this.tagFields = this.plotService.getTagFields(); + this.yAxis = "log"; + this.yAxisUnit = "MINUTES"; + this.minYValue = 0; + this.maxYValue = 120; } } diff --git a/pdb-js/src/app/y-axis-range/y-axis-range.component.html b/pdb-js/src/app/y-axis-range/y-axis-range.component.html new file mode 100644 index 0000000..91272a0 --- /dev/null +++ b/pdb-js/src/app/y-axis-range/y-axis-range.component.html @@ -0,0 +1,16 @@ + + + + + + + + + automatic + milli seconds + seconds + minutes + hours + days + + diff --git a/pdb-js/src/app/y-axis-range/y-axis-range.component.scss b/pdb-js/src/app/y-axis-range/y-axis-range.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/pdb-js/src/app/y-axis-range/y-axis-range.component.spec.ts b/pdb-js/src/app/y-axis-range/y-axis-range.component.spec.ts new file mode 100644 index 0000000..837e60b --- /dev/null +++ b/pdb-js/src/app/y-axis-range/y-axis-range.component.spec.ts @@ -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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ YAxisRangeComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(YAxisRangeComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/pdb-js/src/app/y-axis-range/y-axis-range.component.ts b/pdb-js/src/app/y-axis-range/y-axis-range.component.ts new file mode 100644 index 0000000..0762961 --- /dev/null +++ b/pdb-js/src/app/y-axis-range/y-axis-range.component.ts @@ -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; + } +} diff --git a/pdb-js/src/assets/img/four-squares-line.svg b/pdb-js/src/assets/img/four-squares-line.svg new file mode 100644 index 0000000..ace6eab --- /dev/null +++ b/pdb-js/src/assets/img/four-squares-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/pdb-js/src/styles.scss b/pdb-js/src/styles.scss index 5775a52..c3ef9f2 100644 --- a/pdb-js/src/styles.scss +++ b/pdb-js/src/styles.scss @@ -29,6 +29,12 @@ body { margin: 0; } +.icon-inline { + width: 1em; + height: 1em; + vertical-align: text-bottom; +} + .icon-small { max-width: 1.5em; max-height: 1.5em;