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

Chart work

Browse source 
Misc Chart work
This commit is contained in:
Tom Slater 2019-08-16 12:27:05 +01:00
parent 80bc7e8328
commit 1299c15f4b
5 changed files with 36 additions and 62 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" (ngModelChange)="bubbleChartUpdate()" (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" (ngModelChange)="bubbleChartUpdate()" (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>

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

@ -21,10 +21,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();
} }
@ -80,7 +82,7 @@ export class MoreStuffComponent implements OnInit {
if (is_item_in_range) { if (is_item_in_range) {
graph_data.push({ graph_data.push({
t: item.date, t: item.date,
r: item.value > 1000000 ? (item.value / 1000000) + 10 : (item.value / 100000) + 5, r: item.value > 1000000 ? (item.value / 100000) : (item.value / 100000) + 5,
supplier: item.seller, supplier: item.seller,
y: item.count, y: item.count,
value: item.value, value: item.value,
@ -94,7 +96,7 @@ export class MoreStuffComponent implements OnInit {
result.data.map(item => { result.data.map(item => {
graph_data.push({ graph_data.push({
t: item.date, t: item.date,
r: item.value > 1000000 ? (item.value / 1000000) + 10 : (item.value / 100000) + 5, r: item.value > 1000000 ? (item.value / 100000) : (item.value / 100000) + 5,
supplier: item.seller, supplier: item.seller,
y: item.count, y: item.count,
value: item.value, value: item.value,
@ -253,6 +255,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"