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

use date picker in visualization page

Browse Source
This commit is contained in:
Andreas Huber
2024-05-05 10:22:45 +02:00
parent a99a884423
commit 21a84b5223
13 changed files with 856 additions and 478 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,113 +1,155 @@
<div id="visualization">
<div id="query-box">
<pdb-query-autocomplete #query></pdb-query-autocomplete>
<pdb-query-autocomplete #query></pdb-query-autocomplete>
</div>
<div id="date-box">
<app-date-picker #datePicker></app-date-picker>
<!--
<mat-form-field class="pdb-form-full-width">
<mat-label>Date Range:</mat-label>
<input matInput id="search-date-range" value="dateRange" name="dates" />
</mat-form-field>
-->
</div>
<div id="filters">
<div id="filterpanel">
<mat-form-field class="pdb-form-full-width">
<mat-label>Type:</mat-label>
<mat-select multiple [(ngModel)]="selectedPlotType" (ngModelChange)="changePlotType($event)">
<mat-option *ngFor="let plotType of plotTypes" [value]="plotType" [disabled]="!plotType.active">
<img src="assets/img/{{plotType.icon}}.svg" class="icon-select" /> {{plotType.name}}
<mat-select
multiple
[(ngModel)]="selectedPlotType"
(ngModelChange)="changePlotType($event)"
>
<mat-option
*ngFor="let plotType of plotTypes"
[value]="plotType"
[disabled]="!plotType.active"
>
<img src="assets/img/{{ plotType.icon }}.svg" class="icon-select" />
{{ plotType.name }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="pdb-form-full-width">
<mat-label>Group By:</mat-label>
<mat-select multiple [(value)]="groupBy">
<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-form-field>
<pdb-limit-by #limitbycomponent></pdb-limit-by>
<div [hidden]="!selectedPlotTypesContains(['BAR', 'BOX'])">
<mat-form-field >
<mat-label>Intervals (only bar chart):</mat-label>
<mat-select [(value)]="intervalUnit">
<mat-option value="NO_INTERVAL">-</mat-option>
<mat-option value="SECOND">second</mat-option>
<mat-option value="MINUTE">minute</mat-option>
<mat-option value="HOUR">hour</mat-option>
<mat-option value="DAY">day</mat-option>
<mat-option value="WEEK">week</mat-option>
<mat-option value="MONTH">month</mat-option>
<mat-option value="YEAR">year</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<mat-label>Intervals (only bar chart):</mat-label>
<mat-select [(value)]="intervalUnit">
<mat-option value="NO_INTERVAL">-</mat-option>
<mat-option value="SECOND">second</mat-option>
<mat-option value="MINUTE">minute</mat-option>
<mat-option value="HOUR">hour</mat-option>
<mat-option value="DAY">day</mat-option>
<mat-option value="WEEK">week</mat-option>
<mat-option value="MONTH">month</mat-option>
<mat-option value="YEAR">year</mat-option>
</mat-select>
</mat-form-field>
</div>
<div [hidden]="!selectedPlotTypesContains(['BAR', 'BOX'])">
<mat-checkbox [(ngModel)]="renderBarChartTickLabels">Show Tic Labels (bar chart)</mat-checkbox>
<mat-checkbox [(ngModel)]="renderBarChartTickLabels"
>Show Tic Labels (bar chart)</mat-checkbox
>
</div>
<pdb-y-axis-definition #y1AxisDefinitionComponent yIndex="1"></pdb-y-axis-definition>
<pdb-y-axis-definition #y2AxisDefinitionComponent yIndex="2" [hidden]="!y2AxisAvailable"></pdb-y-axis-definition>
<mat-checkbox *ngIf="galleryEnabled" [(ngModel)]="enableGallery" (click)="toggleGallery($event)">Gallery</mat-checkbox>
<mat-form-field *ngIf="enableGallery" class="pdb-form-full-width">
<pdb-y-axis-definition
#y1AxisDefinitionComponent
yIndex="1"
></pdb-y-axis-definition>
<pdb-y-axis-definition
#y2AxisDefinitionComponent
yIndex="2"
[hidden]="!y2AxisAvailable"
></pdb-y-axis-definition>
<mat-checkbox
*ngIf="galleryEnabled"
[(ngModel)]="enableGallery"
(click)="toggleGallery($event)"
>Gallery</mat-checkbox
>
<mat-form-field *ngIf="enableGallery" class="pdb-form-full-width">
<mat-label>Split By:</mat-label>
<mat-select [(value)]="splitBy">
<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-error *ngIf="splitBy == null || true">
Please select a value!
</mat-error>
</mat-form-field>
<div id="plot-button-bar">
<a
mat-icon-button
<a
mat-icon-button
[routerLink]="['/vis']"
[queryParams]="{config: serializedConfig()}"
[queryParams]="{ config: serializedConfig() }"
target="_blank"
aria-label="open new window with the same search"
title="open new window with the same search"><img src="assets/img/link.svg" aria-hidden="true"/></a>
<button
*ngIf="!enableGallery && !plotJobActive"
[disabled]="plotJobActive"
mat-button
matTooltip="Create Plot"
(click)="plot()">
<img src="assets/img/scatter-chart2.svg" class="icon-inline" aria-hidden="true" title="create plot" />
title="open new window with the same search"
><img src="assets/img/link.svg" aria-hidden="true"
/></a>
<button
*ngIf="!enableGallery && !plotJobActive"
[disabled]="plotJobActive"
mat-button
matTooltip="Create Plot"
(click)="plot()"
>
<img
src="assets/img/scatter-chart2.svg"
class="icon-inline"
aria-hidden="true"
title="create plot"
/>
Plot
</button>
<button
<button
*ngIf="enableGallery && !plotJobActive"
mat-button
matTooltip="Create Gallery"
(click)="gallery()"
[disabled]="this.splitBy == null">
<img src="assets/img/four-squares-line.svg" class="icon-inline" aria-hidden="true" title="Create Gallery (only active if 'Split' is set)" />
[disabled]="this.splitBy == null"
>
<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>
<button
<button
*ngIf="plotJobActive"
mat-button
(click)="abort()"
matTooltip="abort"><img src="assets/img/close.svg" class="icon-inline" /> Abort</button>
matTooltip="abort"
>
<img src="assets/img/close.svg" class="icon-inline" /> Abort
</button>
</div>
</div>
</div>
<div id="results">
<pdb-plot-view
#plotView
#plotView
(loadingEvent)="loading($event)"
(dateRangeUpdateEvent)="updateDateRange($event)"></pdb-plot-view>
<pdb-gallery-view
#galleryView>
</pdb-gallery-view>
(dateRangeUpdateEvent)="updateDateRange($event)"
></pdb-plot-view>
<pdb-gallery-view #galleryView> </pdb-gallery-view>
</div>
</div>

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

@@ -1,21 +1,46 @@
import { AfterViewInit, Component, Input, OnInit, ViewChild } from '@angular/core';
import { PlotService, PlotType, PlotRequest, TagField, FilterDefaults, DataType, AxesTypes, PlotConfig, RenderOptions, RenderOptionsMap, Suggestion } from '../plot.service';
import { UntypedFormControl, } from '@angular/forms';
import { MatSnackBar } from '@angular/material/snack-bar';
import { LimitByComponent } from '../limit-by/limit-by.component';
import { YAxisDefinitionComponent } from '../y-axis-definition/y-axis-definition.component';
import { QueryAutocompleteComponent } from '../query-autocomplete/query-autocomplete.component';
import { PlotViewComponent, LoadingEvent } from '../plot-view/plot-view.component';
import { GalleryViewComponent } from '../gallery-view/gallery-view.component';
import { WidgetDimensions } from '../dashboard.service';
import {
AfterViewInit,
Component,
Input,
OnInit,
ViewChild,
} from "@angular/core";
import {
AxesTypes,
DataType,
FilterDefaults,
PlotConfig,
PlotRequest,
PlotService,
PlotType,
RenderOptions,
RenderOptionsMap,
Suggestion,
TagField,
} from "../plot.service";
import { UntypedFormControl } from "@angular/forms";
import { MatSnackBar } from "@angular/material/snack-bar";
import { LimitByComponent } from "../limit-by/limit-by.component";
import { YAxisDefinitionComponent } from "../y-axis-definition/y-axis-definition.component";
import { QueryAutocompleteComponent } from "../query-autocomplete/query-autocomplete.component";
import {
DateRange,
LoadingEvent,
PlotViewComponent,
} from "../plot-view/plot-view.component";
import { GalleryViewComponent } from "../gallery-view/gallery-view.component";
import { WidgetDimensions } from "../dashboard.service";
import {
DatePickerComponent,
DateValue,
} from "../components/datepicker/date-picker.component";
@Component({
selector: 'pdb-visualization-page',
templateUrl: './visualization-page.component.html',
styleUrls: ['./visualization-page.component.scss']
selector: "pdb-visualization-page",
templateUrl: "./visualization-page.component.html",
styleUrls: ["./visualization-page.component.scss"],
})
export class VisualizationPageComponent implements OnInit, AfterViewInit {
readonly DATE_PATTERN = "YYYY-MM-DD HH:mm:ss"; // for moment-JS
@Input()
@@ -23,47 +48,50 @@ export class VisualizationPageComponent implements OnInit, AfterViewInit {
@Input()
galleryEnabled = true;
dateRange = new UntypedFormControl('2019-10-05 00:00:00 - 2019-10-11 23:59:59');
dateRange = new UntypedFormControl(
"2019-10-05 00:00:00 - 2019-10-11 23:59:59",
);
selectedPlotType = new Array<PlotType>();
plotTypes: PlotType[] = [];
tagFields: Array<TagField> = new Array<TagField>();
groupBy = new Array<TagField>();
@ViewChild('limitbycomponent')
private limitbycomponent! : LimitByComponent;
@ViewChild('y1AxisDefinitionComponent', { read: YAxisDefinitionComponent })
private y1AxisDefinitionComponent! : YAxisDefinitionComponent;
@ViewChild('y2AxisDefinitionComponent', { read: YAxisDefinitionComponent })
private y2AxisDefinitionComponent! : YAxisDefinitionComponent;
@ViewChild('query')
@ViewChild("limitbycomponent")
private limitbycomponent!: LimitByComponent;
@ViewChild("y1AxisDefinitionComponent", { read: YAxisDefinitionComponent })
private y1AxisDefinitionComponent!: YAxisDefinitionComponent;
@ViewChild("y2AxisDefinitionComponent", { read: YAxisDefinitionComponent })
private y2AxisDefinitionComponent!: YAxisDefinitionComponent;
@ViewChild("query")
query!: QueryAutocompleteComponent;
@ViewChild('plotView')
@ViewChild("plotView")
plotView!: PlotViewComponent;
@ViewChild('galleryView')
@ViewChild("galleryView")
galleryView!: GalleryViewComponent;
@ViewChild("datePicker")
datePicker!: DatePickerComponent;
enableGallery = false;
splitBy : TagField | undefined = undefined;
splitBy: TagField | undefined = undefined;
y2AxisAvailable = false;
intervalUnit = 'NO_INTERVAL';
intervalUnit = "NO_INTERVAL";
intervalValue = 1;
renderBarChartTickLabels = false;
plotJobActive = false;
constructor(private plotService: PlotService, private snackBar: MatSnackBar) {
const params = new URLSearchParams(window.location.search);
if (!this.defaultConfig && params.get("config")) {
const config = JSON.parse(params.get("config")!);
@@ -71,118 +99,128 @@ export class VisualizationPageComponent implements OnInit, AfterViewInit {
}
}
showError(message:string) {
showError(message: string) {
this.snackBar.open(message, "", {
duration: 5000,
verticalPosition: 'top'
verticalPosition: "top",
});
}
ngOnInit() {
(<any>window).initDatePicker();
(<any> window).initDatePicker();
this.plotTypes = this.plotService.getPlotTypes();
this.selectedPlotType.push(this.plotTypes[0]);
this.plotService.getFilterDefaults().subscribe((filterDefaults: FilterDefaults) => {
filterDefaults.fields.forEach((name:string) => {
this.tagFields.push(new TagField(name));
},
(error: any) => {
this.showError(error.error.message);
});
const groupByDefaults = this.defaultConfig ? this.defaultConfig.groupBy : filterDefaults.groupBy;
this.groupBy = this.tagFields.filter(val => groupByDefaults.includes(val.name));
this.splitBy = this.tagFields.find(val => filterDefaults.splitBy == val.name);
if (this.defaultConfig) {
this.plot();
}
});
this.plotService.getFilterDefaults().subscribe(
(filterDefaults: FilterDefaults) => {
filterDefaults.fields.forEach((name: string) => {
this.tagFields.push(new TagField(name));
}, (error: any) => {
this.showError(error.error.message);
});
const groupByDefaults = this.defaultConfig
? this.defaultConfig.groupBy
: filterDefaults.groupBy;
this.groupBy = this.tagFields.filter((val) =>
groupByDefaults.includes(val.name)
);
this.splitBy = this.tagFields.find((val) =>
filterDefaults.splitBy == val.name
);
if (this.defaultConfig) {
this.plot();
}
},
);
}
ngAfterViewInit(): void {
if (this.defaultConfig) {
const c = this.defaultConfig;
this.query.suggestionFetcherEnabled = false;
this.query.queryField.setValue(new Suggestion(c.query, c.query, c.query.length));
this.query.suggestionFetcherEnabled = true;
this.selectedPlotType = this.plotTypes.filter(pt => c.aggregates.includes(pt.id));
this.changePlotType(this.selectedPlotType);
this.updateDateRange(c.dateRange, false);
this.limitbycomponent.limitBy = c.limitBy;
this.limitbycomponent.limit = c.limit;
this.intervalUnit = c.intervalUnit;
this.intervalValue = c.intervalValue;
this.y1AxisDefinitionComponent.yAxisScale = c.y1.axisScale;
this.y1AxisDefinitionComponent.minYValue = c.y1.rangeMin;
this.y1AxisDefinitionComponent.maxYValue = c.y1.rangeMax;
this.y1AxisDefinitionComponent.yAxisUnit = c.y1.rangeUnit;
ngAfterViewInit(): void {
if (this.defaultConfig) {
const c = this.defaultConfig;
this.query.suggestionFetcherEnabled = false;
this.query.queryField.setValue(
new Suggestion(c.query, c.query, c.query.length),
);
this.query.suggestionFetcherEnabled = true;
if (c.y2) {
this.y2AxisDefinitionComponent.yAxisScale = c.y2.axisScale;
this.y2AxisDefinitionComponent.minYValue = c.y2.rangeMin;
this.y2AxisDefinitionComponent.maxYValue = c.y2.rangeMax;
this.y2AxisDefinitionComponent.yAxisUnit = c.y2.rangeUnit;
this.selectedPlotType = this.plotTypes.filter((pt) =>
c.aggregates.includes(pt.id)
);
this.changePlotType(this.selectedPlotType);
this.updateDateRange(c.dateRange, false);
this.limitbycomponent.limitBy = c.limitBy;
this.limitbycomponent.limit = c.limit;
this.intervalUnit = c.intervalUnit;
this.intervalValue = c.intervalValue;
this.y1AxisDefinitionComponent.yAxisScale = c.y1.axisScale;
this.y1AxisDefinitionComponent.minYValue = c.y1.rangeMin;
this.y1AxisDefinitionComponent.maxYValue = c.y1.rangeMax;
this.y1AxisDefinitionComponent.yAxisUnit = c.y1.rangeUnit;
if (c.y2) {
this.y2AxisDefinitionComponent.yAxisScale = c.y2.axisScale;
this.y2AxisDefinitionComponent.minYValue = c.y2.rangeMin;
this.y2AxisDefinitionComponent.maxYValue = c.y2.rangeMax;
this.y2AxisDefinitionComponent.yAxisUnit = c.y2.rangeUnit;
}
}
}
}
toggleGallery(event: Event){
this.galleryView.show = this.enableGallery;
}
toggleGallery(event: Event) {
this.galleryView.show = this.enableGallery;
}
loading(event: LoadingEvent) {
this.plotJobActive = event.loading;
}
updateDateRange(newDateRange: string, updatePlot=true) {
(<HTMLInputElement>document.getElementById("search-date-range")).value = newDateRange;
if (updatePlot){
updateDateRange(newDateRange: DateValue, updatePlot = true) {
this.datePicker.setDateValue(newDateRange);
if (updatePlot) {
this.plot();
}
}
changePlotType(selectedPlotTypes: Array<PlotType>) {
const compatiblePlotTypes = this.plotTypes.filter(pt => pt.compatible(selectedPlotTypes));
this.plotTypes.forEach(pt => pt.active=false);
compatiblePlotTypes.forEach(pt => pt.active=true);
const compatiblePlotTypes = this.plotTypes.filter((pt) =>
pt.compatible(selectedPlotTypes)
);
this.plotTypes.forEach((pt) => pt.active = false);
compatiblePlotTypes.forEach((pt) => pt.active = true);
const axesTypes = this.getAxes();
this.y2AxisAvailable = axesTypes.y.length == 2;
}
selectedPlotTypesContains(plotTypeIds: Array<string>){
return this.selectedPlotType.filter(pt => plotTypeIds.includes(pt.id)).length > 0;
selectedPlotTypesContains(plotTypeIds: Array<string>) {
return this.selectedPlotType.filter((pt) => plotTypeIds.includes(pt.id))
.length > 0;
}
dateRangeAsString() : string {
return (<HTMLInputElement>document.getElementById("search-date-range")).value;
dateRangeAsString(): DateValue {
return this.datePicker.getDateValue();
}
gallery(){
if (this.splitBy != null){
this.plotView.imageUrl = '';
gallery() {
if (this.splitBy != null) {
this.plotView.imageUrl = "";
this.plotView.stats = null;
this.galleryView.show=true;
this.galleryView.show = true;
const request = this.createPlotRequest();
this.galleryView.renderGallery(request, this.splitBy.name);
} else {
console.error("variable splitBy was null when rendering gallery");
}
}
getAxes() : AxesTypes {
getAxes(): AxesTypes {
const x = new Array<DataType>();
const y = new Array<DataType>();
for(var i = 0; i < this.selectedPlotType.length; i++){
for (var i = 0; i < this.selectedPlotType.length; i++) {
var plotType = this.selectedPlotType[i];
if (!x.includes(plotType.xAxis)) {
x.push(plotType.xAxis);
@@ -191,75 +229,83 @@ toggleGallery(event: Event){
y.push(plotType.yAxis);
}
}
return new AxesTypes(x,y);
return new AxesTypes(x, y);
}
abort() {
this.plotService.abort((<any>window).submitterId).subscribe({
this.plotService.abort((<any> window).submitterId).subscribe({
complete: () => {
}
},
});
}
plot(){
plot() {
const config = this.createPlotConfig();
this.plotView.plot(config, this.plotDimensionSupplier);
}
plotDimensionSupplier(): WidgetDimensions{
plotDimensionSupplier(): WidgetDimensions {
const results = document.getElementById("results");
return new WidgetDimensions(
results != null ? results.offsetWidth-1 : 1024,
results != null ? results.offsetHeight-1: 1024);
results != null ? results.offsetWidth - 1 : 1024,
results != null ? results.offsetHeight - 1 : 1024,
);
}
createPlotConfig(): PlotConfig {
const aggregates = new Array<string>();
this.selectedPlotType.forEach(a => aggregates.push(a.id));
this.selectedPlotType.forEach((a) => aggregates.push(a.id));
const y1 = this.y1AxisDefinitionComponent.getAxisDefinition();
const y2 = this.y2AxisDefinitionComponent ? this.y2AxisDefinitionComponent.getAxisDefinition() : undefined;
const y2 = this.y2AxisDefinitionComponent
? this.y2AxisDefinitionComponent.getAxisDefinition()
: undefined;
const config = new PlotConfig(
this.query.query,
this.groupBy.map(o => o.name),
this.groupBy.map((o) => o.name),
this.limitbycomponent.limitBy,
this.limitbycomponent.limit,
y1,
y2,
this.dateRangeAsString(), // dateRange
aggregates, // aggregates
this.datePicker.getDateValue(), // dateRange
aggregates, // aggregates
this.intervalUnit,
this.intervalValue,
this.renderBarChartTickLabels,
this.renderBarChartTickLabels,
);
return config;
}
createPlotRequest(): PlotRequest {
const results = document.getElementById("results");
const config = this.createPlotConfig();
const renderOptions : RenderOptionsMap = {
'main': new RenderOptions(results!.offsetHeight-1, results!.offsetWidth-1, true, true),
'thumbnail': new RenderOptions(200, 300, false, false),
const renderOptions: RenderOptionsMap = {
"main": new RenderOptions(
results!.offsetHeight - 1,
results!.offsetWidth - 1,
true,
true,
),
"thumbnail": new RenderOptions(200, 300, false, false),
};
const request = new PlotRequest(
(<any>window).submitterId,
(<any> window).submitterId,
config,
renderOptions
);
renderOptions,
);
return request;
}
serializedConfig(): string {
try{
const config = this.createPlotConfig();
return JSON.stringify(config);
}catch (e) {
try {
const config = this.createPlotConfig();
return JSON.stringify(config);
} catch (e) {
return "";
}
}