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

edit plots

Browse Source
This commit is contained in:
Andreas Huber
2023-03-12 08:24:16 +01:00
parent b56b4c231e
commit b5028e03be
19 changed files with 222 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,13 +1,12 @@
import { Component, OnInit, ViewChild } from '@angular/core';
import { PlotService, PlotType, PlotRequest, PlotResponse, TagField, FilterDefaults, DataType, YAxisDefinition, AxesTypes, PlotConfig, RenderOptions, RenderOptionsMap } from '../plot.service';
import { UntypedFormControl, Validators } from '@angular/forms';
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, SelectionRange, DateAnchor, LoadingEvent } from '../plot-view/plot-view.component';
import { PlotViewComponent, LoadingEvent } from '../plot-view/plot-view.component';
import { GalleryViewComponent } from '../gallery-view/gallery-view.component';
import * as moment from 'moment';
import { WidgetDimensions } from '../dashboard.service';
@Component({
@@ -15,14 +14,20 @@ import { WidgetDimensions } from '../dashboard.service';
templateUrl: './visualization-page.component.html',
styleUrls: ['./visualization-page.component.scss']
})
export class VisualizationPageComponent implements OnInit {
export class VisualizationPageComponent implements OnInit, AfterViewInit {
readonly DATE_PATTERN = "YYYY-MM-DD HH:mm:ss"; // for moment-JS
@Input()
defaultConfig?: PlotConfig;
@Input()
galleryEnabled = true;
dateRange = new UntypedFormControl('2019-10-05 00:00:00 - 2019-10-11 23:59:59');
selectedPlotType = new Array<PlotType>();
plotTypes: Array<any> = [];
plotTypes: PlotType[] = [];
tagFields: Array<TagField> = new Array<TagField>();
@@ -68,33 +73,68 @@ export class VisualizationPageComponent implements OnInit {
}
ngOnInit() {
const that = this;
(<any>window).initDatePicker();
this.plotTypes = this.plotService.getPlotTypes();
this.selectedPlotType.push(this.plotTypes[0]);
that.plotService.getFilterDefaults().subscribe(function(filterDefaults: FilterDefaults) {
this.plotService.getFilterDefaults().subscribe((filterDefaults: FilterDefaults) => {
filterDefaults.fields.forEach(function(name:string) {
that.tagFields.push(new TagField(name));
filterDefaults.fields.forEach((name:string) => {
this.tagFields.push(new TagField(name));
},
(error: any) => {
that.showError(error.error.message);
this.showError(error.error.message);
});
that.groupBy = that.tagFields.filter(val => filterDefaults.groupBy.includes(val.name));
that.splitBy = that.tagFields.find(val => filterDefaults.splitBy == val.name);
});
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.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;
}
}
}
loading(event: LoadingEvent) {
this.plotJobActive = event.loading;
}
updateDateRange(newDateRange: string) {
updateDateRange(newDateRange: string, updatePlot=true) {
(<HTMLInputElement>document.getElementById("search-date-range")).value = newDateRange;
this.plot();
if (updatePlot){
this.plot();
}
}
changePlotType(selectedPlotTypes: Array<PlotType>) {