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

Chart improvements

Browse source 
Minor fixes  + refresh on supplier spend chart
This commit is contained in:
Tom Slater 2019-08-22 16:59:51 +01:00
parent 4130b2fb7d
commit 249c7ba93b
12 changed files with 118 additions and 81 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/app/dashboard/add-data.component.html
View file

@ -24,6 +24,7 @@
<span class="help-block">Enter the amount spent, such as 5.35 for £5.35.</span>
</div>
</div>
<div class="form-group row">
<label class="col-md-3 form-control-label" for="text-input">Essential Purchase</label>
<div class="col-md-9">

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

@ -42,17 +42,17 @@ export class DashboardCustomerComponent implements OnInit {
public doughnutChartColoursCategory: any[] = [
{
backgroundColor:[
'#ffa1b5',
'green',
'#52afed',
'purple',
'yellow',
'brown',
'magenta',
'cyan',
'orange',
'red',
'#000000'
'#ffa1b5',
'#3cde52',
'#52afed',
'#c133e3',
'#f7fa08',
'#75152d',
'#ee12ee',
'#15eaea',
'#eaa015',
'#ea1515',
'#2d4fcc'
]
}];
@ -121,17 +121,17 @@ export class DashboardCustomerComponent implements OnInit {
public barChartColoursCategory: any[] = [
{
backgroundColor:[
'#ffa1b5',
'green',
'#52afed',
'purple',
'yellow',
'brown',
'magenta',
'cyan',
'orange',
'red',
'#000000'
'#ffa1b5',
'#3cde52',
'#52afed',
'#c133e3',
'#f7fa08',
'#75152d',
'#ee12ee',
'#15eaea',
'#eaa015',
'#ea1515',
'#2d4fcc'
]
}];

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

@ -68,6 +68,7 @@
[datasets]="doughnutChartDataCategory"
[labels]="doughnutChartLabelsCategory"
[options]="doughnutChartOptionsCategory"
[colors]="doughnutChartColoursCategory"
[legend]="chartLegend"
[chartType]="chartType"
(chartHover)="chartHovered($event)"

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

@ -84,16 +84,16 @@ export class DashboardComponent {
{
backgroundColor:[
'#ffa1b5',
'green',
'#3cde52',
'#52afed',
'purple',
'yellow',
'brown',
'magenta',
'cyan',
'orange',
'red',
'#000000'
'#c133e3',
'#f7fa08',
'#75152d',
'#ee12ee',
'#15eaea',
'#eaa015',
'#ea1515',
'#2d4fcc'
]
}];
@ -138,17 +138,17 @@ export class DashboardComponent {
public barChartColoursCategory: any[] = [
{
backgroundColor:[
'#ffa1b5',
'green',
'#52afed',
'purple',
'yellow',
'brown',
'magenta',
'cyan',
'orange',
'red',
'#000000'
'#ffa1b5',
'#3cde52',
'#52afed',
'#c133e3',
'#f7fa08',
'#75152d',
'#ee12ee',
'#15eaea',
'#eaa015',
'#ea1515',
'#2d4fcc'
]
}];

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

@ -30,6 +30,10 @@
<div class="col-sm-8">
<h4 class="card-title mb-0">Spend amount and number of organisations</h4>
</div>
<div class="col-sm-4 hidden-sm-down">
<input type="date" [(ngModel)]="lineChartBegin" (change)="lineChartUpdate()">
<input type="date" [(ngModel)]="lineChartEnd" (change)="lineChartUpdate()">
</div>
</div>
<div>
<canvas baseChart
@ -45,9 +49,12 @@
<div class="card">
<div class="card-block">
<div class="row">
<div class="col-sm-5">
<div class="col-sm-8">
<h4 class="card-title mb-0">Supplier Spend History</h4>
</div>
<div class="col-sm-4 hidden-sm-down">
<button (click)="supplierChartUpdate()">New Suppliers</button>
</div>
</div>
<div>
<canvas baseChart #supplierChart

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

@ -82,7 +82,7 @@ export class MoreStuffComponent implements OnInit {
if (is_item_in_range) {
graph_data.push({
t: new Date(item.date.substring(0, 10)),
r: item.value > 1000000 ? (item.value / 100000) : (item.value / 100000) + 5,
r: item.value > 1000000 ? (item.value / 200000) : (item.value / 100000) + 5,
supplier: item.seller,
y: item.count,
value: item.value,
@ -151,8 +151,7 @@ export class MoreStuffComponent implements OnInit {
data: [],
label: ["Spend"],
borderColor: 'blue',
hoverBackgroundColor: 'blue',
hoverBorderColor: 'blue',
hoverBorderColor: 'black',
radius: 5,
},
];
@ -287,13 +286,7 @@ export class MoreStuffComponent implements OnInit {
}
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.loadYearSpend();
console.log("Line chart updating...");
this.loadYearSpend(true, (this.lineChartBegin), (this.lineChartEnd));
}
@ -319,6 +312,26 @@ export class MoreStuffComponent implements OnInit {
}
)
}
supplierChartUpdate() {
this.api.loadMiscUrl('organisation/external/supplier_history').subscribe(
result => {
let labels = [];
let year = [];
let half = [];
let quarter = [];
result.data.map(item => {
labels.push(item.name);
year.push(item.year_total);
half.push(item.half_total);
quarter.push(item.quarter_total);
});
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[] = [
{
data: [],

10
src/app/dashboard/suppliers.component.html
View file

@ -49,11 +49,11 @@
</ul>
</pagination-template>
<select (change)="loadSuppliers(1)" [(ngModel)]="perPage">
<option>10</option>
<option>20</option>
<option>50</option>
<option>100</option>
<option>200</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="50">50</option>
<option value="100">100</option>
<option value="200">200</option>
</select>
</div>
<div *ngIf="!supplierListAvailable" class="card-block">