use date picker in visualization page

This commit is contained in:
2024-05-05 10:22:45 +02:00
parent a99a884423
commit 21a84b5223
13 changed files with 856 additions and 478 deletions

View File

@@ -6,6 +6,7 @@ import { WidgetDimensions } from '../dashboard.service';
import { Overlay } from "@angular/cdk/overlay";
import { DateTime, Duration } from "luxon";
import { DateValue } from '../components/datepicker/date-picker.component';
@Component({
selector: 'pdb-plot-view',
@@ -32,7 +33,7 @@ export class PlotViewComponent {
loadingEvent : EventEmitter<LoadingEvent> = new EventEmitter<LoadingEvent>();
@Output()
dateRangeUpdateEvent : EventEmitter<string> = new EventEmitter<string>();
dateRangeUpdateEvent : EventEmitter<DateValue> = new EventEmitter<DateValue>();
in_drag_mode = false;
drag_start_x = 0;
@@ -184,16 +185,16 @@ export class PlotViewComponent {
const formattedEndDate = endDate.toFormat(this.DATE_PATTERN);
const newDateRange = formattedStartDate+" - "+formattedEndDate;
this.dateRangeUpdateEvent.emit(newDateRange);
const newDateValue = new DateValue('ABSOLUTE', newDateRange, newDateRange);
this.dateRangeUpdateEvent.emit(newDateValue);
}
zoomRange(range: SelectionRange) {
this.shiftDate(this.config?.dateRange!, range.startPercentOfDateRange, range.endPercentOfDateRange-1);
this.shiftDate(this.config?.dateRange.value!, range.startPercentOfDateRange, range.endPercentOfDateRange-1);
}
zoomWithDateAnchor(dateAnchor: DateAnchor){
this.shiftDateByAnchor(this.config?.dateRange!, dateAnchor.cursorPercentOfDateRange, dateAnchor.zoomFactor);
this.shiftDateByAnchor(this.config?.dateRange.value!, dateAnchor.cursorPercentOfDateRange, dateAnchor.zoomFactor);
}
zoomByScroll(event: WheelEvent) {