s

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

@@ -744,8 +744,7 @@ export class DashboardManagementComponent implements OnInit {
       this.dashboardData.datasetId = dataset.itemId;
       this.dashboardData.templateId = dataset.templateId;
       this.dashboardData.fileName = dataset.fileName;
-      this.dashboardStateService.selectDataset(dataset);
-      // this.getDatasetByTemplate(dataset);
+      this.dashboardStateService.selectDataset(dataset.itemId);
     }
   }
 

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

 
 <div *ngIf="errorMessage" class="alert alert-danger">{{errorMessage}}</div>
 
-<div class="dashboard-viewer-container">
+<div *ngIf="dashboardData" class="dashboard-viewer-container p-4">
+    <h1 class="text-2xl font-bold mb-4 text-gray-800">{{ dashboardData.thName }}</h1>
     <div class="control-section">
         <ejs-dashboardlayout id='dashboard_viewer' #viewerLayout [cellSpacing]="cellSpacing" [panels]="panels" [columns]="6" [allowResizing]="false" [allowDragging]="false">
             <e-panels>
                 <e-panel *ngFor="let panel of panels" [row]="panel.row" [col]="panel.col" [sizeX]="panel.sizeX" [sizeY]="panel.sizeY" [id]="panel.id">
                     <ng-template #header>
-                        <div class="p-2 bg-white border-b border-gray-200 text-gray-700 font-semibold flex justify-between items-center">
+                        <div class="e-panel-header flex justify-between items-center">
                             <span>{{panel.header}}</span>
                         </div>
                     </ng-template>

src/app/portal-manage/services/dashboard-state.service.ts

 import { Injectable } from '@angular/core';
 import { BehaviorSubject, Observable, of } from 'rxjs';
-import { switchMap, map, shareReplay } from 'rxjs/operators';
+import { switchMap, map, shareReplay, tap } from 'rxjs/operators';
 import { DatasetService } from './dataset.service';
 import { HttpClient } from '@angular/common/http';
 import { DatasetModel } from '../models/widgets.model';
@@ -14,35 +14,43 @@ export interface SelectedDataset {
   providedIn: 'root'
 })
 export class DashboardStateService {
-  private selectedDatasetId = new BehaviorSubject<DatasetModel | null>(null);
+  private selectedDatasetId = new BehaviorSubject<string | null>(null);
   public selectedDataset$: Observable<SelectedDataset | null>;
 
   constructor(private datasetService: DatasetService, private http: HttpClient) {
     this.selectedDataset$ = this.selectedDatasetId.pipe(
-      switchMap(dataset => {
-        if (dataset) {
-          return this.datasetService.getDatasetByTemplate(dataset.templateId, dataset.fileName).pipe(
-            map(response => {
-              // The API might return an array directly, or an object with a 'data' property.
-              const dataArray = Array.isArray(response) ? response : (response && Array.isArray(response.data)) ? response.data : null;
-
-              if (dataArray && dataArray.length > 0) {
-                return {
-                  data: dataArray,
-                  columns: Object.keys(dataArray[0])
-                };
-              }
-              return null; // Return null if data is not in the expected format
-            })
-          );
+      switchMap(id => {
+        if (!id) {
+          return of(null);
         }
-        return of(null); // No dataset ID selected
+        // First, get all datasets to find the selected one's details
+        return this.datasetService.getDatasets().pipe(
+          switchMap(datasets => {
+            const selected = datasets.find(d => d.itemId === id);
+            if (selected) {
+              // Now fetch the actual data using templateId and fileName
+              return this.datasetService.getDatasetByTemplate(selected.templateId, selected.fileName).pipe(
+                map(response => {
+                  const dataArray = Array.isArray(response) ? response : (response && Array.isArray(response.data)) ? response.data : null;
+                  if (dataArray && dataArray.length > 0) {
+                    return {
+                      data: dataArray,
+                      columns: Object.keys(dataArray[0])
+                    };
+                  }
+                  return null;
+                })
+              );
+            }
+            return of(null); // Dataset with the given ID not found
+          })
+        );
       }),
-      shareReplay(1) // Cache and replay the last emitted value
+      shareReplay(1)
     );
   }
 
-  selectDataset(dataset: DatasetModel): void {
-    this.selectedDatasetId.next(dataset);
+  selectDataset(datasetId: string | null): void {
+    this.selectedDatasetId.next(datasetId);
   }
 }

src/app/portal-manage/widgets/combo-chart-widget/combo-chart-widget.component.ts

@@ -49,3 +49,4 @@ export class ComboChartWidgetComponent extends BaseWidgetComponent {
     ];
   }
 }
+

src/app/portal-manage/widgets/filled-map-widget/filled-map-widget.component.ts

@@ -65,3 +65,4 @@ export class FilledMapWidgetComponent extends BaseWidgetComponent {
     ];
   }
 }
+

src/app/portal-manage/widgets/gauge-chart-widget/gauge-chart-widget.component.ts

@@ -64,3 +64,4 @@ export class GaugeChartWidgetComponent extends BaseWidgetComponent {
     }];
   }
 }
+

src/app/portal-manage/widgets/scatter-bubble-chart-widget/scatter-bubble-chart-widget.component.ts

@@ -58,3 +58,4 @@ export class ScatterBubbleChartWidgetComponent extends BaseWidgetComponent {
     this.primaryYAxis = { title: 'Y-Value' };
   }
 }
+

src/app/portal-manage/widgets/treemap-widget/treemap-widget.component.ts

@@ -51,3 +51,4 @@ export class TreemapWidgetComponent extends BaseWidgetComponent {
     };
   }
 }
+