chart

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

@@ -33,6 +33,9 @@ import { DatasetPickerComponent } from './dataset-picker.component';
 import { DataTableWidgetComponent } from '../widgets/dynamic-widgets/data-table-widget.component'; // Import new widget
 import { AccumulationChartAllModule, ChartAllModule } from '@syncfusion/ej2-angular-charts';
 import { SharedModule } from '../../shared/shared.module';
+import { AreaChartWidgetComponent } from '../widgets/area-chart-widget/area-chart-widget.component';
+import { BarChartWidgetComponent } from '../widgets/bar-chart-widget/bar-chart-widget.component';
+import { PieChartWidgetComponent } from '../widgets/pie-chart-widget/pie-chart-widget.component';
 
 @Component({
   selector: 'app-dashboard-management',
@@ -49,6 +52,9 @@ import { SharedModule } from '../../shared/shared.module';
     SyncfusionChartWidgetComponent,
     DatasetPickerComponent,
     DataTableWidgetComponent, // Add new widget to imports
+    AreaChartWidgetComponent,
+    BarChartWidgetComponent,
+    PieChartWidgetComponent,
     DashboardLayoutModule,
     ChartAllModule,
     AccumulationChartAllModule // Add Syncfusion DashboardLayoutModule
@@ -106,6 +112,27 @@ export class DashboardManagementComponent implements OnInit {
       cols: 3,
       rows: 2,
     }),
+    new WidgetModel({
+      id: 'local-area-chart',
+      name: 'Area Chart (Local)',
+      component: 'AreaChartWidgetComponent',
+      cols: 3,
+      rows: 2,
+    }),
+    new WidgetModel({
+      id: 'local-bar-chart',
+      name: 'Bar Chart (Local)',
+      component: 'BarChartWidgetComponent',
+      cols: 3,
+      rows: 2,
+    }),
+    new WidgetModel({
+      id: 'local-pie-chart',
+      name: 'Pie Chart (Local)',
+      component: 'PieChartWidgetComponent',
+      cols: 2,
+      rows: 2,
+    }),
   ];
 
   private widgetComponentMap: { [key: string]: Type<any> } = {
@@ -123,6 +150,9 @@ export class DashboardManagementComponent implements OnInit {
     'SyncfusionChartWidgetComponent': SyncfusionChartWidgetComponent,
     'TimeTrackingWidgetComponent': TimeTrackingWidgetComponent,
     'PayrollWidgetComponent': PayrollWidgetComponent,
+    'AreaChartWidgetComponent': AreaChartWidgetComponent,
+    'BarChartWidgetComponent': BarChartWidgetComponent,
+    'PieChartWidgetComponent': PieChartWidgetComponent,
     'NewDataTableWidget': DataTableWidgetComponent // Add new widget to map
   };
 

src/app/DPU/dashboard-viewer/dashboard-viewer.component.ts

@@ -27,6 +27,9 @@ import { SyncfusionChartWidgetComponent } from '../widgets/syncfusion-chart-widg
 import { DataTableWidgetComponent } from '../widgets/dynamic-widgets/data-table-widget.component'; // Import new widget
 import { TimeTrackingWidgetComponent } from '../widgets/time-tracking-widget/time-tracking-widget.component';
 import { PayrollWidgetComponent } from '../widgets/payroll-widget/payroll-widget.component';
+import { AreaChartWidgetComponent } from '../widgets/area-chart-widget/area-chart-widget.component';
+import { BarChartWidgetComponent } from '../widgets/bar-chart-widget/bar-chart-widget.component';
+import { PieChartWidgetComponent } from '../widgets/pie-chart-widget/pie-chart-widget.component';
 import { SharedModule } from '../../shared/shared.module';
 
 
@@ -34,15 +37,18 @@ import { SharedModule } from '../../shared/shared.module';
   selector: 'app-dashboard-viewer',
   standalone: true,
   imports: [
-    CommonModule, 
-    RouterModule, 
-    DashboardLayoutModule, 
-    NgComponentOutlet, 
+    CommonModule,
+    RouterModule,
+    DashboardLayoutModule,
+    NgComponentOutlet,
     SharedModule,
-    SyncfusionDatagridWidgetComponent, 
-    SyncfusionPivotWidgetComponent, 
+    SyncfusionDatagridWidgetComponent,
+    SyncfusionPivotWidgetComponent,
     SyncfusionChartWidgetComponent,
     DataTableWidgetComponent, // Add new widget to imports
+    AreaChartWidgetComponent,
+    BarChartWidgetComponent,
+    PieChartWidgetComponent,
   ],
   templateUrl: './dashboard-viewer.component.html',
   styleUrls: ['./dashboard-viewer.component.scss'],
@@ -69,7 +75,10 @@ export class DashboardViewerComponent implements OnInit {
     'SyncfusionDatagridWidgetComponent': SyncfusionDatagridWidgetComponent,
     'SyncfusionPivotWidgetComponent': SyncfusionPivotWidgetComponent,
     'SyncfusionChartWidgetComponent': SyncfusionChartWidgetComponent,
-    'NewDataTableWidget': DataTableWidgetComponent // Add new widget to map
+    'NewDataTableWidget': DataTableWidgetComponent, // Add new widget to map
+    'AreaChartWidgetComponent': AreaChartWidgetComponent,
+    'BarChartWidgetComponent': BarChartWidgetComponent,
+    'PieChartWidgetComponent': PieChartWidgetComponent
   };
 
   public errorMessage: string | null = null;

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

+<ejs-chart [title]="title" [primaryXAxis]="primaryXAxis" [primaryYAxis]="primaryYAxis">
+    <e-series-collection>
+        <e-series [dataSource]="chartData" type="Area" xName="month" yName="sales" name="Sales"></e-series>
+    </e-series-collection>
+</ejs-chart>

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

+import { Component, Input, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ChartModule, AreaSeriesService, CategoryService, LegendService, TooltipService, DataLabelService } from '@syncfusion/ej2-angular-charts';
+
+@Component({
+  selector: 'app-area-chart-widget',
+  standalone: true,
+  imports: [CommonModule, ChartModule],
+  providers: [AreaSeriesService, CategoryService, LegendService, TooltipService, DataLabelService],
+  templateUrl: './area-chart-widget.component.html',
+})
+export class AreaChartWidgetComponent implements OnInit {
+  @Input() chartData: Object[];
+  @Input() title: string = 'Area Chart';
+
+  public primaryXAxis: Object;
+  public primaryYAxis: Object;
+
+  ngOnInit(): void {
+    this.primaryXAxis = { valueType: 'Category', title: 'Month' };
+    this.primaryYAxis = { title: 'Sales' };
+    if (!this.chartData) {
+      this.chartData = [
+        { month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
+        { month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
+        { month: 'May', sales: 40 }, { month: 'Jun', sales: 30 },
+      ];
+    }
+  }
+}

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

+<ejs-chart [title]="title" [primaryXAxis]="primaryXAxis" [primaryYAxis]="primaryYAxis">
+    <e-series-collection>
+        <e-series [dataSource]="chartData" [type]="type" xName="country" yName="sales" name="Sales"></e-series>
+    </e-series-collection>
+</ejs-chart>

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

+import { Component, Input, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ChartModule, BarSeriesService, ColumnSeriesService, CategoryService, LegendService, TooltipService, DataLabelService } from '@syncfusion/ej2-angular-charts';
+
+@Component({
+  selector: 'app-bar-chart-widget',
+  standalone: true,
+  imports: [CommonModule, ChartModule],
+  providers: [BarSeriesService, ColumnSeriesService, CategoryService, LegendService, TooltipService, DataLabelService],
+  templateUrl: './bar-chart-widget.component.html',
+})
+export class BarChartWidgetComponent implements OnInit {
+  @Input() chartData: Object[];
+  @Input() title: string = 'Bar Chart';
+  @Input() type: 'Bar' | 'Column' = 'Column';
+
+  public primaryXAxis: Object;
+  public primaryYAxis: Object;
+
+  ngOnInit(): void {
+    this.primaryXAxis = { valueType: 'Category', title: 'Country' };
+    this.primaryYAxis = { title: 'Sales' };
+    if (!this.chartData) {
+      this.chartData = [
+        { country: 'USA', sales: 20 },
+        { country: 'China', sales: 25 },
+        { country: 'Japan', sales: 18 },
+        { country: 'Germany', sales: 15 },
+      ];
+    }
+  }
+}

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

+<ejs-accumulationchart [title]="title" [legendSettings]="legendSettings" [enableSmartLabels]="true">
+    <e-accumulation-series-collection>
+        <e-accumulation-series [dataSource]="chartData" xName="browser" yName="users" [dataLabel]="{ visible: true, name: 'text', position: 'Inside' }"></e-accumulation-series>
+    </e-accumulation-series-collection>
+</ejs-accumulationchart>

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

+import { Component, Input, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AccumulationChartModule, PieSeriesService, AccumulationDataLabelService, AccumulationLegendService, AccumulationTooltipService } from '@syncfusion/ej2-angular-charts';
+
+@Component({
+  selector: 'app-pie-chart-widget',
+  standalone: true,
+  imports: [CommonModule, AccumulationChartModule],
+  providers: [PieSeriesService, AccumulationDataLabelService, AccumulationLegendService, AccumulationTooltipService],
+  templateUrl: './pie-chart-widget.component.html',
+})
+export class PieChartWidgetComponent implements OnInit {
+  @Input() chartData: Object[];
+  @Input() title: string = 'Pie Chart';
+  @Input() legendSettings: Object;
+
+  ngOnInit(): void {
+    if (!this.chartData) {
+      this.chartData = [
+        { browser: 'Chrome', users: 37 },
+        { browser: 'Firefox', users: 17 },
+        { browser: 'Internet Explorer', users: 19 },
+        { browser: 'Edge', users: 4 },
+        { browser: 'Safari', users: 11 },
+        { browser: 'Other', users: 12 },
+      ];
+    }
+    this.legendSettings = { visible: true };
+  }
+}