use date picker in visualization page
This commit is contained in:
@@ -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 "";
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user