Add dashboard.
This commit is contained in:
Spencer Ofwiti
parent
f34894e80a
commit
fb63c5d504
@ -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'}
|
||||
];
|
||||
|
||||
|
||||
@ -10,9 +10,85 @@
|
||||
<app-topbar></app-topbar>
|
||||
<!-- Start Content-->
|
||||
<div class="container-fluid" appMenuSelection>
|
||||
<div class="container">
|
||||
<div class="row mt-5">
|
||||
<h2>Dashboard</h2>
|
||||
<div class="card col-12">
|
||||
<div class="card-header">
|
||||
<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>
|
||||
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 { }
|
||||
|
||||
Loading…
Reference in New Issue
Block a user