view

src/app/portal-manage/dashboard-management/dashboard-management.component.html

@@ -129,7 +129,7 @@
       </button>
       <button
         *ngIf="selectedDashboardId"
-        [routerLink]="['/portal-manage/dashboard-viewer', selectedDashboardId]"
+        [routerLink]="['/portal-manage/dashboard-viewer', selectedDashboardId.dashboardId]"
         class="ti-btn ti-btn-secondary-full flex items-center gap-2 ml-2"
       >
         <i class="bi bi-eye-fill"></i> View Dashboard

src/app/portal-manage/dashboard-viewer/dashboard-viewer.component.html

 
 <div *ngIf="errorMessage" class="alert alert-danger">{{errorMessage}}</div>
 
-<div class="container mx-auto p-4">
-    <h2 class="text-2xl font-bold mb-4 text-gray-800">Viewing Dashboard: {{ dashboardName }}</h2>
+<div class="dashboard-viewer-container">
     <div class="control-section">
         <ejs-dashboardlayout id='dashboard_viewer' #viewerLayout [cellSpacing]="cellSpacing" [panels]="panels" [columns]="6" [allowResizing]="false" [allowDragging]="false">
             <e-panels>

src/app/portal-manage/dashboard-viewer/dashboard-viewer.component.scss

 /* Add custom styles for your dashboard viewer component here */
+:host {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+  
+  .dashboard-viewer-container, .control-section, ejs-dashboardlayout {
+    width: 100%;
+    height: 100%;
+  }
+  
+  // Optional: If you are embedding in an iframe and want to ensure no extra space
+  // You might need to add this to your global styles.scss if you see scrollbars
+  /*
+  html, body {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden; // Prevent scrollbars on the body
+  }
+  */
\ No newline at end of file

src/app/portal-manage/dashboard-viewer/dashboard-viewer.component.ts

-import { Component, OnInit, Type, ChangeDetectionStrategy } from '@angular/core'; // Import Type
+import { Component, OnInit, Type, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; // Import Type
 import { CommonModule } from '@angular/common';
 import { ActivatedRoute, RouterModule } from '@angular/router';
 import { DashboardLayoutModule, PanelModel } from '@syncfusion/ej2-angular-layouts';
-import { Observable, of } from 'rxjs'; // Import forkJoin
-import { map, switchMap } from 'rxjs/operators'; // Import tap
+import { Observable, of, forkJoin } from 'rxjs'; // Import forkJoin
+import { map, switchMap, tap } from 'rxjs/operators'; // Import tap
 import { NgComponentOutlet } from '@angular/common'; // Import NgComponentOutlet
 import { DashboardDataService } from '../services/dashboard-data.service';
-import { DashboardModel } from '../models/widgets.model';
+import { WidgetDataService } from '../services/widget-data.service';
+import { DashboardModel, WidgetModel } from '../models/widgets.model';
 import { DashboardStateService } from '../services/dashboard-state.service'; // Import DashboardStateService
 
 // Import all the widget components
@@ -76,7 +77,7 @@ import { HttpClientModule } from '@angular/common/http';
   ],
   templateUrl: './dashboard-viewer.component.html',
   styleUrls: ['./dashboard-viewer.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.Default
 })
 export class DashboardViewerComponent implements OnInit {
 
@@ -123,7 +124,9 @@ export class DashboardViewerComponent implements OnInit {
   constructor(
     private route: ActivatedRoute,
     private dashboardDataService: DashboardDataService,
-    private dashboardStateService: DashboardStateService // Inject DashboardStateService
+    private dashboardStateService: DashboardStateService, // Inject DashboardStateService
+    private widgetDataService: WidgetDataService,
+    private cdr: ChangeDetectorRef
   ) { }
 
   ngOnInit(): void {
@@ -131,7 +134,8 @@ export class DashboardViewerComponent implements OnInit {
       map(params => params.get('dashboardId')),
       switchMap(id => {
         if (!id) {
-          console.error('Dashboard ID is missing from the route.');
+          this.errorMessage = 'Dashboard ID is missing from the route.';
+          console.error(this.errorMessage);
           return of(null);
         }
         return this.dashboardDataService.getDashboardById(id);
@@ -140,6 +144,8 @@ export class DashboardViewerComponent implements OnInit {
       next: dashboard => {
         if (dashboard) {
           this.loadDashboard(dashboard);
+        } else {
+          this.errorMessage = 'Could not load the dashboard.';
         }
       },
       error: err => this.errorMessage = err.message
@@ -153,9 +159,30 @@ export class DashboardViewerComponent implements OnInit {
       this.dashboardStateService.selectDataset(dashboard.datasetId);
     }
 
-    this.panels = dashboard.widgets.map(widget => {
-      const widgetConfig = widget.config || {};
+    // Process widgets and fetch data if necessary
+    const dataFetchTasks: Observable<any>[] = dashboard.widgets
+      .filter(widget => widget.config?.source?.type === 'url' && widget.config?.source?.url)
+      .map(widget =>
+        this.widgetDataService.fetchDataForWidget(widget.config).pipe(
+          tap(data => {
+            // Mutate the config object to include the fetched data
+            widget.config.data = data;
+          })
+        )
+      );
 
+    if (dataFetchTasks.length > 0) {
+      forkJoin(dataFetchTasks).subscribe(() => {
+        this.createPanels(dashboard.widgets);
+      });
+    } else {
+      this.createPanels(dashboard.widgets);
+    }
+  }
+
+  createPanels(widgets: WidgetModel[]): void {
+    this.panels = widgets.map(widget => {
+      const widgetConfig = widget.config || {};
       return {
         id: widget.widgetId,
         row: widget.y,
@@ -163,10 +190,11 @@ export class DashboardViewerComponent implements OnInit {
         sizeX: widget.cols,
         sizeY: widget.rows,
         header: widget.thName,
-        componentName: widget.component, // Add componentName
-        componentType: this.widgetComponentMap[widget.component], // Attach the component Type
-        componentInputs: { config: widgetConfig } // Pass the config object as 'config' input
+        componentName: widget.component,
+        componentType: this.widgetComponentMap[widget.component],
+        componentInputs: { config: widgetConfig }
       };
     });
+    this.cdr.detectChanges(); // Manually trigger change detection
   }
 }