117 lines
4.6 KiB
HTML
117 lines
4.6 KiB
HTML
<!-- Begin page -->
|
|
<div class="wrapper">
|
|
<app-sidebar></app-sidebar>
|
|
|
|
<!-- ============================================================== -->
|
|
<!-- Start Page Content here -->
|
|
<!-- ============================================================== -->
|
|
|
|
<div id="content">
|
|
<app-topbar></app-topbar>
|
|
<!-- Start Content-->
|
|
<div class="container-fluid" appMenuSelection>
|
|
<nav aria-label="breadcrumb">
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item active" aria-current="page">Home</li>
|
|
</ol>
|
|
</nav>
|
|
<div class="card">
|
|
<mat-card-title class="card-header">
|
|
CICADA DASHBOARD
|
|
</mat-card-title>
|
|
<div class="col-12">
|
|
<div class="card-body">
|
|
<mat-form-field appearance="outline">
|
|
<mat-label>Filter by location : </mat-label>
|
|
<mat-select class="ml-2" id="filterUser">
|
|
<div *ngFor="let county of locations; trackBy: trackByName">
|
|
<div *ngFor="let district of county.districts; trackBy: trackByName">
|
|
<mat-optgroup *ngFor="let location of district.locations; trackBy: trackByName" [label]="county.name + ' / ' + district.name + ' / ' + location.name">
|
|
<mat-option *ngFor="let village of location.villages; trackBy: trackByName" [value]="village">
|
|
{{village}}
|
|
</mat-option>
|
|
</mat-optgroup>
|
|
</div>
|
|
</div>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
</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>
|
|
<div style="display: block">
|
|
<canvas baseChart
|
|
[data]="transferUsagesChartData"
|
|
[labels]="transferUsagesChartLabels"
|
|
[options]="transferUsagesChartOptions"
|
|
[colors]="transferUsagesChartColors"
|
|
[legend]="transferUsagesChartLegend"
|
|
[chartType]="transferUsagesChartType">
|
|
</canvas>
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<div class="card-body">
|
|
<h4 class="text-center">PARTNER LIVE FEED</h4>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<app-footer appMenuSelection></app-footer>
|
|
</div>
|
|
<!-- ============================================================== -->
|
|
<!-- End Page content -->
|
|
<!-- ============================================================== -->
|
|
</div>
|