From eaddf97a0d3e0e8a19e7789b006f50d04c7f027c Mon Sep 17 00:00:00 2001 From: Andreas Huber Date: Mon, 28 Oct 2019 18:39:12 +0100 Subject: [PATCH] zoom by range selection --- pdb-js/package-lock.json | 5 ++ pdb-js/package.json | 1 + .../src/app/plot-view/plot-view.component.ts | 39 ++++++++- .../visualization-page.component.html | 2 +- .../visualization-page.component.ts | 79 ++++++++++++++++--- pdb-js/src/index.html | 5 -- 6 files changed, 110 insertions(+), 21 deletions(-) diff --git a/pdb-js/package-lock.json b/pdb-js/package-lock.json index f06a79c..6a94fe3 100644 --- a/pdb-js/package-lock.json +++ b/pdb-js/package-lock.json @@ -7843,6 +7843,11 @@ } } }, + "moment": { + "version": "2.24.0", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz", + "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==" + }, "move-concurrently": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz", diff --git a/pdb-js/package.json b/pdb-js/package.json index e4c26fe..a783624 100644 --- a/pdb-js/package.json +++ b/pdb-js/package.json @@ -22,6 +22,7 @@ "@angular/platform-browser": "^8.2.11", "@angular/platform-browser-dynamic": "^8.2.11", "@angular/router": "^8.2.11", + "moment": "^2.24.0", "rxjs": "~6.4.0", "rxjs-compat": "^6.5.3", "tslib": "^1.10.0", diff --git a/pdb-js/src/app/plot-view/plot-view.component.ts b/pdb-js/src/app/plot-view/plot-view.component.ts index f228b6c..19278eb 100644 --- a/pdb-js/src/app/plot-view/plot-view.component.ts +++ b/pdb-js/src/app/plot-view/plot-view.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, Output, EventEmitter } from '@angular/core'; @Component({ selector: 'pdb-plot-view', @@ -18,6 +18,9 @@ export class PlotViewComponent implements OnInit { errorMessage: string; + @Output() + zoomRange : EventEmitter = new EventEmitter(); + in_drag_mode = false; drag_start_x = 0; @@ -116,9 +119,27 @@ export class PlotViewComponent implements OnInit { } dragStop(event) { - //console.log("drag_stop"); - this.in_drag_mode = false; - this.hideZoomInSlider(); + if (this.in_drag_mode){ + this.in_drag_mode = false; + this.hideZoomInSlider(); + + // Zoom in if the selected area has some arbitrary minimal size + if (Math.abs(this.drag_start_x - this.drag_end_x) > 10) { + + const startPxInImage = Math.min(this.drag_start_x, this.drag_end_x); + const endPxInImage = Math.max(this.drag_start_x, this.drag_end_x); + + const imageWidth = this.imageWidth(); + const widthPlotArea = imageWidth - this.gnuplotLMargin - this.gnuplotRMargin; + const startPxWithinPlotArea = startPxInImage - this.gnuplotLMargin; + const endPxWithinPlotArea = endPxInImage - this.gnuplotLMargin; + + const startPercentOfDateRange = startPxWithinPlotArea / widthPlotArea; + const endPercentOfDateRange = endPxWithinPlotArea / widthPlotArea; + + this.zoomRange.emit(new SelectionRange(startPercentOfDateRange, endPercentOfDateRange)); + } + } } dragAbort(event) { @@ -131,3 +152,13 @@ export class PlotViewComponent implements OnInit { } } } + +export class SelectionRange { + startPercentOfDateRange : number; + endPercentOfDateRange : number; + + constructor(startPercentOfDateRange: number, endPercentOfDateRange: number){ + this.startPercentOfDateRange = startPercentOfDateRange; + this.endPercentOfDateRange = endPercentOfDateRange; + } +} \ No newline at end of file diff --git a/pdb-js/src/app/visualization-page/visualization-page.component.html b/pdb-js/src/app/visualization-page/visualization-page.component.html index b4ab7b3..12dd889 100644 --- a/pdb-js/src/app/visualization-page/visualization-page.component.html +++ b/pdb-js/src/app/visualization-page/visualization-page.component.html @@ -84,7 +84,7 @@
- +
diff --git a/pdb-js/src/app/visualization-page/visualization-page.component.ts b/pdb-js/src/app/visualization-page/visualization-page.component.ts index a38748c..27ae9d5 100644 --- a/pdb-js/src/app/visualization-page/visualization-page.component.ts +++ b/pdb-js/src/app/visualization-page/visualization-page.component.ts @@ -5,8 +5,8 @@ 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 } from '../plot-view/plot-view.component' - +import {PlotViewComponent, SelectionRange } from '../plot-view/plot-view.component' +import * as moment from 'moment'; @Component({ selector: 'pdb-visualization-page', @@ -15,6 +15,8 @@ import {PlotViewComponent } from '../plot-view/plot-view.component' }) export class VisualizationPageComponent implements OnInit { + readonly DATE_PATTERN = "YYYY-MM-DD HH:mm:ss"; // for moment-JS + dateRange = new FormControl('2019-10-05 00:00:00 - 2019-10-11 23:59:59'); availablePlotTypes = {}; @@ -70,11 +72,7 @@ export class VisualizationPageComponent implements OnInit { } }); } - - changeDate(event){ - console.log("changed date: " + JSON.stringify(event)); - } - + getCombinablePlotTypes(selectedMainPlotType) : Array{ //const mainPlotType = this.availablePlotTypes[selectedMainPlotType]; const mainPlotType = selectedMainPlotType; @@ -82,6 +80,10 @@ export class VisualizationPageComponent implements OnInit { const compatiblePlotTypes = this.plotTypes.filter(pt => pt.compatible(mainPlotType)); return compatiblePlotTypes; } + + dateRangeAsString() : string { + return (document.getElementById("search-date-range")).value; + } plot(){ const that = this; @@ -90,20 +92,20 @@ export class VisualizationPageComponent implements OnInit { that.plotView.imageUrl = ''; - var aggregates = []; + const aggregates = []; aggregates.push(this.selectedPlotType.value.id); if (this.selectedCombinePlotType.value){ aggregates.push(this.selectedCombinePlotType.value.id); } - var request = new PlotRequest(); + const request = new PlotRequest(); request.query = this.query.query; request.height = document.getElementById("results").offsetHeight-1; request.width = document.getElementById("results").offsetWidth-1; request.groupBy = this.groupBy.map(o => o.name); request.limitBy = this.limitbycomponent.limitBy; request.limit = this.limitbycomponent.limit; - request.dateRange = (document.getElementById("search-date-range")).value; + request.dateRange = this.dateRangeAsString(); request.yAxisScale = this.yAxisScale; request.aggregates = aggregates; request.keyOutside = false; @@ -120,9 +122,64 @@ export class VisualizationPageComponent implements OnInit { }, error => { that.plotView.imageUrl = ''; - //that.plotView.errorMessage = JSON.stringify(error) that.plotView.errorMessage = error.error.message; }); } + + /** + * 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}); + + console.log(newStartDate + " - " + newEndDate); + this.setDateRange(newStartDate, newEndDate); + } + + parseDateRange(dateRangeAsString : string) : DateRange { + if (dateRangeAsString) { + 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; + + (document.getElementById("search-date-range")).value = newDateRange; + this.plot(); + } + + zoomRange(range: SelectionRange) { + this.shiftDate(this.dateRangeAsString(), range.startPercentOfDateRange, range.endPercentOfDateRange-1); + } } + +export class DateRange { + startDate: any; + endDate: any; + duration: any; + + +} diff --git a/pdb-js/src/index.html b/pdb-js/src/index.html index 8623b06..6dbeb5e 100644 --- a/pdb-js/src/index.html +++ b/pdb-js/src/index.html @@ -42,11 +42,6 @@ 'Last Year': [moment().subtract(1, 'year').startOf('year'),moment().subtract(1, 'year').endOf('year')], }, }); - - $('#search-date-range').on('apply.daterangepicker', function(ev, picker) { - const range = $('#search-date-range').val(); - console.log("update date range: " + range); - }); });