Pear-Trading/FoodLoop-Web
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Added WIP All purchases chart

Browse source
This commit is contained in:
Tom Slater 2019-07-12 16:09:08 +01:00
parent 7a6f40e300
commit e7441bf47a
6 changed files with 141 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/app/dashboard/dashboard-customer.component.html
View file

@ -150,7 +150,7 @@
</div><!--/.row-->
<div class="chart-wrapper">
<canvas baseChart class="chart"
[datasets]="barChartDataCategory"
[datasets]="barChartDataCategoryAll"
[labels]="barChartLabelsCategory"
[options]="barChartOptionsCategory"
[legend]="barChartLegendCategory"

1
src/app/dashboard/dashboard-customer.component.ts
View file

@ -100,6 +100,7 @@ export class DashboardCustomerComponent implements OnInit {
public barChartLegendCategory:boolean = false;
public barChartDataCategory:any[]=[];
public barChartLabelsCategory:string[] = [];
public barChartDataCategoryAll:any[]=[];

101
src/app/dashboard/dashboard.component.html
View file

@ -75,4 +75,105 @@
<div class="col-xl-6">
<org-pie-panel></org-pie-panel>
</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>

1
src/app/dashboard/dashboard.component.ts
View file

@ -130,6 +130,7 @@ export class DashboardComponent {
public barChartDataCategory:any[]=[];
public barChartLabelsCategory:string[] = [];
public lineChartDataSector: ChartDataSets[] = [
{ data: [], label: '' },
];

8
src/app/dashboard/suppliers.component.html
View file

@ -1,6 +1,11 @@
<script type="text/javascript" charset="utf8" src=""></script>
<div class="animated fadeIn">
<div class="form-group row">
<div class="card">
<div class="card-header">
<strong>List of Suppliers</strong>
<small>This lists all suppliers, their postcode and spend.</small>
</div>
<div class="card-block">
<table class="table table-striped table-hover">
<thead>
<tr>
@ -31,3 +36,4 @@
</table>
</div>
</div><!--/.col-->
</div>

2
src/scss/bootstrap/utilities/_spacing.scss
View file

@ -26,7 +26,7 @@
// Some special margin utils
.m#{$infix}-auto { margin: 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; }
.ml#{$infix}-auto { margin-left: auto !important; }
.mx#{$infix}-auto {