diff --git a/src/app/modules/dashboard/dashboard.component.html b/src/app/modules/dashboard/dashboard.component.html index 3fa69406..e52b6c53 100644 --- a/src/app/modules/dashboard/dashboard.component.html +++ b/src/app/modules/dashboard/dashboard.component.html @@ -84,7 +84,8 @@ [userHasUpdateNameAuthorization]="userHasUpdateWidgetNameAuthorization" [dashboardId]="dashboard.id" [widget]="dashboards[activeTabIndex].widgets[zoomedWidgetIndex]" - [zoom]="true"> + [zoom]="true" + [initialWidgetData]="initialWidgetData"> diff --git a/src/app/modules/dashboard/dashboard.component.ts b/src/app/modules/dashboard/dashboard.component.ts index fb08918a..a6ec314f 100644 --- a/src/app/modules/dashboard/dashboard.component.ts +++ b/src/app/modules/dashboard/dashboard.component.ts @@ -75,6 +75,8 @@ export class DashboardComponent implements OnInit, OnDestroy { userHasMoveWidgetAuthorization = false; userHasUpdateWidgetNameAuthorization = false; + initialWidgetData: any; + constructor( private responsiveService: ResponsiveService, private dashboardService: DashboardService, @@ -295,7 +297,7 @@ export class DashboardComponent implements OnInit, OnDestroy { if (widgetId) { const widgetIndex = this.dashboards[idx].widgets.findIndex(w => w.id === widgetId); if (widgetIndex !== -1 && widgetIndex !== this.zoomedWidgetIndex) { - setTimeout(() => this.zoomWidget({widgetId, widget: this.dashboards[idx].widgets[widgetIndex], manipulation: DashboardManipulationEnum.Zoom}), 0); + setTimeout(() => this.zoomWidget({widgetId, widget: this.dashboards[idx].widgets[widgetIndex], manipulation: DashboardManipulationEnum.Zoom, reloadAfterZoom: true, initialWidgetData: null}), 0); } } } @@ -477,7 +479,12 @@ export class DashboardComponent implements OnInit, OnDestroy { private zoomWidget(widgetManipulationModel: DashboardWidgetManipulationModel) { if (this.zoomedWidgetIndex === null && widgetManipulationModel.widget) { this.zoomedWidgetIndex = this.dashboards[this.activeTabIndex].widgets.indexOf(widgetManipulationModel.widget); - setTimeout(() => this.dashboardService.initWidget(widgetManipulationModel.widgetId), 0); + + if(widgetManipulationModel.reloadAfterZoom === true) { + setTimeout(() => this.dashboardService.initWidget(widgetManipulationModel.widgetId), 0); + } else { + this.initialWidgetData = widgetManipulationModel.initialWidgetData; + } } else { this.zoomedWidgetIndex = null; setTimeout(() => this.dashboardService.reloadAllWidgets(), 0); diff --git a/src/app/modules/dashboard/shared/dashboard-widget-manipulation.model.ts b/src/app/modules/dashboard/shared/dashboard-widget-manipulation.model.ts index abed26b3..0b1444d8 100644 --- a/src/app/modules/dashboard/shared/dashboard-widget-manipulation.model.ts +++ b/src/app/modules/dashboard/shared/dashboard-widget-manipulation.model.ts @@ -21,4 +21,6 @@ export interface DashboardWidgetManipulationModel { manipulation: DashboardManipulationEnum; widgetId: string; widget: WidgetModel | null; + initialWidgetData: any; + reloadAfterZoom: boolean; } diff --git a/src/app/modules/dashboard/shared/dashboard.service.ts b/src/app/modules/dashboard/shared/dashboard.service.ts index 0aaf8e10..e0e84252 100644 --- a/src/app/modules/dashboard/shared/dashboard.service.ts +++ b/src/app/modules/dashboard/shared/dashboard.service.ts @@ -199,15 +199,21 @@ export class DashboardService { /** Observable services */ manipulateWidget(manipulation: DashboardManipulationEnum, widgetId: string, widget: WidgetModel | null) { - this.widgetSubject.next({ manipulation, widgetId, widget }); + this.widgetSubject.next({ + manipulation, + widgetId, + widget, + reloadAfterZoom: true, + initialWidgetData: null + }); } manipulateDashboard(manipulation: DashboardManipulationEnum, dashboardId: string, dashboard: DashboardModel | null) { this.dashboardSubject.next({ manipulation, dashboardId, dashboard }); } - zoomWidget(manipulation: DashboardManipulationEnum, widgetId: string, widget: WidgetModel | null) { - this.widgetSubject.next({ manipulation, widgetId, widget }); + zoomWidget(manipulation: DashboardManipulationEnum, widgetId: string, widget: WidgetModel | null, reloadAfterZoom: boolean, initialWidgetData: any) { + this.widgetSubject.next({ manipulation, widgetId, widget, reloadAfterZoom, initialWidgetData}); } reloadAllWidgets() { diff --git a/src/app/widgets/charts/export/charts-export.component.html b/src/app/widgets/charts/export/charts-export.component.html index b5bedc26..1ed9b7c9 100644 --- a/src/app/widgets/charts/export/charts-export.component.html +++ b/src/app/widgets/charts/export/charts-export.component.html @@ -60,6 +60,7 @@ + (customEvent)="customEvent($event)" [optionCustomDisabled]="getCustomIcons(false).disabled" + [reloadAfterZoom]="false" [getInitialWidgetData]="getChartData"> diff --git a/src/app/widgets/charts/export/charts-export.component.ts b/src/app/widgets/charts/export/charts-export.component.ts index 52251d07..f434add2 100644 --- a/src/app/widgets/charts/export/charts-export.component.ts +++ b/src/app/widgets/charts/export/charts-export.component.ts @@ -33,7 +33,7 @@ import { ApexChartOptions } from './shared/charts-export-properties.model'; templateUrl: './charts-export.component.html', styleUrls: ['./charts-export.component.css'], }) -export class ChartsExportComponent implements OnInit, OnDestroy { +export class ChartsExportComponent implements OnInit, OnDestroy, AfterViewInit { chartExportData = {} as ChartsModel; timelineChartData: any; timelineWidth = 0; @@ -56,6 +56,7 @@ export class ChartsExportComponent implements OnInit, OnDestroy { @Input() userHasDeleteAuthorization = false; @Input() userHasUpdatePropertiesAuthorization = false; @Input() userHasUpdateNameAuthorization = false; + @Input() initialWidgetData: any; @HostListener('window:resize') onResize() { @@ -97,6 +98,26 @@ export class ChartsExportComponent implements OnInit, OnDestroy { this.scheduleRefresh(); } + ngAfterViewInit(): void { + // use this hook, to get the resize sizes from the correct widget + this.setupInitialChartData(); + + } + + setupInitialChartData() { + if(this.initialWidgetData != null) { + if(this.widget.properties.chartType === 'Timeline') { + this.timelineChartData = this.initialWidgetData; + this.resizeApex(); + } else { + this.chartExportData = this.initialWidgetData; + this.resizeChart(); + } + this.setupZoomChartSettings(); + this.ready = true; + } + } + edit() { this.chartsExportService.openEditDialog(this.dashboardId, this.widget.id, this.userHasUpdateNameAuthorization, this.userHasUpdatePropertiesAuthorization); } @@ -126,7 +147,6 @@ export class ChartsExportComponent implements OnInit, OnDestroy { private resizeChart() { const element = this.elementSizeService.getHeightAndWidthByElementId(this.widget.id, 5, 10); - if (this.chartExportData.options !== undefined) { this.chartExportData.options.height = element.height; this.chartExportData.options.width = element.width; @@ -193,21 +213,7 @@ export class ChartsExportComponent implements OnInit, OnDestroy { this.chartExportData = resp; this.chartExportData.dataTable.sort((a, b) => (a[0] as Date).valueOf() - (b[0] as Date).valueOf()); - if (this.zoom && this.chartExportData.chartType === 'LineChart' && this.chartExportData.options !== undefined) { - this.chartExportData.chartType = 'AnnotationChart'; - this.chartExportData.options.dateFormat = 'dd.MM.yyyy HH:mm:ss'; - this.chartExportData.options.displayExactValues = true; - this.chartExportData.options.thickness = 2; - this.chartExportData.options.displayZoomButtons = false; - this.chartExportData.options.displayAnnotations = false; - this.chartExportData.options.displayLegendValues = true; - if (lastOverride !== undefined && !this.ready) { - const start = (this.chartExportData.dataTable[1][0] as Date).valueOf(); - const end = (this.chartExportData.dataTable[this.chartExportData.dataTable.length-1][0] as Date).valueOf(); - const range = end - start; - this.chartExportData.options.zoomStartTime = new Date(end - (range / (this.widget.properties.zoomTimeFactor || 2))); - } - } + this.setupZoomChartSettings(lastOverride); this.ready = true; this.refreshing = false; this.resizeChart(); @@ -225,6 +231,24 @@ export class ChartsExportComponent implements OnInit, OnDestroy { } + setupZoomChartSettings(lastOverride?: string) { + if (this.zoom && this.chartExportData.chartType === 'LineChart' && this.chartExportData.options !== undefined) { + this.chartExportData.chartType = 'AnnotationChart'; + this.chartExportData.options.dateFormat = 'dd.MM.yyyy HH:mm:ss'; + this.chartExportData.options.displayExactValues = true; + this.chartExportData.options.thickness = 2; + this.chartExportData.options.displayZoomButtons = false; + this.chartExportData.options.displayAnnotations = false; + this.chartExportData.options.displayLegendValues = true; + if (lastOverride !== undefined && !this.ready) { + const start = (this.chartExportData.dataTable[1][0] as Date).valueOf(); + const end = (this.chartExportData.dataTable[this.chartExportData.dataTable.length-1][0] as Date).valueOf(); + const range = end - start; + this.chartExportData.options.zoomStartTime = new Date(end - (range / (this.widget.properties.zoomTimeFactor || 2))); + } + } + } + onChartSelect($event: ChartSelectEvent) { const rgxRes = this.timeRgx.exec(this.groupTime || ''); @@ -434,4 +458,12 @@ export class ChartsExportComponent implements OnInit, OnDestroy { this.refresh(); } } + + getChartData = () => { + if(this.timelineChartData != null) { + return this.timelineChartData; + } else { + return this.chartExportData; + } + }; } diff --git a/src/app/widgets/components/widget-footer/widget-footer.component.ts b/src/app/widgets/components/widget-footer/widget-footer.component.ts index 8d623dab..d0f12826 100644 --- a/src/app/widgets/components/widget-footer/widget-footer.component.ts +++ b/src/app/widgets/components/widget-footer/widget-footer.component.ts @@ -41,6 +41,8 @@ export class WidgetFooterComponent implements OnInit { @Input() userHasUpdateNameAuthorization = false; @Input() widgetHasUpdateableProperties = false; @Input() refreshing = false; + @Input() reloadAfterZoom = true; + @Input() getInitialWidgetData: any = () => {}; @Output() editEvent = new EventEmitter(); @Output() addEvent = new EventEmitter(); @@ -76,6 +78,6 @@ export class WidgetFooterComponent implements OnInit { } zoomWidget() { - this.dashboardService.zoomWidget(DashboardManipulationEnum.Zoom, this.widget.id, this.widget); + this.dashboardService.zoomWidget(DashboardManipulationEnum.Zoom, this.widget.id, this.widget, this.reloadAfterZoom, this.getInitialWidgetData()); } } diff --git a/src/app/widgets/components/widget-header/widget-header.component.ts b/src/app/widgets/components/widget-header/widget-header.component.ts index b1f5181b..9cf82e61 100644 --- a/src/app/widgets/components/widget-header/widget-header.component.ts +++ b/src/app/widgets/components/widget-header/widget-header.component.ts @@ -43,7 +43,7 @@ export class WidgetHeaderComponent implements OnInit { } zoomWidget() { - this.dashboardService.zoomWidget(DashboardManipulationEnum.Zoom, this.widget.id, this.widget); + this.dashboardService.zoomWidget(DashboardManipulationEnum.Zoom, this.widget.id, this.widget, false, null); } custom(i: number) { diff --git a/src/app/widgets/widget.component.html b/src/app/widgets/widget.component.html index da7e241a..6fe789a4 100644 --- a/src/app/widgets/widget.component.html +++ b/src/app/widgets/widget.component.html @@ -34,7 +34,7 @@
- +
diff --git a/src/app/widgets/widget.component.ts b/src/app/widgets/widget.component.ts index 75f91720..c76d696c 100644 --- a/src/app/widgets/widget.component.ts +++ b/src/app/widgets/widget.component.ts @@ -29,6 +29,7 @@ export class WidgetComponent implements OnInit { @Input() userHasDeleteAuthorization = false; @Input() userHasUpdatePropertiesAuthorization = false; @Input() userHasUpdateNameAuthorization = false; + @Input() initialWidgetData: any; constructor() {}