Added WIP All purchases chart
This commit is contained in:
Tom Slater
parent
7a6f40e300
commit
e7441bf47a
6 changed files with 141 additions and 32 deletions
|
|
@ -150,7 +150,7 @@
|
||||||
</div><!--/.row-->
|
</div><!--/.row-->
|
||||||
<div class="chart-wrapper">
|
<div class="chart-wrapper">
|
||||||
<canvas baseChart class="chart"
|
<canvas baseChart class="chart"
|
||||||
[datasets]="barChartDataCategory"
|
[datasets]="barChartDataCategoryAll"
|
||||||
[labels]="barChartLabelsCategory"
|
[labels]="barChartLabelsCategory"
|
||||||
[options]="barChartOptionsCategory"
|
[options]="barChartOptionsCategory"
|
||||||
[legend]="barChartLegendCategory"
|
[legend]="barChartLegendCategory"
|
||||||
|
|
|
||||||
|
|
@ -100,6 +100,7 @@ export class DashboardCustomerComponent implements OnInit {
|
||||||
public barChartLegendCategory:boolean = false;
|
public barChartLegendCategory:boolean = false;
|
||||||
public barChartDataCategory:any[]=[];
|
public barChartDataCategory:any[]=[];
|
||||||
public barChartLabelsCategory:string[] = [];
|
public barChartLabelsCategory:string[] = [];
|
||||||
|
public barChartDataCategoryAll:any[]=[];
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -75,4 +75,105 @@
|
||||||
<div class="col-xl-6">
|
<div class="col-xl-6">
|
||||||
<org-pie-panel></org-pie-panel>
|
<org-pie-panel></org-pie-panel>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="col-xl-6">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-block">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12">
|
||||||
|
<h4 class="card-title mb-0">Monthly Spending by Category</h4>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="chart-wrapper">
|
||||||
|
<canvas baseChart
|
||||||
|
[datasets]="barChartDataCategory"
|
||||||
|
[labels]="barChartLabelsCategory"
|
||||||
|
[options]="barChartOptionsCategory"
|
||||||
|
[legend]="barChartLegendCategory"
|
||||||
|
[chartType]="barChartTypeCategory"
|
||||||
|
(chartHover)="chartHovered($event)"
|
||||||
|
(chartClick)="chartClicked($event)"></canvas>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-xl-6">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-block">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12">
|
||||||
|
<h4 class="card-title float-left mb-0">Weekly Purchase No.</h4>
|
||||||
|
</div><!--/.col-->
|
||||||
|
</div><!--/.row-->
|
||||||
|
<div class="chart-wrapper">
|
||||||
|
<ul class="horizontal-bars type-2">
|
||||||
|
<li>
|
||||||
|
<span class="title">This Week</span>
|
||||||
|
<span class="value">{{ (weekPurchaseList.first || 0 ) }} <span class="text-muted small">
|
||||||
|
({{ (weekPurchaseList.first || 0 ) / weekPurchaseList.max | percent:'1.0-0' }})</span></span>
|
||||||
|
<div class="bars">
|
||||||
|
<div class="progress" style="height: 6px;">
|
||||||
|
<div class="progress-bar bg-success" role="progressbar"
|
||||||
|
[style.width]="(weekPurchaseList.first || 0 ) / weekPurchaseList.max | percent:'1.0-0'" aria-valuemin="0" aria-valuemax="100"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<span class="title">Last Week</span>
|
||||||
|
<span class="value">{{ weekPurchaseList.second || 0 }} <span class="text-muted small">
|
||||||
|
({{ (weekPurchaseList.second || 0 ) / weekPurchaseList.max | percent:'1.0-0' }})</span></span>
|
||||||
|
<div class="bars">
|
||||||
|
<div class="progress" style="height: 6px;">
|
||||||
|
<div class="progress-bar bg-success" role="progressbar"
|
||||||
|
[style.width]="(weekPurchaseList.second || 0 ) / weekPurchaseList.max | percent:'1.0-0'" aria-valuemin="0" aria-valuemax="100"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<span class="title">Week Maximum</span>
|
||||||
|
<span class="value">{{ weekPurchaseList.max || 0 }} <span class="text-muted small">
|
||||||
|
(100%)</span></span>
|
||||||
|
<div class="bars">
|
||||||
|
<div class="progress" style="height: 6px;">
|
||||||
|
<div class="progress-bar bg-success" role="progressbar"
|
||||||
|
style="width: 100%" aria-valuemin="0" aria-valuemax="100"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<span class="title">Weekly Average</span>
|
||||||
|
<span class="value">{{ (weekPurchaseList.sum / weekPurchaseList.count) || 0 | number:'1.0-0'}} <span class="text-muted small">
|
||||||
|
({{ ((weekPurchaseList.sum / weekPurchaseList.count) || 0) / weekPurchaseList.max | percent:'1.0-0' }})</span></span>
|
||||||
|
<div class="bars">
|
||||||
|
<div class="progress" style="height: 6px;">
|
||||||
|
<div class="progress-bar bg-success" role="progressbar"
|
||||||
|
[style.width]="((weekPurchaseList.sum / weekPurchaseList.count) || 0) / weekPurchaseList.max | percent:'1.0-0'" aria-valuemin="0" aria-valuemax="100"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-xl-6">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-block">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12">
|
||||||
|
<h4 class="card-title float-left mb-0">All Purchases by Category</h4>
|
||||||
|
</div><!--/.col-->
|
||||||
|
</div><!--/.row-->
|
||||||
|
<div class="chart-wrapper">
|
||||||
|
<canvas baseChart class="chart"
|
||||||
|
[datasets]="barChartDataCategory"
|
||||||
|
[labels]="barChartLabelsCategory"
|
||||||
|
[options]="barChartOptionsCategory"
|
||||||
|
[legend]="barChartLegendCategory"
|
||||||
|
[chartType]="barChartTypeCategory"
|
||||||
|
(chartHover)="chartHovered($event)"
|
||||||
|
(chartClick)="chartClicked($event)"></canvas>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -130,6 +130,7 @@ export class DashboardComponent {
|
||||||
public barChartDataCategory:any[]=[];
|
public barChartDataCategory:any[]=[];
|
||||||
public barChartLabelsCategory:string[] = [];
|
public barChartLabelsCategory:string[] = [];
|
||||||
|
|
||||||
|
|
||||||
public lineChartDataSector: ChartDataSets[] = [
|
public lineChartDataSector: ChartDataSets[] = [
|
||||||
{ data: [], label: '' },
|
{ data: [], label: '' },
|
||||||
];
|
];
|
||||||
|
|
|
||||||
|
|
@ -1,33 +1,39 @@
|
||||||
<script type="text/javascript" charset="utf8" src=""></script>
|
<script type="text/javascript" charset="utf8" src=""></script>
|
||||||
<div class="animated fadeIn">
|
<div class="animated fadeIn">
|
||||||
<div class="form-group row">
|
<div class="card">
|
||||||
<table class="table table-striped table-hover">
|
<div class="card-header">
|
||||||
<thead>
|
<strong>List of Suppliers</strong>
|
||||||
<tr>
|
<small>This lists all suppliers, their postcode and spend.</small>
|
||||||
<th>Name</th>
|
</div>
|
||||||
<th>Postcode</th>
|
<div class="card-block">
|
||||||
<th>Spend</th>
|
<table class="table table-striped table-hover">
|
||||||
</tr>
|
<thead>
|
||||||
</thead>
|
<tr>
|
||||||
<tbody>
|
<th>Name</th>
|
||||||
|
<th>Postcode</th>
|
||||||
|
<th>Spend</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
<!-- table body - name, postcode and spend data should be presented here in cost descending order -->
|
<!-- table body - name, postcode and spend data should be presented here in cost descending order -->
|
||||||
<tr recur-result *ngFor="let recur of recurList" tr.names="name" tr.recur="recur" (onClick)="recurClick($event, template)"></tr>
|
<tr recur-result *ngFor="let recur of recurList" tr.names="name" tr.recur="recur" (onClick)="recurClick($event, template)"></tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>Tom's Tippity Top Toenails Ltd.</td>
|
<td>Tom's Tippity Top Toenails Ltd.</td>
|
||||||
<td>LA11LY</td>
|
<td>LA11LY</td>
|
||||||
<td>£250,000.00</td>
|
<td>£250,000.00</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>Selena's Scratching Sticks Inc.</td>
|
<td>Selena's Scratching Sticks Inc.</td>
|
||||||
<td>WS15PQ</td>
|
<td>WS15PQ</td>
|
||||||
<td>£5.00</td>
|
<td>£5.00</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>Big Barry and Son's Balloon Store and Clown Outfits Corp.</td>
|
<td>Big Barry and Son's Balloon Store and Clown Outfits Corp.</td>
|
||||||
<td>PF43RD</td>
|
<td>PF43RD</td>
|
||||||
<td>£22.00</td>
|
<td>£22.00</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</div><!--/.col-->
|
</div><!--/.col-->
|
||||||
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -26,7 +26,7 @@
|
||||||
// Some special margin utils
|
// Some special margin utils
|
||||||
.m#{$infix}-auto { margin: auto !important; }
|
.m#{$infix}-auto { margin: auto !important; }
|
||||||
.mt#{$infix}-auto { margin-top: auto !important; }
|
.mt#{$infix}-auto { margin-top: auto !important; }
|
||||||
.mr#{$infix}-auto { margin-right: auto !important; }
|
.mr#{$infix}-auto { margin-right: 20px !important; }
|
||||||
.mb#{$infix}-auto { margin-bottom: auto !important; }
|
.mb#{$infix}-auto { margin-bottom: auto !important; }
|
||||||
.ml#{$infix}-auto { margin-left: auto !important; }
|
.ml#{$infix}-auto { margin-left: auto !important; }
|
||||||
.mx#{$infix}-auto {
|
.mx#{$infix}-auto {
|
||||||
|
|
|
||||||
Reference in a new issue