update user-payment-statistic

Author: nguyentramy1

src/app/features/statistics/pages/user-payment-statistic/user-payment-statistic.component.html

@@ -39,13 +39,37 @@ <h1>Thống kê tiền nạp</h1>
     </div>
 
     <div class="charts-grid">
+      <!-- Bar chart cho Nạp & Mua -->
       <div class="chart-wrapper">
-        <app-multi-line-chart
+        <app-multi-chart
           [categories]="chartCategories"
-          [seriesData]="chartSeries"
-        ></app-multi-line-chart>
+          [seriesData]="barChartSeries"
+          [title]="
+            'Thống kê Nạp & Mua theo ngày trong tháng ' +
+            selectedMonth +
+            '/' +
+            selectedYear
+          "
+          [type]="'bar'"
+        ></app-multi-chart>
+      </div>
+
+      <!-- Line chart cho Số dư ví -->
+      <div class="chart-wrapper">
+        <app-multi-chart
+          [categories]="chartCategories"
+          [seriesData]="lineChartSeries"
+          [title]="
+            'Thống kê Số dư ví theo ngày trong tháng ' +
+            selectedMonth +
+            '/' +
+            selectedYear
+          "
+          [type]="'line'"
+        ></app-multi-chart>
       </div>
     </div>
+
     <!-- Bảng chi tiết -->
     <div class="table-wrapper">
       <app-table

src/app/features/statistics/pages/user-payment-statistic/user-payment-statistic.component.ts

@@ -11,11 +11,12 @@ import {
 } from '../../../../core/models/statistics.model';
 import { LineChartComponent } from '../../../../shared/components/my-shared/line-chart/line-chart';
 import { TableComponent } from '../../../../shared/components/my-shared/table/table.component';
-import { MultiLineChartComponent } from '../../../../shared/components/my-shared/multi-line-chart/multi-line-chart';
+import { MultiChartComponent } from '../../../../shared/components/my-shared/multi-chart/multi-chart';
 
 @Component({
   selector: 'app-user-payment-statistics',
-  imports: [CommonModule, FormsModule, MultiLineChartComponent, TableComponent],
+  standalone: true,
+  imports: [CommonModule, FormsModule, MultiChartComponent, TableComponent],
   templateUrl: './user-payment-statistic.component.html',
   styleUrls: ['./user-payment-statistic.component.scss'],
 })
