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
Show stats Download patch file Download diff file Expand all files Collapse all files

13
package-lock.json generated
View file

@ -1153,6 +1153,14 @@
"integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=",
"dev": true
},
"angular2-datetimepicker": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/angular2-datetimepicker/-/angular2-datetimepicker-1.1.1.tgz",
"integrity": "sha1-acTZkcSKYNq4CiDYfoU5bBhfH0I=",
"requires": {
"font-awesome": "*"
}
},
"ansi-colors": {
"version": "3.2.4",
"resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.4.tgz",
@ -4016,6 +4024,11 @@
}
}
},
"font-awesome": {
"version": "4.7.0",
"resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz",
"integrity": "sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM="
},
"for-in": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",

1
package.json
View file

@ -33,6 +33,7 @@
"@coreui/icons": "0.3.0",
"ajv": "^6.10.0",
"ajv-keywords": "^3.4.0",
"angular2-datetimepicker": "^1.1.1",
"chart.js": "^2.8.0",
"chartjs-adapter-luxon": "^0.2.0",
"core-js": "^2.6.9",

1
src/app/app.module.ts
View file

@ -41,7 +41,6 @@ import { P500Component } from './pages/500.component';
// Submodules
import { AuthModule } from './auth/auth.module';
import { DashboardModule } from './dashboard/dashboard.module';
import { ChartsModule } from 'ng2-charts';
// import { StackedBarChartComponent } from './panels/stacked-bar.component';
import { MoreStuffComponent } from './dashboard/more-graphs-and-tables.component';

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">

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

@ -43,16 +43,16 @@ export class DashboardCustomerComponent implements OnInit {
{
backgroundColor:[
'#ffa1b5',
'green',
'#3cde52',
'#52afed',
'purple',
'yellow',
'brown',
'magenta',
'cyan',
'orange',
'red',
'#000000'
'#c133e3',
'#f7fa08',
'#75152d',
'#ee12ee',
'#15eaea',
'#eaa015',
'#ea1515',
'#2d4fcc'
]
}];
@ -122,16 +122,16 @@ export class DashboardCustomerComponent implements OnInit {
{
backgroundColor:[
'#ffa1b5',
'green',
'#3cde52',
'#52afed',
'purple',
'yellow',
'brown',
'magenta',
'cyan',
'orange',
'red',
'#000000'
'#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)"

36
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'
]
}];
@ -139,16 +139,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'
]
}];

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">

19
src/app/panels/org-pie-panel.component.ts
View file

@ -17,17 +17,18 @@ export class OrgPiePanel implements OnInit {
public doughnutChartDataLocal: number[] = [];
public doughnutChartColors: any[] = [
{
backgroundColor: [
backgroundColor:[
'#ffa1b5',
'green',
'#3cde52',
'#52afed',
'purple',
'yellow',
'brown',
'magenta',
'cyan',
'orange',
'pink'
'#c133e3',
'#f7fa08',
'#75152d',
'#ee12ee',
'#15eaea',
'#eaa015',
'#ea1515',
'#2d4fcc'
]
},
{

17
src/app/panels/pie-panel.component.ts
View file

@ -19,15 +19,16 @@ export class PiePanel implements OnInit {
public doughnutChartColors: any[] = [
{ backgroundColor: [
'#ffa1b5',
'green',
'#3cde52',
'#52afed',
'purple',
'yellow',
'brown',
'magenta',
'cyan',
'orange',
'pink',
'#c133e3',
'#f7fa08',
'#75152d',
'#ee12ee',
'#15eaea',
'#eaa015',
'#ea1515',
'#2d4fcc'
]
},
{ borderColor:[