Fix implement Dashboard charts and data table.

apps/angular/projects/ordering/src/ordering-routing.module.ts

@@ -1,9 +1,12 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { DashboardComponent } from './pages/dashboard/dashboard.component';
 
 const routes: Routes = [
-  { path: '', component: DashboardComponent, pathMatch: 'full' },
+  {
+    path: '',
+    loadChildren: () => import('./pages/dashboard/dashboard.module').then(m => m.DashboardModule),
+    pathMatch: 'full',
+  },
   {
     path: 'orders',
     loadChildren: () => import('./pages/orders/orders.module').then(m => m.OrdersModule),

apps/angular/projects/ordering/src/ordering.module.ts

@@ -1,12 +1,9 @@
 import { NgModule } from '@angular/core';
 import { OrderingRoutingModule } from './ordering-routing.module';
-import { DashboardComponent } from './pages/dashboard/dashboard.component';
-import { TopSellingComponent } from './pages/dashboard/components/top-selling/top-selling.component';
-import { CommonModule } from '@angular/common';
 
 @NgModule({
-  declarations: [DashboardComponent, TopSellingComponent],
-  imports: [OrderingRoutingModule, CommonModule],
+  declarations: [],
+  imports: [OrderingRoutingModule],
   exports: [],
 })
 export class OrderingModule {}

apps/angular/projects/ordering/src/pages/dashboard/components/order-status-chart/order-status-chart.component.html

@@ -0,0 +1,18 @@
+
+<div class="card">
+  <div class="card-header">
+    <div class="row">
+      <div class="col col-md-12">
+        <h5 class="card-title">{{ 'OrderingService::OrderStatuses' | abpLocalization }}</h5>
+      </div>
+    </div>
+  </div>
+  <div class="card-body" >
+    <abp-chart
+      type="bar"
+      [data]="chartData"
+      [responsive]="true"
+    ></abp-chart>
+  </div>
+</div>
+

apps/angular/projects/ordering/src/pages/dashboard/components/order-status-chart/order-status-chart.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { OrderStatusChartComponent } from './order-status-chart.component';
+
+describe('OrderStatusChartComponent', () => {
+  let component: OrderStatusChartComponent;
+  let fixture: ComponentFixture<OrderStatusChartComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ OrderStatusChartComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(OrderStatusChartComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

apps/angular/projects/ordering/src/pages/dashboard/components/order-status-chart/order-status-chart.component.ts

@@ -0,0 +1,25 @@
+import { Component, Input } from '@angular/core';
+import { OrderStatusDto } from '../../../../lib/proxy/orders';
+
+@Component({
+  selector: 'app-order-status-chart',
+  templateUrl: './order-status-chart.component.html',
+})
+export class OrderStatusChartComponent {
+  @Input()
+  set data(value: OrderStatusDto[]) {
+    this.chartData.labels = [...value.map(x => x.orderStatus)];
+    this.chartData.datasets = [
+      {
+        label: 'Order Statuses',
+        data: [...value.map(x => x.countOfStatusOrder)],
+        backgroundColor: ['#fdcb6e', '#0984e3', '#ff7675'],
+      },
+    ];
+  }
+
+  chartData = {
+    labels: [],
+    datasets: [],
+  };
+}

apps/angular/projects/ordering/src/pages/dashboard/components/payments-chart/payments-chart.component.html

@@ -0,0 +1,19 @@
+
+<div class="card">
+  <div class="card-header">
+    <div class="row">
+      <div class="col col-md-12">
+        <h5 class="card-title">{{ 'OrderingService::OrderStatuses' | abpLocalization }}</h5>
+      </div>
+    </div>
+  </div>
+  <div class="card-body" >
+    <abp-chart
+      type="doughnut"
+      [data]="chartData"
+      [options]="options"
+      [responsive]="true"
+    ></abp-chart>
+  </div>
+</div>
+

apps/angular/projects/ordering/src/pages/dashboard/components/payments-chart/payments-chart.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PaymentsChartComponent } from './payments-chart.component';
+
+describe('PaymentsChartComponent', () => {
+  let component: PaymentsChartComponent;
+  let fixture: ComponentFixture<PaymentsChartComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PaymentsChartComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PaymentsChartComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

apps/angular/projects/ordering/src/pages/dashboard/components/payments-chart/payments-chart.component.ts

@@ -0,0 +1,38 @@
+import { Component, Input } from '@angular/core';
+import { PaymentDto } from '../../../../lib/proxy/orders';
+
+@Component({
+  selector: 'app-payments-chart',
+  templateUrl: './payments-chart.component.html',
+})
+export class PaymentsChartComponent {
+  @Input()
+  set data(value: PaymentDto[]) {
+    this.chartData.datasets = [
+      {
+        label: 'Order Statuses',
+        data: [...value.map(x => x.rateOfPaymentMethod)],
+        backgroundColor: ['#fdcb6e', '#0984e3', '#ff7675'],
+      },
+    ];
+    this.chartData.labels = [...value.map(x => x.paymentMethod)];
+  }
+
+  chartData = {
+    labels: [],
+    datasets: [],
+  };
+
+  options = {
+    plugins: {
+      title: {
+        display: true,
+        text: 'Payment Methods',
+        fontSize: 16,
+      },
+      legend: {
+        position: 'bottom',
+      },
+    },
+  };
+}

apps/angular/projects/ordering/src/pages/dashboard/components/top-selling/top-selling.component.html

@@ -1,4 +1,24 @@
-<p>top-selling works!</p>
-<div *ngIf="topSellingProducts">
-  count {{ topSellingProducts.length}}
+<div class="card">
+  <div class="card-header">
+    <div class="row">
+      <div class="col col-md-12">
+        <h5 class="card-title">{{ 'OrderingService::TopSelling' | abpLocalization }}</h5>
+      </div>
+    </div>
+  </div>
+  <div class="card-body"  *ngIf="topSellingProducts">
+
+    <ngx-datatable [rows]="topSellingProducts" [count]="topSellingProducts.length" default>
+      <ngx-datatable-column
+        [name]="'OrderingService::DisplayName:productName' | abpLocalization"
+        prop="productName"
+      ></ngx-datatable-column>
+      <ngx-datatable-column
+        [name]="'OrderingService::DisplayName:units' | abpLocalization"
+        prop="units"
+      ></ngx-datatable-column>
+
+    </ngx-datatable>
+  </div>
 </div>
+

apps/angular/projects/ordering/src/pages/dashboard/components/top-selling/top-selling.component.ts

@@ -4,7 +4,6 @@ import { TopSellingDto } from '../../../../lib/proxy/order-items';
 @Component({
   selector: 'app-top-selling',
   templateUrl: './top-selling.component.html',
-  styleUrls: ['./top-selling.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TopSellingComponent {

apps/angular/projects/ordering/src/pages/dashboard/dashboard-routing.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { DashboardComponent } from './dashboard.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: DashboardComponent,
+    // canActivate: [AuthGuard, PermissionGuard],
+    // data: {
+    //   requiredPolicy: eCatalogPolicyNames.ProductManagement,
+    // },
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class DashboardRoutingModule {}

apps/angular/projects/ordering/src/pages/dashboard/dashboard.component.html

@@ -1,7 +1,19 @@
 <p>dashboard works!</p>
 
 
-<div *ngIf="dashboard$ |async as dashboard">
-  <app-top-selling [topSellingProducts]="dashboard.topSellings">
-  </app-top-selling>
+<div *ngIf="dashboard$ | async as dashboard">
+    <div class="row">
+      <div class="col col-md-9">
+        <app-top-selling [topSellingProducts]="dashboard.topSellings">
+        </app-top-selling>
+      </div>
+      <div class="col col-md-3">
+        <app-order-status-chart [data]="dashboard.orderStatusDto">
+        </app-order-status-chart>
+      </div>
+      <div class="col col-md-3">
+        <app-payments-chart [data]="dashboard.payments">
+        </app-payments-chart>
+      </div>
+    </div>
 </div>

apps/angular/projects/ordering/src/pages/dashboard/dashboard.module.ts

@@ -0,0 +1,25 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ProductRoutingModule } from '@eshoponabp/catalog';
+import { ThemeSharedModule } from '@abp/ng.theme.shared';
+import { CoreModule } from '@abp/ng.core';
+import { DashboardRoutingModule } from './dashboard-routing.module';
+import { DashboardComponent } from './dashboard.component';
+import { TopSellingComponent } from './components/top-selling/top-selling.component';
+import { OrderStatusChartComponent } from './components/order-status-chart/order-status-chart.component';
+import { ChartModule } from '@abp/ng.components/chart.js';
+import { PaymentsChartComponent } from './components/payments-chart/payments-chart.component';
+
+@NgModule({
+  declarations: [DashboardComponent, TopSellingComponent, OrderStatusChartComponent, PaymentsChartComponent],
+  imports: [
+    DashboardRoutingModule,
+    CommonModule,
+    ProductRoutingModule,
+    CommonModule,
+    ThemeSharedModule,
+    CoreModule,
+    ChartModule,
+  ],
+})
+export class DashboardModule {}