diff --git a/src/app/pages/pages-routing.module.ts b/src/app/pages/pages-routing.module.ts
index 2d26057..695579e 100644
--- a/src/app/pages/pages-routing.module.ts
+++ b/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'}
];
diff --git a/src/app/pages/pages.component.html b/src/app/pages/pages.component.html
index 28fb2c5..ba8b31c 100644
--- a/src/app/pages/pages.component.html
+++ b/src/app/pages/pages.component.html
@@ -10,9 +10,85 @@
-
-
-
Dashboard
+
+
+
+
+
+
+
+
+
MASTER WALLET BALANCE
+
{{10000000 | number}} RCU
+
+
+
TOTAL DISTRIBUTED
+
{{disbursements * 1000 | number}} RCU
+
+
+
TOTAL SPENT
+
{{transactions * 100000 | number}} RCU
+
+
+
TOTAL USERS
+
{{users * 10 | number}} users
+
+
+
+
+
+
+
+
TRANSFER USAGES
+
Transfer Usages Will Appear Here
+
+
+
+
PARTNER LIVE FEED
+
+
+
@@ -22,4 +98,3 @@
-
diff --git a/src/app/pages/pages.component.ts b/src/app/pages/pages.component.ts
index 12f33d4..1466021 100644
--- a/src/app/pages/pages.component.ts
+++ b/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);
+ }
}
diff --git a/src/app/pages/pages.module.ts b/src/app/pages/pages.module.ts
index 9dc105c..45aa61d 100644
--- a/src/app/pages/pages.module.ts
+++ b/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 { }