Add dashboard.

src/app/pages/pages-routing.module.ts

@@ -6,6 +6,11 @@ import { PagesComponent } from './pages.component';
 const routes: Routes = [
   { path: 'home', component: PagesComponent },
   { path: 'tx', loadChildren: () => import('./transactions/transactions.module').then(m => m.TransactionsModule) },
+  { path: 'users', loadChildren: () => import('./users/users.module').then(m => m.UsersModule) },
+  { path: 'settings', loadChildren: () => import('./settings/settings.module').then(m => m.SettingsModule) },
+  { path: 'accounts', loadChildren: () => import('./accounts/accounts.module').then(m => m.AccountsModule) },
+  { path: 'tokens', loadChildren: () => import('./tokens/tokens.module').then(m => m.TokensModule) },
+  { path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) },
   { path: '**', redirectTo: 'home', pathMatch: 'full'}
 ];
 

src/app/pages/pages.component.html

@@ -10,9 +10,85 @@
     <app-topbar></app-topbar>
     <!-- Start Content-->
     <div class="container-fluid" appMenuSelection>
-      <div class="container">
+      <div class="card col-12">
-        <div class="row mt-5">
+        <div class="card-header">
-          <h2>Dashboard</h2>
+          <form class="form-inline">
+            <mat-form-field appearance="outline">
+              <mat-label>Filter by user : </mat-label>
+              <mat-select class="ml-2" id="filterUser">
+                <mat-option value="default">SELECT ATTRIBUTE</mat-option>
+                <mat-option value="2">2</mat-option>
+                <mat-option value="3">3</mat-option>
+                <mat-option value="4">4</mat-option>
+                <mat-option value="5">5</mat-option>
+              </mat-select>
+            </mat-form-field>
+            <mat-form-field appearance="outline" class="ml-auto">
+              <mat-label>Filter by Date</mat-label>
+              <input matInput type="text" id="filterDate" placeholder="Date">
+            </mat-form-field>
+            <button mat-raised-button type="submit" class="btn btn-outline-secondary ml-3"> FILTER </button>
+          </form>
+        </div>
+        <div class="row">
+          <div class="card col-md-8">
+            <div class="card-body">
+              <div style="display: block">
+                <canvas baseChart
+                        [datasets]="lineChartData"
+                        [labels]="lineChartLabels"
+                        [options]="lineChartOptions"
+                        [colors]="lineChartColors"
+                        [legend]="lineChartLegend"
+                        [chartType]="lineChartType"
+                        (chartHover)="chartHovered($event)"
+                        (chartClick)="chartClicked($event)">
+                </canvas>
+              </div>
+            </div>
+            <hr>
+            <div class="card-body row">
+              <div class="col-md-3 text-center">
+                <h4>MASTER WALLET BALANCE</h4>
+                <p>{{10000000 | number}} RCU</p>
+              </div>
+              <div class="col-md-3 text-center">
+                <h4>TOTAL DISTRIBUTED</h4>
+                <p>{{disbursements * 1000 | number}} RCU</p>
+              </div>
+              <div class="col-md-3 text-center">
+                <h4>TOTAL SPENT</h4>
+                <p>{{transactions * 100000 | number}} RCU</p>
+              </div>
+              <div class="col-md-3 text-center">
+                <h4>TOTAL USERS</h4>
+                <p>{{users * 10 | number}} users</p>
+              </div>
+            </div>
+            <hr>
+            <div class="card-body">
+              <div style="display: block">
+                <canvas baseChart
+                        [datasets]="barChartData"
+                        [labels]="barChartLabels"
+                        [options]="barChartOptions"
+                        [legend]="barChartLegend"
+                        [chartType]="barChartType">
+                </canvas>
+              </div>
+            </div>
+          </div>
+          <div class="card col-md-4">
+            <div class="card-body text-center">
+              <h4>TRANSFER USAGES</h4>
+              <p>Transfer Usages Will Appear Here</p>
+            </div>
+            <hr>
+            <div class="card-body">
+              <h4 class="text-center">PARTNER LIVE FEED</h4>
+
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -22,4 +98,3 @@
   <!-- End Page content -->
   <!-- ============================================================== -->
 </div>
-

src/app/pages/pages.component.ts

@@ -1,4 +1,6 @@
 import { Component, OnInit } from '@angular/core';
