widget

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

@@ -652,6 +652,7 @@
 </mat-dialog-content>
 
 <mat-dialog-actions align="end">
+  <button mat-stroked-button (click)="resetConfig()" class="mr-auto">Reset to Default</button>
   <button mat-button (click)="onCancel()">Cancel</button>
   <button mat-raised-button color="primary" (click)="onSave()">Save</button>
 </mat-dialog-actions>

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

@@ -9,11 +9,12 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { FormsModule } from '@angular/forms';
+import { WidgetConfigGeneratorService } from '../../services/widget-config-generator.service';
+import { WidgetModel } from '../../models/widgets.model';
 
 export interface WidgetConfigDialogData {
-  config: any;
+  widget: WidgetModel;
   availableColumns: string[];
-  widgetType: string;
 }
 
 @Component({
@@ -41,27 +42,26 @@ export class WidgetConfigComponent implements OnInit {
 
   constructor(
     public dialogRef: MatDialogRef<WidgetConfigComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: WidgetConfigDialogData
+    @Inject(MAT_DIALOG_DATA) public data: WidgetConfigDialogData,
+    private widgetConfigGenerator: WidgetConfigGeneratorService
   ) { }
 
   ngOnInit(): void {
     this.availableColumns = this.data.availableColumns;
-    this.widgetType = this.data.widgetType;
+    this.widgetType = this.data.widget.component;
 
     // Handle config whether it is a string or an object
     try {
-      if (typeof this.data.config === 'string') {
-        this.currentConfig = JSON.parse(this.data.config);
+      if (typeof this.data.widget.config === 'string') {
+        this.currentConfig = JSON.parse(this.data.widget.config);
       } else {
-        // Deep copy config to avoid direct mutation of the original object
-        this.currentConfig = JSON.parse(JSON.stringify(this.data.config || {}));
+        this.currentConfig = JSON.parse(JSON.stringify(this.data.widget.config || {}));
       }
     } catch (e) {
       console.error('Error parsing widget config:', e);
-      this.currentConfig = {}; // Default to empty object on error
+      this.currentConfig = {};
     }
 
-    // Initialize arrays if they don't exist
     const gridLikeWidgets = ['SyncfusionDatagridWidgetComponent', 'NewDataTableWidget', 'MatrixWidgetComponent'];
     if (gridLikeWidgets.includes(this.widgetType) && !this.currentConfig.columns) {
       this.currentConfig.columns = [];
@@ -81,6 +81,10 @@ export class WidgetConfigComponent implements OnInit {
     }
   }
 
+  resetConfig(): void {
+      this.currentConfig = this.widgetConfigGenerator.generateConfig(this.data.widget, this.data.availableColumns);
+  }
+
   // Methods for Grid-like Widgets
   addGridColumn() {
     this.currentConfig.columns.push({ field: '', headerText: '', width: 100, isPrimary: false });
@@ -123,7 +127,6 @@ export class WidgetConfigComponent implements OnInit {
 
 
   onSave(): void {
-    // No more JSON parsing needed for the refactored widgets
     this.dialogRef.close(this.currentConfig);
   }
 

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

@@ -114,6 +114,22 @@ export class DashboardViewerComponent implements OnInit {
     ).subscribe({
       next: dashboard => {
         if (dashboard) {
+          if (dashboard.widgets) {
+            dashboard.widgets.forEach(widget => {
+              const keysToProcess: Array<keyof WidgetModel> = ['config', 'perspective', 'data'];
+              keysToProcess.forEach(key => {
+                if ((widget as any)[key] && typeof (widget as any)[key] === 'string') {
+                  try {
+                    (widget as any)[key] = JSON.parse((widget as any)[key] as string);
+                  } catch (e) {
+                    console.error(`Error parsing widget ${key} string:`, (widget as any)[key], e);
+                    (widget as any)[key] = {};
+                  }
+                }
+              });
+            });
+          }
+
           this.dashboardData = dashboard;
           this.panels = this.mapWidgetsToPanels(dashboard.widgets || []);
           if (dashboard.datasetId) {

src/app/portal-manage/services/widget-config-generator.service.ts

+import { Injectable } from '@angular/core';
+import { WidgetModel } from '../models/widgets.model';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class WidgetConfigGeneratorService {
+
+  constructor() { }
+
+  public generateConfig(widget: WidgetModel, columns: string[]): any {
+    let newConfig: any;
+    // Handle config whether it is a string or an object
+    try {
+      if (typeof widget.config === 'string') {
+        newConfig = JSON.parse(widget.config);
+      } else {
+        // Deep copy config to avoid direct mutation of the original object
+        newConfig = JSON.parse(JSON.stringify(widget.config || {}));
+      }
+    } catch (e) {
+      console.error('Error parsing widget config in generator service:', e);
+      newConfig = {}; // Default to empty object on error
+    }
+
+    const col1 = columns.length > 0 ? columns[0] : '';
+    const col2 = columns.length > 1 ? columns[1] : col1;
+
+    switch (widget.component) {
+      case 'SyncfusionDatagridWidgetComponent':
+      case 'MatrixWidgetComponent':
+      case 'SimpleTableWidgetComponent':
+      case 'NewDataTableWidget':
+        newConfig.title = widget.thName;
+        newConfig.columns = columns.map(c => ({ field: c, headerText: c, width: 150 }));
+        break;
+
+      case 'BarChartWidgetComponent':
+      case 'AreaChartWidgetComponent':
+      case 'PieChartWidgetComponent':
+      case 'DoughnutChartWidgetComponent':
+      case 'WaterfallChartWidgetComponent':
+        newConfig.title = widget.thName;
+        newConfig.xField = col1;
+        newConfig.yField = col2;
+        break;
+
+      case 'SimpleKpiWidgetComponent':
+      case 'GaugeChartWidgetComponent':
+        newConfig.title = widget.thName;
+        newConfig.valueField = col1;
+        break;
+
+      case 'SlicerWidgetComponent':
+        newConfig.title = widget.thName;
+        newConfig.optionsField = col1;
+        break;
+      
+      default:
+        newConfig.title = widget.thName;
+        break;
+    }
+    return newConfig;
+  }
+}

src/index.html

@@ -14,6 +14,7 @@
   <link rel="icon" type="image/x-icon" href="./assets/images/brand-logos/favicon.ico">
   <link rel="stylesheet" href="assets/JS/pace/themes/silver/pace-theme-flash.css" />
   <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@100..900&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <!-- <link
       href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700;800&display=swap"
       rel="stylesheet"