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

make plot view standalone

Browse Source
This commit is contained in:
Andreas Huber
2023-02-26 16:06:58 +01:00
parent fb5c8ea019
commit d52033b5f0
3 changed files with 160 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,7 +5,7 @@ import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack
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 } from '../plot-view/plot-view.component';
import { PlotViewComponent, SelectionRange, DateAnchor, LoadingEvent } from '../plot-view/plot-view.component';
import { GalleryViewComponent } from '../gallery-view/gallery-view.component';
import * as moment from 'moment';
@@ -89,6 +89,14 @@ export class VisualizationPageComponent implements OnInit {
that.splitBy = that.tagFields.find(val => filterDefaults.splitBy == val.name);
});
}
loading(event: LoadingEvent) {
this.plotJobActive = event.loading;
}
updateDateRange(newDateRange: string) {
(<HTMLInputElement>document.getElementById("search-date-range")).value = newDateRange;
this.plot();
}
changePlotType(selectedPlotTypes: Array<PlotType>) {
const compatiblePlotTypes = this.plotTypes.filter(pt => pt.compatible(selectedPlotTypes));
@@ -151,34 +159,9 @@ export class VisualizationPageComponent implements OnInit {
}
plot(){
const that = this;
that.plotView.imageUrl = '';
that.plotView.stats = null;
this.plotJobActive = true;
this.plotView.axes = this.getAxes();
console.log(JSON.stringify(this.getAxes()));
that.galleryView.show=false;
document.dispatchEvent(new Event("invadersStart", {}));
const request = this.createPlotRequest();
this.plotService.sendPlotRequest(request).subscribe({
next: (plotResponse: PlotResponse) => {
this.plotView.imageUrl = "http://"+window.location.hostname+':'+window.location.port+'/'+plotResponse.imageUrl;
this.plotView.stats = plotResponse.stats;
this.plotJobActive = false;
document.dispatchEvent(new Event("invadersPause", {}));
},
error: (error:any) => {
console.log(JSON.stringify(error));
this.plotView.imageUrl = '';
this.plotView.stats = null;
this.plotJobActive = false;
this.showError(error.error.message);
document.dispatchEvent(new Event("invadersPause", {}));
}
});
const config = this.createPlotConfig();
const axes = this.getAxes();
this.plotView.plot(config, axes);
}
createPlotConfig(): PlotConfig {
@@ -220,89 +203,4 @@ export class VisualizationPageComponent implements OnInit {
config);
return request;
}
/**
* Zoom in/out by zoomFaktor, so that the anchorInPercentOfDateRange keeps the same position.
*
* shiftDateByAnchor(dateRangeAsString, 0.20, 0.5) zooms in by 50%, so that the date that was at 20% before the zoom is still at 20% after the zoom
* shiftDateByAnchor(dateRangeAsString, 0.33, 2) zooms out by 50%, so that the date that was at 33% before the zoom is still at 33% after the zoom
*/
shiftDateByAnchor(dateRange:string, anchorInPercentOfDateRange:number, zoomFactor:number)
{
const dateRangeParsed = this.parseDateRange(dateRange);
const dateRangeInSeconds = dateRangeParsed.duration.asSeconds();
const anchorTimestampInSeconds = dateRangeParsed.startDate.clone().add(Math.floor(dateRangeInSeconds*anchorInPercentOfDateRange), "seconds");
const newDateRangeInSeconds = dateRangeInSeconds * zoomFactor;
const newStartDate = anchorTimestampInSeconds.clone().subtract(newDateRangeInSeconds*anchorInPercentOfDateRange, "seconds");
const newEndDate = newStartDate.clone().add({seconds: newDateRangeInSeconds});;
this.setDateRange(newStartDate, newEndDate);
}
/**
* Zoom in/out or shift date by adding factorStartDate*dateRangeInSeconds seconds to the start date
* and factorEndDate*dateRangeInSeconds seconds to the end date.
*
* shiftDate(dateRangeAsString, 0.25, -0.25) will zoom in, making the range half its size
* shiftDate(dateRangeAsString, -0.5, 0.5) will zoom out, making the range double its size
* shiftDate(dateRangeAsString, -0.5, -0.5) will move the range by half its size to older values
* shiftDate(dateRangeAsString, 1, 1) will move the range by its size to newer values
*/
shiftDate(dateRange: string, factorStartDate: number, factorEndDate: number)
{
const dateRangeParsed = this.parseDateRange(dateRange);
const dateRangeInSeconds = dateRangeParsed.duration.asSeconds();
const newStartDate = dateRangeParsed.startDate.add({seconds: dateRangeInSeconds*factorStartDate});
const newEndDate = dateRangeParsed.endDate.add({seconds: dateRangeInSeconds*factorEndDate});
this.setDateRange(newStartDate, newEndDate);
}
parseDateRange(dateRangeAsString : string) : DateRange {
const startDate = moment(dateRangeAsString.slice(0, 19));
const endDate = moment(dateRangeAsString.slice(22, 41));
return {
startDate: startDate,
endDate: endDate,
duration: moment.duration(endDate.diff(startDate))
};
}
setDateRange(startDate: any, endDate: any) {
const formattedStartDate = startDate.format(this.DATE_PATTERN);
const formattedEndDate = endDate.format(this.DATE_PATTERN);
const newDateRange = formattedStartDate+" - "+formattedEndDate;
(<HTMLInputElement>document.getElementById("search-date-range")).value = newDateRange;
this.plot();
}
zoomRange(range: SelectionRange) {
this.shiftDate(this.dateRangeAsString(), range.startPercentOfDateRange, range.endPercentOfDateRange-1);
}
zoomWithDateAnchor(dateAnchor: DateAnchor){
this.shiftDateByAnchor(this.dateRangeAsString(), dateAnchor.cursorPercentOfDateRange, dateAnchor.zoomFactor);
}
}
export class DateRange {
startDate: any;
endDate: any;
duration: any;
}
/*
export class AxesUsed {
x1: DataType;
y1: DataType;
x2: DataType;
y2: DataType;
}
*/