made chart widgets dont reload data when zoomed; fix #SNRGY-3233

SENERGY-Platform · Apr 15, 2024 · 5397f33 · 5397f33
1 parent 398f6df
commit 5397f33
Show file tree

Hide file tree

Showing 10 changed files with 79 additions and 27 deletions.
diff --git 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"></senergy-widget>
+                                        [zoom]="true"
+                                        [initialWidgetData]="initialWidgetData"></senergy-widget>
                     </div>
 
                 </div>

diff --git 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
@@ -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
@@ -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
@@ -60,6 +60,7 @@
     <senergy-widget-footer [widgetHasUpdateableProperties]="true" [userHasUpdateNameAuthorization]="userHasUpdateNameAuthorization" [userHasDeleteAuthorization]="userHasDeleteAuthorization" [userHasUpdatePropertiesAuthorization]="userHasUpdatePropertiesAuthorization" [dashboardId]="dashboardId" [widget]="widget" [optionZoom]="true" [zoom]="zoom"
                            (editEvent)="edit()" [refreshing]="refreshing"
                            [optionCustomIcon]="getCustomIcons(false).icons" [optionCustomTooltip]="getCustomIcons(false).tooltips"
-                           (customEvent)="customEvent($event)" [optionCustomDisabled]="getCustomIcons(false).disabled"></senergy-widget-footer>
+                           (customEvent)="customEvent($event)" [optionCustomDisabled]="getCustomIcons(false).disabled"
+                           [reloadAfterZoom]="false" [getInitialWidgetData]="getChartData"></senergy-widget-footer>
 </mat-card>
 
diff --git 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
@@ -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<boolean>();
     @Output() addEvent = new EventEmitter<boolean>();
@@ -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
@@ -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
@@ -34,7 +34,7 @@
     <senergy-ranking-list [userHasUpdateNameAuthorization]="userHasUpdateNameAuthorization" [userHasDeleteAuthorization]="userHasDeleteAuthorization" [userHasUpdatePropertiesAuthorization]="userHasUpdatePropertiesAuthorization" [dashboardId]="dashboardId" [widget]="widget" fxFill></senergy-ranking-list>
   </div>
   <div *ngSwitchCase="'charts_export'" fxFill>
-    <senergy-charts-export [userHasUpdateNameAuthorization]="userHasUpdateNameAuthorization" [userHasDeleteAuthorization]="userHasDeleteAuthorization" [userHasUpdatePropertiesAuthorization]="userHasUpdatePropertiesAuthorization" [dashboardId]="dashboardId" [widget]="widget" [zoom]="zoom" fxFill></senergy-charts-export>
+    <senergy-charts-export [userHasUpdateNameAuthorization]="userHasUpdateNameAuthorization" [userHasDeleteAuthorization]="userHasDeleteAuthorization" [userHasUpdatePropertiesAuthorization]="userHasUpdatePropertiesAuthorization" [dashboardId]="dashboardId" [widget]="widget" [zoom]="zoom" [initialWidgetData]="initialWidgetData" fxFill></senergy-charts-export>
   </div>
   <div *ngSwitchCase="'charts_process_instances'" fxFill>
     <senergy-charts-process-instances [userHasUpdateNameAuthorization]="userHasUpdateNameAuthorization" [userHasDeleteAuthorization]="userHasDeleteAuthorization" [userHasUpdatePropertiesAuthorization]="userHasUpdatePropertiesAuthorization" [dashboardId]="dashboardId" [widget]="widget" [zoom]="zoom" fxFill></senergy-charts-process-instances>

diff --git 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() {}