แก้ให้ pivot แสดง

src/app/DPU/common/myportal/set-excel-reports/excel-list/excel-list.component.html

@@ -1038,7 +1038,7 @@
                 </button>
             </div>
             <div class="ti-modal-body px-4 mt-3">
-                <app-datagrid-syncfution [searchSettings]="searchSettings" [dataSource]="dataList" [columns]="columns"
+                <app-datagrid-syncfution #pivotComponent [searchSettings]="searchSettings" [dataSource]="dataList" [columns]="columns"
                     [gridLayout]="setPerspective" [sendLayout]="gridLayout.stimulate" (layout)="gridLayout.data=$event">
                 </app-datagrid-syncfution>
             </div>
@@ -1114,7 +1114,7 @@
                 </app-pivot-syncfution>
             </div>
 
-            <div class="border-t mt-3">
+            <div class="border-t">
                 <div class="ti-modal-footer flex justify-end gap-3 mb-3 mt-3 mr-3">
                     <button *ngIf="!loadingExcel" type="button" class="ti-btn ti-btn-info-full"
                         (click)="pivotLayout.stimulate=!pivotLayout.stimulate;savePerspective('pivot')">

src/app/pivot-syncfution/pivot-syncfution.component.html

 <ejs-pivotview #pivotview id='PivotView' [dataSourceSettings]="dataSourceSettings" [displayOption]='displayOption'
   [toolbar]='toolbarOptions' [allowExcelExport]='true' [allowNumberFormatting]='true'
   [allowConditionalFormatting]='true' [allowPdfExport]='true' [showToolbar]='true' [allowCalculatedField]='true'
-  [showFieldList]='true' width='100%' height='550'></ejs-pivotview>
\ No newline at end of file
+  [showFieldList]='true' width='970' height='450'></ejs-pivotview>
\ No newline at end of file

src/app/pivot-syncfution/pivot-syncfution.component.scss

@@ -46,3 +46,29 @@
 .e-grid td.e-selectionbackground {
   background-color: #aec2ec !important;
 }
+
+::ng-deep .e-pivotview .e-scrollbar .e-hscroll-bar, 
+::ng-deep .e-pivotview .e-scrollbar .e-vscroll-bar {
+  height: 14px !important; /* ปรับขนาดแนวนอน */
+  width: 14px !important;  /* ปรับขนาดแนวตั้ง */
+}
+
+::ng-deep .e-pivotview ::-webkit-scrollbar {
+  height: 14px;
+  width: 14px;
+}
+
+::ng-deep .e-pivotview ::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 7px;
+}
+
+::ng-deep .e-pivotview ::-webkit-scrollbar-track {
+  background: #f1f1f1;
+}
+
+/* สำหรับ Firefox */
+::ng-deep .e-pivotview {
+  scrollbar-width: auto;
+  scrollbar-color: #c1c1c1 #f1f1f1;
+}

src/app/pivot-syncfution/pivot-syncfution.component.ts

@@ -13,8 +13,18 @@ import {
   DataSourceSettings,
   PivotViewComponent,
   FieldList,
-  PivotViewModule
+  PivotViewModule,
+  FieldListService,
+  CalculatedFieldService,
+  ConditionalFormattingService,
+  NumberFormattingService,
+  PivotChartService
 } from '@syncfusion/ej2-angular-pivotview';
+import { LineSeriesService } from '@syncfusion/ej2-angular-charts';
+import { Chart } from '@syncfusion/ej2-charts';
+import { LineSeries } from '@syncfusion/ej2-charts';
+
+Chart.Inject(LineSeries);
 import { DataSourceSettingsModel } from '@syncfusion/ej2-pivotview/src/model/datasourcesettings-model';
 import { SharedModule } from "../shared/shared.module";
 
@@ -32,7 +42,13 @@ import { SharedModule } from "../shared/shared.module";
     GroupingBarService,
     ToolbarService,
     PDFExportService,
-    ExcelExportService
+    ExcelExportService,
+    FieldListService,
+    CalculatedFieldService,
+    ConditionalFormattingService,
+    NumberFormattingService,
+    PivotChartService,
+    LineSeriesService
   ]
 })
 export class PivotSyncfutionComponent implements OnInit {
@@ -66,10 +82,12 @@ export class PivotSyncfutionComponent implements OnInit {
   }
   ngOnChanges(changes: SimpleChanges): void {
     if (changes['dataSource']?.currentValue || changes['columns']?.currentValue) {
+      const filteredColumns = this.columns.filter((col: { name: string; }) => col.name !== 'create_time');
+      
       this.dataSourceSettings = {
         dataSource: this.dataSource,
-        columns: this.columns,
-        values: [],
+        columns: filteredColumns,
+        values:  [{ name: 'create_time'}],
         rows: [],
         expandAll: true,
         enableSorting: true,
@@ -77,6 +95,9 @@ export class PivotSyncfutionComponent implements OnInit {
         filters: [],
         formatSettings: []
       };
+      console.log("dataSourceSettings:", this.dataSourceSettings);
+      console.log(this.dataSource);
+      console.log(this.columns);
     }
     if (changes['pivotLayout']) {
       if (changes['pivotLayout'].currentValue) {
@@ -93,4 +114,48 @@ export class PivotSyncfutionComponent implements OnInit {
       }
     }
   }
+//   ngOnChanges(changes: SimpleChanges): void {
+//   if (changes['dataSource']?.currentValue || changes['columns']?.currentValue) {
+//     this.dataSourceSettings = {
+//       dataSource: this.dataSource,
+//       columns: this.columns, // อาจจะไม่จำเป็นต้องกำหนดตรงนี้ ถ้าคุณใช้ Syncfusion Pivot Table มันจะจัดการ Columns อัตโนมัติจาก Rows/Values/Filter fields
+      
+//       // *** ส่วนนี้คือการแก้ไขที่สำคัญ ***
+//       values: [
+//         { name: 'ququeid', caption: 'Count of Queue ID', type: 'Count' } // ใช้ ququeid นับจำนวนรายการ
+//         // หรือถ้าคุณต้องการรวมค่าจากฟิลด์ตัวเลขอื่น เช่น 'someNumberField', type: 'Sum'
+//       ],
+//       rows: [
+//         { name: 'ququeid', caption: 'ลำดับการทำงาน' },
+//         { name: 'parentid', caption: 'ลำดับการทำงานหลัก' },
+//         { name: 'tname', caption: 'ชื่องาน' },
+//         { name: 'class_name', caption: 'ชื่อคลาส' }
+//       ],
+//       // *******************************
+
+//       expandAll: true,
+//       enableSorting: true,
+//       drilledMembers: [],
+//       filters: [],
+//       formatSettings: []
+//     };
+//     console.log(this.dataSourceSettings); // Log เพื่อตรวจสอบว่ามีการกำหนดค่าถูกต้อง
+//     console.log(this.dataSource);
+//     console.log(this.columns);
+//   }
+//   if (changes['pivotLayout']) {
+//     if (changes['pivotLayout'].currentValue) {
+//       const layout = JSON.parse(changes['pivotLayout'].currentValue);
+//       this.pivotview?.setProperties(layout);
+//     }
+//   }
+//   if (changes['sendLayout']) {
+//     if (this.pivotview) {
+//       const layout = this.pivotview?.getPersistData();
+//       if (layout) {
+//         this.layout.emit(layout);
+//       }
+//     }
+//   }
+// }
 }
\ No newline at end of file