Chart work
Misc Chart work
This commit is contained in:
parent
80bc7e8328
commit
1299c15f4b
5 changed files with 36 additions and 62 deletions
|
@ -17,21 +17,8 @@
|
|||
<div class="card">
|
||||
<div class="card-block">
|
||||
<div class="row">
|
||||
<div class="col-7">
|
||||
<h4 class="card-title mb-0">No. 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 class="col-12">
|
||||
<h4 class="card-title mb-0">Number of Essential Purchases</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-wrapper">
|
||||
|
@ -50,22 +37,9 @@
|
|||
<div class="card">
|
||||
<div class="card-block">
|
||||
<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>
|
||||
</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 class="chart-wrapper">
|
||||
<canvas baseChart class="chart"
|
||||
|
|
|
@ -46,9 +46,9 @@ export class DashboardComponent {
|
|||
},
|
||||
{
|
||||
type: 'graph',
|
||||
name: 'sales_all',
|
||||
name: 'sales_last_year',
|
||||
icon: 'icon-diamond',
|
||||
title: 'All Sales',
|
||||
title: 'Sales Last Year',
|
||||
dataType: DataType.currency,
|
||||
},
|
||||
{
|
||||
|
@ -65,8 +65,8 @@ export class DashboardComponent {
|
|||
},
|
||||
{
|
||||
type: 'graph',
|
||||
name: 'purchases_all;',
|
||||
title: 'All Purchases',
|
||||
name: 'purchases_last_year;',
|
||||
title: 'Purchases Last Year',
|
||||
dataType: DataType.currency,
|
||||
},
|
||||
];
|
||||
|
|
|
@ -2,13 +2,13 @@
|
|||
<div class="card">
|
||||
<div class="card-block">
|
||||
<div class="row">
|
||||
<div class="col-sm-7">
|
||||
<h4 class="card-title mb-0">Spend amount and number of purchases by supplier name</h4>
|
||||
<div class="col-sm-8">
|
||||
<h4 class="card-title mb-0">Supplier spend amount and number of purchases</h4>
|
||||
</div>
|
||||
<div class="col-sm-5 hidden-sm-down">
|
||||
<input type="date" (ngModel)="bubbleChartBegin" (ngModelChange)="bubbleChartUpdate()" (change)="bubbleChartUpdate()">
|
||||
<div class="col-sm-4 hidden-sm-down">
|
||||
<input type="date" ([value])="bubbleChartBegin" (change)="bubbleChartUpdate()">
|
||||
<!-- 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>
|
||||
|
@ -25,12 +25,12 @@
|
|||
<div class="card">
|
||||
<div class="card-block">
|
||||
<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>
|
||||
</div>
|
||||
<div class="col-sm-5 hidden-sm-down">
|
||||
<!-- <input type="date" id="yearSpendChartBegin" name="yearSpendChartBegin" ng-model="yearSpendChartBegin" ng-change="yearSpendChartBegin"> -->
|
||||
<!-- <input type="date" id="yearSpendChartEnd" name="yearSpendChartEnd" ng-model="yearSpendChartEnd" ng-change="yearSpendChartEnd"> -->
|
||||
<div class="col-sm-4 hidden-sm-down">
|
||||
<input type="date" ([value])="lineChartBegin" (change)="lineChartUpdate()">
|
||||
<input type="date" ([value])="lineChartEnd" (change)="lineChartUpdate()">
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
|
|
|
@ -21,10 +21,12 @@ export class MoreStuffComponent implements OnInit {
|
|||
) {
|
||||
this.bubbleChartBegin = 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 {
|
||||
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.loadSupplierHistory();
|
||||
}
|
||||
|
@ -80,7 +82,7 @@ export class MoreStuffComponent implements OnInit {
|
|||
if (is_item_in_range) {
|
||||
graph_data.push({
|
||||
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,
|
||||
y: item.count,
|
||||
value: item.value,
|
||||
|
@ -94,7 +96,7 @@ export class MoreStuffComponent implements OnInit {
|
|||
result.data.map(item => {
|
||||
graph_data.push({
|
||||
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,
|
||||
y: item.count,
|
||||
value: item.value,
|
||||
|
@ -253,6 +255,17 @@ export class MoreStuffComponent implements OnInit {
|
|||
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;
|
||||
|
||||
private loadSupplierHistory() {
|
||||
|
|
|
@ -1,22 +1,9 @@
|
|||
<div class="card">
|
||||
<div class="card-block">
|
||||
<div class="row">
|
||||
<div class="col-sm-5">
|
||||
<div class="col-sm-12">
|
||||
<h4 class="card-title mb-0">Customers</h4>
|
||||
</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 class="chart-wrapper" style="height:300px;margin-top:40px;">
|
||||
<canvas baseChart class="chart"
|
||||
|
|
Reference in a new issue