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

Added time filter options + Chart Labels

Browse source 
Cleaned up graphs that aren't relevant to this particular page, added chart labels and a WIP time filter option
This commit is contained in:
Tom Slater 2019-08-09 10:21:40 +01:00
parent 28848b259d
commit dbb885711a
9 changed files with 89 additions and 112 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -65,66 +65,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 float-left mb-0">Weekly Purchase No.</h4> <h4 class="card-title float-left mb-0">Your Purchases by Category</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><!--/.col-->
<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><!--/.col-->
</div><!--/.row--> </div><!--/.row-->
<div class="chart-wrapper"> <div class="chart-wrapper">
@ -137,26 +78,37 @@
(chartHover)="chartHovered($event)" (chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas> (chartClick)="chartClicked($event)"></canvas>
</div> </div>
<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>
</div> </div>
</div><!--/.col--> </div><!--/.col-->
</div><!--/.row--> <div class="col-xl-6">
</div> <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>

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

@ -76,13 +76,6 @@ export class DashboardCustomerComponent implements OnInit {
stacked:true, stacked:true,
}], }],
yAxes:[{
scaleLabel: {
display:true,
labelString: 'Organisation purchase amount'
},
stacked:true,
}]
} }
}; };
public barChartTypeEssential:string = 'horizontalBar'; public barChartTypeEssential:string = 'horizontalBar';

38
src/app/dashboard/more-graphs-and-tables.component.html
View file

@ -2,9 +2,22 @@
<div class="card"> <div class="card">
<div class="card-block"> <div class="card-block">
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-sm-7">
<h4 class="card-title mb-0">Spend amount and number of purchases by supplier name</h4> <h4 class="card-title mb-0">Spend amount and number of purchases by supplier name</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> <div>
<canvas baseChart <canvas baseChart
@ -20,9 +33,22 @@
<div class="card"> <div class="card">
<div class="card-block"> <div class="card-block">
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-sm-7">
<h4 class="card-title mb-0">Spend amount and number of organisations</h4> <h4 class="card-title mb-0">Spend amount and number of organisations</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> <div>
<canvas baseChart <canvas baseChart
@ -41,14 +67,6 @@
<div class="col-sm-5"> <div class="col-sm-5">
<h4 class="card-title mb-0">Supplier Spend History</h4> <h4 class="card-title mb-0">Supplier Spend History</h4>
</div> </div>
<div class="col-sm-7 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">
<button class="btn btn-outline-secondary active" onclick="newGroup()"> New Group
</button>
</div>
</div>
</div>
</div> </div>
<div> <div>
<canvas baseChart #supplierChart <canvas baseChart #supplierChart

6
src/app/dashboard/more-graphs-and-tables.component.ts
View file

@ -215,12 +215,6 @@ export class MoreStuffComponent implements OnInit {
} }
) )
} }
public newGroup() {
this.supplierMonthChartData[0].data = quarter.slice(0,15);
this.supplierMonthChartData[1].data = half.slice(0,15);
this.supplierMonthChartData[2].data = year.slice(0,15);
this.supplierMonthChartLabels = labels.slice(0,15);
}
public supplierMonthChartData: any[] = [ public supplierMonthChartData: any[] = [
{ {
data: [], data: [],

11
src/app/panels/graph-panel.component.html
View file

@ -7,11 +7,16 @@
<div class="col-sm-7 hidden-sm-down"> <div class="col-sm-7 hidden-sm-down">
<div class="btn-toolbar float-right" role="toolbar" aria-label="Toolbar with button groups"> <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"> <div class="btn-group mr-3" data-toggle="buttons" aria-label="First group">
<label class="btn btn-outline-secondary active"> Week <select>
</label> <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><!--/.col--> </div>
</div><!--/.row--> </div><!--/.row-->
<div class="chart-wrapper" style="height:300px;margin-top:40px;"> <div class="chart-wrapper" style="height:300px;margin-top:40px;">
<canvas baseChart class="chart" <canvas baseChart class="chart"

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</h4> <h4 class="card-title mb-0">All Purchases by Type</h4>
</div> </div>
</div> </div>
<div class="chart-wrapper"> <div class="chart-wrapper">

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

@ -12,7 +12,7 @@ import { ChartData } from '../_interfaces/chart-data';
export class OrgPiePanel implements OnInit { export class OrgPiePanel implements OnInit {
public chartType = 'doughnut'; public chartType = 'pie';
public chartLegend = true; public chartLegend = true;
public doughnutChartDataLocal: number[] = []; public doughnutChartDataLocal: number[] = [];
public doughnutChartColors: any[] = [ public doughnutChartColors: any[] = [

2
src/app/panels/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</h4> <h4 class="card-title mb-0">All Purchases by Category</h4>
</div> </div>
</div> </div>
<div class="chart-wrapper"> <div class="chart-wrapper">

21
src/app/panels/pie-panel.component.ts
View file

@ -12,11 +12,12 @@ import { ChartData } from '../_interfaces/chart-data';
export class PiePanel implements OnInit { export class PiePanel implements OnInit {
public chartType = 'doughnut'; public chartType = 'pie';
public chartLegend = true; public chartLegend = true;
public doughnutChartDataLocal: number[] = []; public doughnutChartDataLocal: number[] = [];
public doughnutChartLabelsLocal: string[] = []; public doughnutChartLabelsLocal: string[] = [];
public doughnutChartColors: any[] = [{ backgroundColor: [ public doughnutChartColors: any[] = [
{ backgroundColor: [
'red', 'red',
'green', 'green',
'blue', 'blue',
@ -28,7 +29,21 @@ export class PiePanel implements OnInit {
'orange', 'orange',
'pink' 'pink'
] ]
}]; },
{ borderColor:[
'red',
'green',
'blue',
'purple',
'yellow',
'brown',
'magenta',
'cyan',
'orange',
'pink'
]
}
];
constructor( constructor(
private api: ApiService, private api: ApiService,