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