Misc Chart work
This commit is contained in:
parent
1070c5de3b
commit
1013a403a3
7 changed files with 17 additions and 49 deletions
|
@ -121,14 +121,6 @@ export class DashboardCustomerComponent implements OnInit {
|
||||||
|
|
||||||
// Graph widgets
|
// Graph widgets
|
||||||
public widgetList = [
|
public widgetList = [
|
||||||
{
|
|
||||||
type: 'graph',
|
|
||||||
name: 'total_duration',
|
|
||||||
duration: '400',
|
|
||||||
icon: 'icon-diamond',
|
|
||||||
title: '(test) last 400 days',
|
|
||||||
dataType: DataType.currency,
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
type: 'graph',
|
type: 'graph',
|
||||||
name: 'total_last_week',
|
name: 'total_last_week',
|
||||||
|
|
|
@ -59,22 +59,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">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"
|
||||||
|
|
|
@ -22,7 +22,7 @@ export class LeaderboardComponent implements OnInit {
|
||||||
|
|
||||||
public paginateConfig: PaginationInstance = {
|
public paginateConfig: PaginationInstance = {
|
||||||
id: 'leadpaginate',
|
id: 'leadpaginate',
|
||||||
itemsPerPage: 10,
|
itemsPerPage: 20,
|
||||||
currentPage: 1,
|
currentPage: 1,
|
||||||
totalItems: 0
|
totalItems: 0
|
||||||
};
|
};
|
||||||
|
@ -70,7 +70,7 @@ export class LeaderboardComponent implements OnInit {
|
||||||
console.log(error);
|
console.log(error);
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
}
|
}org
|
||||||
|
|
||||||
// // dynamically changes the row style based on player's position
|
// // dynamically changes the row style based on player's position
|
||||||
// // for instance, top three player and the player him/herself should
|
// // for instance, top three player and the player him/herself should
|
||||||
|
|
|
@ -12,6 +12,8 @@ import { NgModel } from '@angular/forms';
|
||||||
export class MoreStuffComponent implements OnInit {
|
export class MoreStuffComponent implements OnInit {
|
||||||
@Output() public onClick = new EventEmitter();
|
@Output() public onClick = new EventEmitter();
|
||||||
@Input() public categories: any;
|
@Input() public categories: any;
|
||||||
|
lineChartBegin: any;
|
||||||
|
lineChartEnd: any;
|
||||||
bubbleChartBegin: any;
|
bubbleChartBegin: any;
|
||||||
bubbleChartEnd: any;
|
bubbleChartEnd: any;
|
||||||
cached_graph_data: any;
|
cached_graph_data: any;
|
||||||
|
@ -27,8 +29,8 @@ export class MoreStuffComponent implements OnInit {
|
||||||
}
|
}
|
||||||
|
|
||||||
ngOnInit(): void {
|
ngOnInit(): void {
|
||||||
this.loadYearSpend(false, ('January 1, 2018'), ('January 1, 2019'));
|
this.loadYearSpend();
|
||||||
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();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -63,7 +65,7 @@ export class MoreStuffComponent implements OnInit {
|
||||||
passed_graph_data.data.map(item=> {
|
passed_graph_data.data.map(item=> {
|
||||||
let is_item_in_range = (new Date(item.date.substring(0, 10)) >= new Date(start_range) && new Date(item.date.substring(0, 10)) <= new Date(end_range));
|
let is_item_in_range = (new Date(item.date.substring(0, 10)) >= new Date(start_range) && new Date(item.date.substring(0, 10)) <= new Date(end_range));
|
||||||
// there are a lot of `new Date(blah)` but that is what works for some reason.
|
// there are a lot of `new Date(blah)` but that is what works for some reason.
|
||||||
|
|
||||||
console.log("item.date : " + (item.date));
|
console.log("item.date : " + (item.date));
|
||||||
console.log("Date(item.date) : " + new Date(item.date));
|
console.log("Date(item.date) : " + new Date(item.date));
|
||||||
console.log("Date(item.date.substring(0, 10)) : " + new Date(item.date.substring(0, 10)));
|
console.log("Date(item.date.substring(0, 10)) : " + new Date(item.date.substring(0, 10)));
|
||||||
|
@ -75,7 +77,7 @@ export class MoreStuffComponent implements OnInit {
|
||||||
// console.log("item.date <= end_range: " + (new Date(item.date) <= new Date(end_range)));
|
// console.log("item.date <= end_range: " + (new Date(item.date) <= new Date(end_range)));
|
||||||
// console.log("is_item_in_range: " + is_item_in_range);
|
// console.log("is_item_in_range: " + is_item_in_range);
|
||||||
console.log("----------------------");
|
console.log("----------------------");
|
||||||
|
|
||||||
if (is_item_in_range) {
|
if (is_item_in_range) {
|
||||||
graph_data.push({
|
graph_data.push({
|
||||||
t: new Date(item.date.substring(0, 10)),
|
t: new Date(item.date.substring(0, 10)),
|
||||||
|
@ -129,7 +131,7 @@ export class MoreStuffComponent implements OnInit {
|
||||||
this.api.loadMiscUrl('organisation/external/supplier_count').subscribe(
|
this.api.loadMiscUrl('organisation/external/supplier_count').subscribe(
|
||||||
result => {
|
result => {
|
||||||
this.cached_graph_data = result;
|
this.cached_graph_data = result;
|
||||||
|
|
||||||
this.supplierBubbleChartData[0].data = this.formatGraphData(result, useRange, start_range, end_range);
|
this.supplierBubbleChartData[0].data = this.formatGraphData(result, useRange, start_range, end_range);
|
||||||
console.log("Graph fetched with " + this.supplierBubbleChartData[0].data.length + " items.");
|
console.log("Graph fetched with " + this.supplierBubbleChartData[0].data.length + " items.");
|
||||||
}
|
}
|
||||||
|
@ -283,8 +285,8 @@ export class MoreStuffComponent implements OnInit {
|
||||||
console.log("end_range input box: " + this.lineChartEnd);
|
console.log("end_range input box: " + this.lineChartEnd);
|
||||||
console.log("end_range : " + new Date(this.lineChartEnd));
|
console.log("end_range : " + new Date(this.lineChartEnd));
|
||||||
|
|
||||||
this.loadSupplierBubble(true, (this.bubbleChartBegin), (this.bubbleChartEnd));
|
this.loadYearSpend();
|
||||||
console.log("Bubble chart updating...");
|
console.log("Line chart updating...");
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -82,12 +82,12 @@ export class GraphPanel implements OnInit {
|
||||||
pointHoverBackgroundColor: '#fff'
|
pointHoverBackgroundColor: '#fff'
|
||||||
},
|
},
|
||||||
{ // brandSuccess
|
{ // brandSuccess
|
||||||
backgroundColor: 'transparent',
|
backgroundColor: this.convertHex(this.brandInfo, 10),
|
||||||
borderColor: this.brandSuccess,
|
borderColor: this.brandSuccess,
|
||||||
pointHoverBackgroundColor: '#fff'
|
pointHoverBackgroundColor: '#fff'
|
||||||
},
|
},
|
||||||
{ // brandDanger
|
{ // brandDanger
|
||||||
backgroundColor: 'transparent',
|
backgroundColor: this.convertHex(this.brandDanger, 10),
|
||||||
borderColor: this.brandDanger,
|
borderColor: this.brandDanger,
|
||||||
pointHoverBackgroundColor: '#fff',
|
pointHoverBackgroundColor: '#fff',
|
||||||
borderWidth: 1,
|
borderWidth: 1,
|
||||||
|
|
|
@ -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-7">
|
<div class="col-12">
|
||||||
<h4 class="card-title mb-0">All Purchases by Type</h4>
|
<h4 class="card-title mb-0">All Purchases by Type</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"
|
||||||
|
|
|
@ -44,8 +44,8 @@ export class OrgPiePanel implements OnInit {
|
||||||
'blue'
|
'blue'
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{ borderWidth: [10]
|
{ borderWidth: [100]
|
||||||
}
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
public doughnutChartLabelsLocal: string[] = [];
|
public doughnutChartLabelsLocal: string[] = [];
|
||||||
|
|
Reference in a new issue