+import {Color, Label} from 'ng2-charts';
+import {ChartDataSets, ChartOptions, ChartType} from 'chart.js';
 
 @Component({
   selector: 'app-pages',
@@ -6,10 +8,134 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./pages.component.scss']
 })
 export class PagesComponent implements OnInit {
+  disbursements: number = 0;
+  users: number = 0;
+  transactions: number = 0;
+  public lineChartData: ChartDataSets[] = [
+    { data: [65, 59, 80, 81, 56, 55, 40], label: 'User Registration'},
+    { data: [28, 48, 40, 19, 86, 27, 90], label: 'Transaction Volumes'},
+    { data: [180, 480, 770, 90, 1000, 270, 400], label: 'Token Disbursements', yAxisID: 'y-axis-1'}
+  ];
+
+  public lineChartLabels: Label[] = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
+
+  public lineChartOptions: (ChartOptions & { annotation: any }) = {
+    responsive: true,
+    scales: {
+      // We use this empty structure as a placeholder for dynamic theming.
+      xAxes: [{}],
+      yAxes: [
+        {
+          id: 'y-axis-0',
+          position: 'left',
+        },
+        {
+          id: 'y-axis-1',
+          position: 'right',
+          gridLines: {
+            color: 'rgba(255,0,0,0.3)',
+          },
+          ticks: {
+            fontColor: 'red',
+          }
+        }
+      ]
+    },
+    annotation: {
+      annotations: [
+        {
+          type: 'line',
+          mode: 'vertical',
+          scaleID: 'x-axis-0',
+          value: 'March',
+          borderColor: 'orange',
+          borderWidth: 2,
+          label: {
+            enabled: true,
+            fontColor: 'orange',
+            content: 'LineAnno'
+          }
+        },
+      ],
+    },
+  };
+
+  public lineChartColors: Color[] = [
+    { // grey
+      backgroundColor: 'rgba(148,159,177,0.2)',
+      borderColor: 'rgba(148,159,177,1)',
+      pointBackgroundColor: 'rgba(148,159,177,1)',
+      pointBorderColor: '#fff',
+      pointHoverBackgroundColor: '#fff',
+      pointHoverBorderColor: 'rgba(148,159,177,0.8)'
+    },
+    { // dark grey
+      backgroundColor: 'rgba(77,83,96,0.2)',
+      borderColor: 'rgba(77,83,96,1)',
+      pointBackgroundColor: 'rgba(77,83,96,1)',
+      pointBorderColor: '#fff',
+      pointHoverBackgroundColor: '#fff',
+      pointHoverBorderColor: 'rgba(77,83,96,1)'
+    },
+    { // red
+      backgroundColor: 'rgba(255,0,0,0.3)',
+      borderColor: 'red',
+      pointBackgroundColor: 'rgba(148,159,177,1)',
+      pointBorderColor: '#fff',
+      pointHoverBackgroundColor: '#fff',
+      pointHoverBorderColor: 'rgba(148,159,177,0.8)'
+    }
+  ];
+
+  public lineChartLegend = true;
+  public lineChartType = 'line';
+
+  public barChartOptions: ChartOptions = {
+    responsive: true,
+    // We use these empty structures as placeholders for dynamic theming.
+    scales: { xAxes: [{}], yAxes: [{}] },
+    plugins: {
+      datalabels: {
+        anchor: 'end',
+        align: 'end',
+      }
+    }
+  };
+  public barChartLabels: Label[] = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
+  public barChartType: ChartType = 'horizontalBar';
+  public barChartLegend = true;
+  public barChartData: ChartDataSets[] = [
+    { data: [65, 59, 80, 81, 56, 55, 40], label: 'New Users'},
+    { data: [28, 48, 40, 19, 86, 27, 90], label: 'Recurrent Users'}
+  ];
 
   constructor() { }
 
   ngOnInit(): void {
+    this.newDataPoint([50, 80], 'August');
+    // this.disbursements = this.lineChartData.find(data => data.label === 'Token Disbursements')
+    //   .data.reduce((accumulator, current) => accumulator + current, 0);
+    // this.users = this.barChartData.find(data => data.label === 'New Users')
+    //   .data.reduce((accumulator, current) => accumulator + current, 0);
+    // this.transactions = this.lineChartData.find(data => data.label === 'Transaction Volumes')
+    //   .data.reduce((accumulator, current) => accumulator + current, 0);
   }
 
+  newDataPoint(dataArr: any[], label: string): void {
+    this.barChartData.forEach((dataset, index) => {
+      this.barChartData[index] = Object.assign({}, this.barChartData[index], {
+        data: [...this.barChartData[index].data, dataArr[index]]
+      });
+    });
+
+    this.barChartLabels = [...this.barChartLabels, label];
+  }
+
+  public chartClicked({ event, active}: { event: MouseEvent, active: {}[] }): void {
+    console.log(event, active);
+  }
+
+  public chartHovered({ event, active }: { event: MouseEvent, active: {}[] }): void {
+    console.log(event, active);
+  }
 }

src/app/pages/pages.module.ts

@@ -4,6 +4,11 @@ import { CommonModule } from '@angular/common';
 import { PagesRoutingModule } from './pages-routing.module';
 import { PagesComponent } from './pages.component';
 import {SharedModule} from '../shared/shared.module';
+import {ChartsModule} from 'ng2-charts';
+import {MatButtonModule} from '@angular/material/button';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatSelectModule} from '@angular/material/select';
+import {MatInputModule} from '@angular/material/input';
 
 
 @NgModule({
@@ -11,7 +16,12 @@ import {SharedModule} from '../shared/shared.module';
   imports: [
     CommonModule,
     PagesRoutingModule,
-    SharedModule
+    SharedModule,
+    ChartsModule,
+    MatButtonModule,
+    MatFormFieldModule,
+    MatSelectModule,
+    MatInputModule
   ]
 })
 export class PagesModule { }