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

Merge branch 'tyu-tyu/chart' into felix/customranges

Browse source
This commit is contained in:
Tom Slater 2019-08-16 13:58:13 +01:00
commit e9334cec6d
5 changed files with 31 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -17,21 +17,8 @@
<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">Number of Essential Purchases</h4>
</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 class="chart-wrapper"> <div class="chart-wrapper">
@ -50,22 +37,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 float-left mb-0">All Organisation Purchases by Category</h4> <h4 class="card-title float-left mb-0">All Organisation Purchases by Category</h4>
</div><!--/.col--> </div><!--/.col-->
<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><!--/.row--> </div><!--/.row-->
<div class="chart-wrapper"> <div class="chart-wrapper">
<canvas baseChart class="chart" <canvas baseChart class="chart"

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

@ -46,9 +46,9 @@ export class DashboardComponent {
}, },
{ {
type: 'graph', type: 'graph',
name: 'sales_all', name: 'sales_last_year',
icon: 'icon-diamond', icon: 'icon-diamond',
title: 'All Sales', title: 'Sales Last Year',
dataType: DataType.currency, dataType: DataType.currency,
}, },
{ {
@ -65,8 +65,8 @@ export class DashboardComponent {
}, },
{ {
type: 'graph', type: 'graph',
name: 'purchases_all;', name: 'purchases_last_year;',
title: 'All Purchases', title: 'Purchases Last Year',
dataType: DataType.currency, dataType: DataType.currency,
}, },
]; ];

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

@ -2,13 +2,13 @@
<div class="card"> <div class="card">
<div class="card-block"> <div class="card-block">
<div class="row"> <div class="row">
<div class="col-sm-7"> <div class="col-sm-8">
<h4 class="card-title mb-0">Spend amount and number of purchases by supplier name</h4> <h4 class="card-title mb-0">Supplier spend amount and number of purchases</h4>
</div> </div>
<div class="col-sm-5 hidden-sm-down"> <div class="col-sm-4 hidden-sm-down">
<input type="date" [(ngModel)]="bubbleChartBegin" (change)="bubbleChartUpdate()"> <input type="date" ([value])="bubbleChartBegin" (change)="bubbleChartUpdate()">
<!-- THESE INPUT BOXES DO NOT WORK. Their value remains the client machine's date/time despite changing. --> <!-- THESE INPUT BOXES DO NOT WORK. Their value remains the client machine's date/time despite changing. -->
<input type="date" [(ngModel)]="bubbleChartEnd" (change)="bubbleChartUpdate()"> <input type="date" ([value])="bubbleChartEnd" (change)="bubbleChartUpdate()">
</div> </div>
</div> </div>
<div> <div>
@ -25,12 +25,12 @@
<div class="card"> <div class="card">
<div class="card-block"> <div class="card-block">
<div class="row"> <div class="row">
<div class="col-sm-7"> <div class="col-sm-8">
<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="col-sm-4 hidden-sm-down">
<!-- <input type="date" id="yearSpendChartBegin" name="yearSpendChartBegin" ng-model="yearSpendChartBegin" ng-change="yearSpendChartBegin"> --> <input type="date" ([value])="lineChartBegin" (change)="lineChartUpdate()">
<!-- <input type="date" id="yearSpendChartEnd" name="yearSpendChartEnd" ng-model="yearSpendChartEnd" ng-change="yearSpendChartEnd"> --> <input type="date" ([value])="lineChartEnd" (change)="lineChartUpdate()">
</div> </div>
</div> </div>
<div> <div>

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

@ -22,10 +22,12 @@ export class MoreStuffComponent implements OnInit {
) { ) {
this.bubbleChartBegin = moment().format('YYYY-MM-DD'); this.bubbleChartBegin = moment().format('YYYY-MM-DD');
this.bubbleChartEnd = moment().format('YYYY-MM-DD'); this.bubbleChartEnd = moment().format('YYYY-MM-DD');
this.lineChartBegin = moment().format('YYYY-MM-DD');
this.lineChartEnd = moment().format('YYYY-MM-DD');
} }
ngOnInit(): void { ngOnInit(): void {
this.loadYearSpend(); this.loadYearSpend(false, ('January 1, 2018'), ('January 1, 2019'));
this.loadSupplierBubble(false, ('January 1, 2018'), ('January 1, 2019')); // pass start and end date ranges to this as Date()s this.loadSupplierBubble(false, ('January 1, 2018'), ('January 1, 2019')); // pass start and end date ranges to this as Date()s
this.loadSupplierHistory(); this.loadSupplierHistory();
} }
@ -275,6 +277,17 @@ export class MoreStuffComponent implements OnInit {
return Math.random(); return Math.random();
} }
lineChartUpdate() {
console.log("start_range input box: " + this.lineChartBegin.date);
console.log("start_range : " + new Date(this.lineChartBegin));
console.log("end_range input box: " + this.lineChartEnd);
console.log("end_range : " + new Date(this.lineChartEnd));
this.loadSupplierBubble(true, (this.bubbleChartBegin), (this.bubbleChartEnd));
console.log("Bubble chart updating...");
}
@ViewChild('supplierChart', {read: BaseChartDirective, static: false}) supplierChart: BaseChartDirective; @ViewChild('supplierChart', {read: BaseChartDirective, static: false}) supplierChart: BaseChartDirective;
private loadSupplierHistory() { private loadSupplierHistory() {

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

@ -1,22 +1,9 @@
<div class="card"> <div class="card">
<div class="card-block"> <div class="card-block">
<div class="row"> <div class="row">
<div class="col-sm-5"> <div class="col-sm-12">
<h4 class="card-title mb-0">Customers</h4> <h4 class="card-title mb-0">Customers</h4>
</div><!--/.col--> </div><!--/.col-->
<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">
<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" style="height:300px;margin-top:40px;"> <div class="chart-wrapper" style="height:300px;margin-top:40px;">
<canvas baseChart class="chart" <canvas baseChart class="chart"