datamanager

src/app/DPU/dashboard-management/dashboard-management.component.scss

@@ -59,19 +59,6 @@
   min-height: 600px; /* min-h-[600px] */
 }
 
-/* Syncfusion specific styles */
-.e-dashboardlayout .e-panel .e-panel-container .e-panel-header {
-    font-size: 16px;
-    font-weight: bold;
-}
-
-.e-dashboardlayout .e-panel .e-panel-container .e-panel-content {
-    padding: 10px;
-    text-align: center;
-    font-style: italic;
-    color: #888;
-}
-
 /* Button styles (assuming ti-btn is a base class) */
 .ti-btn {
   font-weight: bold;
@@ -124,4 +111,4 @@
   &:hover {
     background-color: #4b5563;
   }
-}
\ No newline at end of file
+}

src/app/DPU/widgets/syncfusion-chart-widget/syncfusion-chart-widget.component.html

@@ -14,8 +14,8 @@
 
   <!-- Chart -->
   <ejs-chart *ngIf="!isLoading && !hasError" [primaryXAxis]="primaryXAxis" [primaryYAxis]="primaryYAxis">
-    <e-series-collection>
-        <e-series [dataSource]="chartData" type="Column" xName="x" yName="y" name="Data"></e-series>
-    </e-series-collection>
-</ejs-chart>
+      <e-series-collection>
+          <e-series [dataSource]="chartData.executeLocal(query)" type="Column" xName="x" yName="y" name="Data"></e-series>
+      </e-series-collection>
+    </ejs-chart>
 </div>

src/app/DPU/widgets/syncfusion-chart-widget/syncfusion-chart-widget.component.ts

 import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ChartModule, ColumnSeriesService, CategoryService, LegendService, TooltipService, DataLabelService } from '@syncfusion/ej2-angular-charts';
+import { DataManager, Query } from '@syncfusion/ej2-data'; // Added DataManager and Query import
 import { DashboardStateService } from '../../services/dashboard-state.service';
 import { BaseWidgetComponent } from '../base-widget.component';
 
