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

zoom by mousewheel

Browse Source
This commit is contained in:
Andreas Huber
2019-10-31 18:56:19 +01:00
parent bb8b183f91
commit 775b420e85
5 changed files with 66 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,7 +5,7 @@ import { FormControl, Validators } from '@angular/forms';
import { LimitByComponent } from '../limit-by/limit-by.component';
import { YAxisRangeComponent } from '../y-axis-range/y-axis-range.component';
import { QueryAutocompleteComponent } from '../query-autocomplete/query-autocomplete.component';
import {PlotViewComponent, SelectionRange } from '../plot-view/plot-view.component'
import {PlotViewComponent, SelectionRange, DateAnchor } from '../plot-view/plot-view.component'
import * as moment from 'moment';
@Component({
@@ -126,6 +126,26 @@ export class VisualizationPageComponent implements OnInit {
});
}
/**
* 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.
@@ -143,7 +163,6 @@ export class VisualizationPageComponent implements OnInit {
const newStartDate = dateRangeParsed.startDate.add({seconds: dateRangeInSeconds*factorStartDate});
const newEndDate = dateRangeParsed.endDate.add({seconds: dateRangeInSeconds*factorEndDate});
console.log(newStartDate + " - " + newEndDate);
this.setDateRange(newStartDate, newEndDate);
}
@@ -173,6 +192,10 @@ export class VisualizationPageComponent implements OnInit {
zoomRange(range: SelectionRange) {
this.shiftDate(this.dateRangeAsString(), range.startPercentOfDateRange, range.endPercentOfDateRange-1);
}
zoomWithDateAnchor(dateAnchor: DateAnchor){
this.shiftDateByAnchor(this.dateRangeAsString(), dateAnchor.cursorPercentOfDateRange, dateAnchor.zoomFactor);
}
}