เพิ่ม chart pivot

src/app/portal-manage/widgets/syncfusion-pivot-widget/syncfusion-pivot-widget.component.html

@@ -29,6 +29,8 @@
       [allowExcelExport]="true"
       (toolbarClick)="toolbarClick($event)"
       [toolbar]="toolbar"
+      [displayOption]="displayOption"
+      [chartSettings]="chartSettings"
       height="100%">
     </ejs-pivotview>
 

src/app/portal-manage/widgets/syncfusion-pivot-widget/syncfusion-pivot-widget.component.ts

 import { Component, ViewChild } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { PivotViewModule, IDataSet, FieldListService, CalculatedFieldService, ToolbarService, GroupingBarService, ConditionalFormattingService, PivotViewComponent, PDFExportService, ExcelExportService, ToolbarItems } from '@syncfusion/ej2-angular-pivotview';
+import { PivotViewModule, IDataSet, FieldListService, CalculatedFieldService, ToolbarService, GroupingBarService, ConditionalFormattingService, PivotViewComponent, PDFExportService, ExcelExportService, ToolbarItems, PivotChartService, DisplayOption } from '@syncfusion/ej2-angular-pivotview';
+import { ChartSettingsModel } from '@syncfusion/ej2-pivotview/src/pivotview/model/chartsettings-model';
 import { ClickEventArgs } from '@syncfusion/ej2-navigations';
 import { DataManager } from '@syncfusion/ej2-data';
 import { DashboardStateService } from '../../services/dashboard-state.service';
@@ -10,7 +11,7 @@ import { BaseWidgetComponent } from '../base-widget.component';
   selector: 'app-syncfusion-pivot-widget',
   standalone: true,
   imports: [CommonModule, PivotViewModule],
-  providers: [FieldListService, CalculatedFieldService, ToolbarService, GroupingBarService, ConditionalFormattingService, ExcelExportService, PDFExportService],
+  providers: [FieldListService, CalculatedFieldService, ToolbarService, GroupingBarService, ConditionalFormattingService, ExcelExportService, PDFExportService, PivotChartService],
   templateUrl: './syncfusion-pivot-widget.component.html',
 })
 export class SyncfusionPivotWidgetComponent extends BaseWidgetComponent {
@@ -23,27 +24,35 @@ export class SyncfusionPivotWidgetComponent extends BaseWidgetComponent {
     columns: any[];
     values: any[];
     filters: any[];
+    chartSettings?: ChartSettingsModel;
   } = {
-    dataSource: new DataManager([]),
-    expandAll: false,
-    rows: [],
-    columns: [],
-    values: [],
-    filters: [],
-  };
+      dataSource: new DataManager([]),
+      expandAll: false,
+      rows: [],
+      columns: [],
+      values: [],
+      filters: [],
+    };
   public toolbar: ToolbarItems[];
+  public displayOption: DisplayOption;
+  public chartSettings: ChartSettingsModel;
+
 
   constructor(protected override dashboardStateService: DashboardStateService) {
     super(dashboardStateService);
   }
 
   override ngOnInit(): void {
-    this.toolbar = ['Grid', 'Chart', 'Export', 'FieldList', 'Formatting'];
+    this.toolbar = ['Grid', 'Chart', 'Export', 'SubTotal', 'GrandTotal', 'ConditionalFormatting', 'NumberFormatting', 'FieldList']
+    this.displayOption = { view: 'Both' } as DisplayOption;
     super.ngOnInit();
   }
 
   applyInitialConfig(): void {
     this.title = this.config.title || 'Pivot Table';
+    this.chartSettings = this.config.chartSettings || {
+      chartSeries: { type: 'Column' }
+    };
     this.dataSourceSettings = {
       dataSource: new DataManager([]),
       expandAll: this.config.expandAll || false,
@@ -51,18 +60,20 @@ export class SyncfusionPivotWidgetComponent extends BaseWidgetComponent {
       columns: this.config.columns || [],
       values: this.config.values || [],
       filters: this.config.filters || [],
+      chartSettings: this.chartSettings,
     };
   }
 
   onDataUpdate(data: IDataSet[]): void {
     this.dataSourceSettings = {
-        ...this.dataSourceSettings,
-        dataSource: new DataManager(data)
+      ...this.dataSourceSettings,
+      dataSource: new DataManager(data)
     };
   }
 
   onReset(): void {
     this.title = 'Pivot Table (Default)';
+    this.chartSettings = { chartSeries: { type: 'Column' } };
     this.dataSourceSettings = {
       dataSource: new DataManager([
         { 'Sold': 31, 'Amount': 52824, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2015' },
@@ -74,6 +85,7 @@ export class SyncfusionPivotWidgetComponent extends BaseWidgetComponent {
       columns: [{ name: 'Year' }],
       values: [{ name: 'Sold' }, { name: 'Amount' }],
       filters: [],
+      chartSettings: this.chartSettings,
     };
   }