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

Chart work update

Browse source 
working on essential purchase graph
This commit is contained in:
Tom Slater 2019-08-19 12:30:36 +01:00
parent 156a2f3764
commit 4b42a08af1
4 changed files with 34 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -22,22 +22,9 @@
<!-- <body style="background-color:rgb(0,0,0);"> --> <!-- <body style="background-color:rgb(0,0,0);"> -->
<div class="card-block"> <div class="card-block">
<div class="row"> <div class="row">
<div class="col-7"> <div class="col-12">
<h4 class="card-title mb-0">Spending by Category</h4> <h4 class="card-title mb-0">Spending by Category</h4>
</div> </div>
<div class="col-sm-5 hidden-sm-down">
<div class="btn-toolbar float-right" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-3" data-toggle="buttons" aria-label="First group">
<select>
<option value="Day">Day</option>
<option value="Week">Week</option>
<option value="Month">Month</option>
<option value="Year">Year</option>
<option value="All Time">All Time</option>
</select>
</div>
</div>
</div>
</div> </div>
<div class="chart-wrapper"> <div class="chart-wrapper">
<canvas baseChart class="chart" <canvas baseChart class="chart"
@ -57,22 +44,9 @@
<div class="card"> <div class="card">
<div class="card-block"> <div class="card-block">
<div class="row"> <div class="row">
<div class="col-7"> <div class="col-12">
<h4 class="card-title mb-0">No. of Essential Purchases</h4> <h4 class="card-title mb-0">No. of Essential Purchases</h4>
</div> </div>
<div class="col-sm-5 hidden-sm-down">
<div class="btn-toolbar float-right" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-3" data-toggle="buttons" aria-label="First group">
<select>
<option value="Day">Day</option>
<option value="Week">Week</option>
<option value="Month">Month</option>
<option value="Year">Year</option>
<option value="All Time">All Time</option>
</select>
</div>
</div>
</div>
</div> </div>
<div class="chart-wrapper"> <div class="chart-wrapper">
<canvas baseChart class="chart" <canvas baseChart class="chart"
@ -90,22 +64,9 @@
<div class="card"> <div class="card">
<div class="card-block"> <div class="card-block">
<div class="row"> <div class="row">
<div class="col-8"> <div class="col-12">
<h4 class="card-title float-left mb-0">Your Purchases by Category</h4> <h4 class="card-title float-left mb-0">Your Purchases by Category</h4>
</div><!--/.col--> </div><!--/.col-->
<div class="col-sm-4 hidden-sm-down">
<div class="btn-toolbar float-right" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-3" data-toggle="buttons" aria-label="First group">
<select>
<option value="Day">Day</option>
<option value="Week">Week</option>
<option value="Month">Month</option>
<option value="Year">Year</option>
<option value="All Time">All Time</option>
</select>
</div>
</div>
</div>
</div><!--/.row--> </div><!--/.row-->
<div class="chart-wrapper"> <div class="chart-wrapper">
<canvas baseChart class="chart" <canvas baseChart class="chart"

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

@ -71,7 +71,6 @@ export class DashboardCustomerComponent implements OnInit {
xAxes:[{ xAxes:[{
scaleLabel: { scaleLabel: {
display:true, display:true,
labelString: 'Category'
}, },
stacked:true, stacked:true,

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

@ -79,4 +79,34 @@
<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 float-left mb-0"> Global Puchases by Category</h4>
</div>
<div class="col-12">
<div *ngIf="showTotalCategoryList" class="chart-wrapper">
<ul class="icons-list">
<!-- New loop -->
<li *ngFor="let category of totalCategoryList | slice:0:totalCategoryLimit; let i=index">
<i [ngClass]="['icon-' + category.icon, getBootstrapColour(i)]"></i>
<div class="desc">
<div class="title">{{ category.category || 'N/A' }}</div>
</div>
<div class="value">
<div class="small text-muted">Bought</div>
<strong>{{ category.value || 'N/A' }}</strong>
</div>
</li>
<li *ngIf="totalCategoryList.length > totalCategoryLimit && disableCategoryButton == false" class="divider text-center">
<button type="button" class="btn btn-sm btn-link text-muted" (click)="categoryLoadMore()"><i class="icon-options"></i></button>
</li>
</ul>
</div>
</div>
</div><!--/.row-->
</div>
</div>
</div> </div>

2
src/app/panels/org-pie-panel.component.html
View file

@ -2,7 +2,7 @@
<div class="card-block"> <div class="card-block">
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
<h4 class="card-title mb-0">All Purchases by Type</h4> <h4 class="card-title mb-0">Global Purchases by Type</h4>
</div> </div>
</div> </div>
<div class="chart-wrapper"> <div class="chart-wrapper">