Add dashboard.

This commit is contained in:
Spencer Ofwiti 2020-11-25 11:04:41 +03:00
parent f34894e80a
commit fb63c5d504
4 changed files with 221 additions and 5 deletions

View File

@ -6,6 +6,11 @@ import { PagesComponent } from './pages.component';
const routes: Routes = [ const routes: Routes = [
{ path: 'home', component: PagesComponent }, { path: 'home', component: PagesComponent },
{ path: 'tx', loadChildren: () => import('./transactions/transactions.module').then(m => m.TransactionsModule) }, { 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'} { path: '**', redirectTo: 'home', pathMatch: 'full'}
]; ];

View File

@ -10,9 +10,85 @@
<app-topbar></app-topbar> <app-topbar></app-topbar>
<!-- Start Content--> <!-- Start Content-->
<div class="container-fluid" appMenuSelection> <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> </div>
</div> </div>
@ -22,4 +98,3 @@
<!-- End Page content --> <!-- End Page content -->
<!-- ============================================================== --> <!-- ============================================================== -->
</div> </div>

View File

@ -1,4 +1,6 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import {Color, Label} from 'ng2-charts';
import {ChartDataSets, ChartOptions, ChartType} from 'chart.js';
@Component({ @Component({
selector: 'app-pages', selector: 'app-pages',
@ -6,10 +8,134 @@ import { Component, OnInit } from '@angular/core';
styleUrls: ['./pages.component.scss'] styleUrls: ['./pages.component.scss']
}) })
export class PagesComponent implements OnInit { 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() { } constructor() { }
ngOnInit(): void { 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);
}
} }

View File

@ -4,6 +4,11 @@ import { CommonModule } from '@angular/common';
import { PagesRoutingModule } from './pages-routing.module'; import { PagesRoutingModule } from './pages-routing.module';
import { PagesComponent } from './pages.component'; import { PagesComponent } from './pages.component';
import {SharedModule} from '../shared/shared.module'; 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({ @NgModule({
@ -11,7 +16,12 @@ import {SharedModule} from '../shared/shared.module';
imports: [ imports: [
CommonModule, CommonModule,
PagesRoutingModule, PagesRoutingModule,
SharedModule SharedModule,
ChartsModule,
MatButtonModule,
MatFormFieldModule,
MatSelectModule,
MatInputModule
] ]
}) })
export class PagesModule { } export class PagesModule { }