@@ -12,27 +13,29 @@ import { BaseWidgetComponent } from '../base-widget.component';
   templateUrl: './syncfusion-chart-widget.component.html',
 })
 export class SyncfusionChartWidgetComponent extends BaseWidgetComponent {
-  public chartData: Object[];
+  public chartData: DataManager = new DataManager([]); // Changed type and initialized
   public primaryXAxis: Object;
   public primaryYAxis: Object;
+  public query: Query = new Query(); // Added Query instance
 
   constructor(protected override dashboardStateService: DashboardStateService) {
     super(dashboardStateService);
   }
 
   onDataUpdate(data: any[]): void {
-    this.chartData = data.map(item => ({ x: item[this.config.xField], y: item[this.config.yField] }));
+    const dm = new DataManager(data);
+    this.chartData = new DataManager(dm.executeLocal(new Query()).map((item: any) => ({ x: item[this.config.xField], y: item[this.config.yField] })));
     this.primaryXAxis = { valueType: 'Category', title: this.config.xAxisTitle || '' };
     this.primaryYAxis = { title: this.config.yAxisTitle || '' };
   }
 
   onReset(): void {
     this.title = 'Syncfusion Chart (Default)';
-    this.chartData = [
+    this.chartData = new DataManager([
       { x: 'Jan', y: 35 }, { x: 'Feb', y: 28 },
       { x: 'Mar', y: 34 }, { x: 'Apr', y: 32 },
       { x: 'May', y: 40 }, { x: 'Jun', y: 30 },
-    ];
+    ]);
     this.primaryXAxis = { valueType: 'Category', title: 'Month' };
     this.primaryYAxis = { title: 'Sales' };
   }

src/app/DPU/widgets/syncfusion-datagrid-widget/syncfusion-datagrid-widget.component.ts

 import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { GridModule, PageService, SortService, FilterService, GroupService } from '@syncfusion/ej2-angular-grids';
+import { DataManager, UrlAdaptor } from '@syncfusion/ej2-data'; // Added DataManager import
 import { DashboardStateService } from '../../services/dashboard-state.service';
 import { BaseWidgetComponent } from '../base-widget.component';
 
@@ -12,7 +13,7 @@ import { BaseWidgetComponent } from '../base-widget.component';
   templateUrl: './syncfusion-datagrid-widget.component.html',
 })
 export class SyncfusionDatagridWidgetComponent extends BaseWidgetComponent {
-  public data: object[] = [];
+  public data: DataManager = new DataManager([]); // Changed type and initialized
   public columns: any[] = [];
   public pageSettings: Object = { pageSize: 10 };
 
@@ -21,12 +22,12 @@ export class SyncfusionDatagridWidgetComponent extends BaseWidgetComponent {
   }
 
   onDataUpdate(data: any[]): void {
-    this.data = data;
+    this.data = new DataManager(data); // Initialize DataManager with the data
     if (this.config.columns && this.config.columns.length > 0) {
       this.columns = this.config.columns;
-    } else if (this.data.length > 0) {
+    } else if (data.length > 0) { // Changed this.data.length to data.length
       // Auto-generate columns if not provided in config
-      this.columns = Object.keys(this.data[0]).map(key => ({
+      this.columns = Object.keys(data[0]).map(key => ({ // Changed this.data[0] to data[0]
         field: key,
         headerText: this.formatHeader(key),
         width: 150
@@ -36,7 +37,7 @@ export class SyncfusionDatagridWidgetComponent extends BaseWidgetComponent {
 
   onReset(): void {
     this.title = 'Data Grid (Default)';
-    this.data = [];
+    this.data = new DataManager([]); // Initialize with empty DataManager
     this.columns = [{ field: 'Message', headerText: 'Please select a dataset' }];
   }
 

src/app/DPU/widgets/syncfusion-pivot-widget/syncfusion-pivot-widget.component.ts

 import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { PivotViewModule, IDataSet, FieldListService, CalculatedFieldService, ToolbarService, GroupingBarService, ConditionalFormattingService } from '@syncfusion/ej2-angular-pivotview';
+import { DataManager, UrlAdaptor } from '@syncfusion/ej2-data'; // Added DataManager import
 import { DashboardStateService } from '../../services/dashboard-state.service';
 import { BaseWidgetComponent } from '../base-widget.component';
 
@@ -13,12 +14,19 @@ import { BaseWidgetComponent } from '../base-widget.component';
 })
 export class SyncfusionPivotWidgetComponent extends BaseWidgetComponent {
   public dataSourceSettings: {
-    dataSource: IDataSet[];
+    dataSource: DataManager; // Changed type to DataManager
     expandAll: boolean;
     rows: any[];
     columns: any[];
     values: any[];
     filters: any[];
+  } = {
+    dataSource: new DataManager([]), // Initialized with empty DataManager
+    expandAll: false,
+    rows: [],
+    columns: [],
+    values: [],
+    filters: [],
   };
 
   constructor(protected override dashboardStateService: DashboardStateService) {
@@ -27,7 +35,7 @@ export class SyncfusionPivotWidgetComponent extends BaseWidgetComponent {
 
   onDataUpdate(data: IDataSet[]): void {
     this.dataSourceSettings = {
-      dataSource: data,
+      dataSource: new DataManager(data), // Initialize DataManager with the data
       expandAll: this.config.expandAll || false,
       rows: this.config.rows || [],
       columns: this.config.columns || [],
@@ -39,11 +47,11 @@ export class SyncfusionPivotWidgetComponent extends BaseWidgetComponent {
   onReset(): void {
     this.title = 'Pivot Table (Default)';
     this.dataSourceSettings = {
-      dataSource: [
+      dataSource: new DataManager([
         { 'Sold': 31, 'Amount': 52824, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2015' },
         { 'Sold': 51, 'Amount': 91915, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2016' },
         { 'Sold': 90, 'Amount': 173155, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2017' },
-      ],
+      ]),
       expandAll: false,
       rows: [{ name: 'Country' }],
       columns: [{ name: 'Year' }],