@@ -114,7 +115,8 @@ export class UserPaymentStatisticsComponent implements OnInit, OnDestroy {
 
   // chart data
   chartCategories: string[] = [];
-  chartSeries: { name: string; data: number[] }[] = [];
+  barChartSeries: { name: string; data: number[] }[] = [];
+  lineChartSeries: { name: string; data: number[] }[] = [];
 
   constructor(private statisticsService: StatisticsService) {}
 
@@ -141,20 +143,17 @@ export class UserPaymentStatisticsComponent implements OnInit, OnDestroy {
 
     this.calculateTotals(this.paymentData);
     // ✅ Gán dữ liệu BE vào chart
-    const { categories, seriesData } = this.convertToChartData(
-      this.paymentData
-    );
+    const { categories, barSeriesData, lineSeriesData } =
+      this.convertToChartData(this.paymentData);
     this.chartCategories = categories;
-    this.chartSeries = seriesData;
+    this.barChartSeries = barSeriesData;
+    this.lineChartSeries = lineSeriesData;
 
     // ✅ Tính tổng nạp + chi
     this.calculateTotals(this.paymentData);
 
     // ✅ Chuẩn bị dữ liệu 2 bảng
     this.splitDataForTables(this.paymentData);
-    console.log('Filtered Data:', this.paymentData);
-    console.log(this.chartCategories);
-    console.log(this.chartSeries);
   }
 
   loadPayment(): void {
@@ -174,11 +173,11 @@ export class UserPaymentStatisticsComponent implements OnInit, OnDestroy {
 
             this.calculateTotals(this.paymentData);
             // ✅ Gán dữ liệu BE vào chart
-            const { categories, seriesData } = this.convertToChartData(
-              this.paymentData
-            );
+            const { categories, barSeriesData, lineSeriesData } =
+              this.convertToChartData(this.paymentData);
             this.chartCategories = categories;
-            this.chartSeries = seriesData;
+            this.barChartSeries = barSeriesData;
+            this.lineChartSeries = lineSeriesData;
 
             // ✅ Tính tổng nạp + chi
             this.calculateTotals(this.paymentData);
@@ -207,31 +206,31 @@ export class UserPaymentStatisticsComponent implements OnInit, OnDestroy {
   }
 
   convertToChartData(data: any[]) {
-    const categories = data.map((item) => {
-      item.day;
-      console.log('Item day:', item.day);
-      return item.day;
-    });
+    const categories = data.map((item) => item.day);
 
-    const seriesData = [
+    // Dữ liệu cho Bar chart (Nạp + Mua)
+    const barSeriesData = [
       {
-        name: 'Deposit',
+        name: 'Tiền nạp',
         data: data.map((item) => item.depositAmount),
       },
       {
-        name: 'Purchase',
+        name: 'Tiền mua',
         data: data.map((item) => item.purchaseAmount),
       },
+    ];
+
+    // Dữ liệu cho Line chart (Wallet)
+    const lineSeriesData = [
       {
-        name: 'Wallet Balance',
+        name: 'Số dư ví',
         data: data.map((item) => item.walletBalance),
       },
     ];
 
-    console.log('categories:', categories);
-    console.log('seriesData:', seriesData);
-    return { categories, seriesData };
+    return { categories, barSeriesData, lineSeriesData };
   }
+
   // table
   tableDepositHeaders = [
     { label: 'Ngày', value: 'day' },

src/app/features/student-statistic/test-statistic/student-statistic.component.html

@@ -112,7 +112,6 @@
         ]
       }
     ]"
-    [height]="350"
     [chartTitle]="'Tỷ lệ hoàn thành bài của học sinh trong tổ chức'"
   ></fx-line-chart>
 

src/app/shared/components/my-shared/line-chart/line-chart.ts

@@ -19,7 +19,6 @@ import {
   ApexFill,
 } from 'ng-apexcharts';
 
-
 export type ChartOptions = {
   series: ApexAxisChartSeries;
   chart: ApexChart;

src/app/shared/components/my-shared/multi-chart/multi-chart.html

@@ -0,0 +1,25 @@
+<div class="chart-container">
+  @if (this.title) {
+  <div class="chart-title">{{ title }}</div>
+  } @if (chartOptions.series.length && chartOptions.xaxis.categories.length) {
+  <div class="chart-body">
+    <apx-chart
+      [series]="chartOptions.series"
+      [chart]="chartOptions.chart"
+      [dataLabels]="chartOptions.dataLabels"
+      [plotOptions]="chartOptions.plotOptions"
+      [yaxis]="chartOptions.yaxis"
+      [legend]="chartOptions.legend"
+      [fill]="chartOptions.fill"
+      [stroke]="chartOptions.stroke"
+      [tooltip]="chartOptions.tooltip"
+      [xaxis]="chartOptions.xaxis"
+    ></apx-chart>
+  </div>
+  } @else {
+  <div class="chart-error">
+    Lỗi: Thiếu dữ liệu đầu vào bắt buộc hoặc dữ liệu không hợp lệ để hiển thị
+    biểu đồ.
+  </div>
+  }
+</div>

src/app/shared/components/my-shared/multi-chart/multi-chart.scss

@@ -0,0 +1,20 @@
+.chart-container {
+  width: 100%;
+}
+
+.chart-title {
+  text-align: center;
+  font-weight: bold;
+  margin-bottom: 12px;
+}
+
+.chart-body {
+  width: 100%;
+  height: 400px; // 👈 đặt chiều cao rõ ràng
+}
+
+apx-chart {
+  display: block;
+  width: 100% !important;
+  height: 100% !important;
+}

src/app/shared/components/my-shared/multi-line-chart/multi-line-chart.ts renamed to src/app/shared/components/my-shared/multi-chart/multi-chart.ts

@@ -17,10 +17,12 @@ import {
   ApexXAxis,
   ApexFill,
   ApexTooltip,
+  ApexTitleSubtitle,
   NgApexchartsModule,
 } from 'ng-apexcharts';
 
 export type ChartOptions = {
+  responsive: any;
   series: ApexAxisChartSeries;
   chart: ApexChart;
   dataLabels: ApexDataLabels;
@@ -31,34 +33,40 @@ export type ChartOptions = {
   tooltip: ApexTooltip;
   stroke: ApexStroke;
   legend: ApexLegend;
+  title: ApexTitleSubtitle;
 };
 
 @Component({
-  selector: 'app-multi-line-chart',
-  templateUrl: './multi-line-chart.html',
-  styleUrls: ['./multi-line-chart.scss'],
+  selector: 'app-multi-chart',
+  templateUrl: './multi-chart.html',
+  styleUrls: ['./multi-chart.scss'],
   imports: [NgApexchartsModule],
   standalone: true,
 })
-export class MultiLineChartComponent implements OnChanges {
+export class MultiChartComponent implements OnChanges {
   @ViewChild('chart') chart!: ChartComponent;
 
-  // ✅ Nhận categories và series động từ bên ngoài
+  // ✅ Nhận đầu vào động
   @Input() categories: string[] = [];
   @Input() seriesData: ApexAxisChartSeries = [];
+  @Input() title: string = '';
+  @Input() type: 'bar' | 'line' = 'bar'; // 👈 loại biểu đồ
 
   public chartOptions: ChartOptions = {
     series: [],
     chart: {
-      type: 'bar',
-      height: 350,
+      type: 'bar', // mặc định
+      height: '100%', // 👈 thay vì 350 fix cứng
+      width: '100%', // 👈 ép full width
+      zoom: {
+        enabled: false,
+      },
     },
     dataLabels: {
       enabled: true,
     },
     stroke: {
-      curve: 'smooth',
-      width: 2,
+      curve: 'smooth', // 👈 chỉ giữ curve
     },
     xaxis: {
       categories: [],
@@ -70,9 +78,7 @@ export class MultiLineChartComponent implements OnChanges {
     },
     tooltip: {
       y: {
-        formatter: function (val: number) {
-          return val + ' VND';
-        },
+        formatter: (val: number) => val + ' VND',
       },
     },
     legend: {
@@ -82,21 +88,33 @@ export class MultiLineChartComponent implements OnChanges {
       opacity: 1,
     },
     plotOptions: {
-      bar: {
-        columnWidth: '55%',
-        borderRadius: 5,
-      },
+      bar: {}, // 👈 để trống, không set width/border
+    },
+    title: {
+      text: '',
+      align: 'center',
     },
+    responsive: undefined,
   };
 
   ngOnChanges(changes: SimpleChanges): void {
     this.updateChart();
   }
 
   private updateChart() {
+    // cập nhật loại chart
+    this.chartOptions.chart.type = this.type;
+
+    // nếu là line thì bỏ plotOptions.bar đi
+    if (this.type === 'line') {
+      this.chartOptions.plotOptions = {} as ApexPlotOptions;
+    }
+
     this.chartOptions.series = this.seriesData;
-    this.chartOptions.xaxis = {
-      categories: this.categories,
+    this.chartOptions.xaxis = { categories: this.categories };
+    this.chartOptions.title = {
+      text: this.title,
+      align: 'center',
     };
   }
 }