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

Various updates

Browse source
This commit is contained in:
Tom Bloor 2019-07-15 12:38:06 +01:00
parent 5cd0db3faf
commit 0dcf98fed3
No known key found for this signature in database
GPG key ID: 4657C7EBE42CC5CC
5 changed files with 115 additions and 92 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -45,7 +45,7 @@
</div>
</div>
<div>
<canvas baseChart
<canvas baseChart #supplierChart
[datasets]="supplierMonthChartData"
[options]="supplierMonthChartOptions"
[colors]="sampleColours"

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

@ -1,7 +1,8 @@
import {Component, OnInit, Input, Output, EventEmitter} from '@angular/core';
import {Component, OnInit, Input, Output, EventEmitter, ViewChild, ElementRef} from '@angular/core';
import {ApiService} from '../providers/api-service';
import {Color} from 'ng2-charts';
import {BaseChartDirective, Color} from 'ng2-charts';
import {CurrencyPipe} from '@angular/common';
import {ChartType} from "chart.js";
@Component({
templateUrl: 'more-graphs-and-tables.component.html',
@ -17,6 +18,9 @@ export class MoreStuffComponent implements OnInit {
}
ngOnInit(): void {
this.loadYearSpend();
this.loadSupplierBubble();
this.loadSupplierHistory();
}
public showLegend = true;
@ -41,18 +45,33 @@ export class MoreStuffComponent implements OnInit {
/*
* Supplier Bubble Chart Setup
*/
public supplierBubbleChartType = 'bubble';
private loadSupplierBubble() {
this.api.loadMiscUrl('organisation/external/supplier_count').subscribe(
result => {
console.log(result.data);
let graph_data = [];
result.data.map(item => {
graph_data.push({
t: item.date,
r: (item.value / 100000) + 5,
supplier: item.seller,
y: item.count,
value: item.value,
count: item.count,
});
});
console.log(graph_data);
this.supplierBubbleChartData[0].data = graph_data;
}
)
}
public supplierBubbleChartType: ChartType = 'bubble';
public supplierBubbleChartData: any[] = [
{
data: [
{t: '20180123', y: 54.34, r: 32, supplier: 'Tims', count: 4},
{t: '20180101', y: 123.34, r: 123, supplier: 'Daves', count: 12},
{t: '20180314', y: 11.345, r: 33, supplier: 'erry', count: 13},
{t: '20180615', y: 112.6, r: 22, supplier: 'qwert', count: 124},
{t: '20180714', y: 91234.5, r: 8, supplier: 'Bobs', count: 1234},
{t: '20181230', y: 23.12, r: 67, supplier: 'Ben Bobs', count: 4},
],
label: ["Series A"],
data: [],
label: ["Spend"],
backgroundColor: 'green',
borderColor: 'blue',
hoverBackgroundColor: 'purple',
@ -66,17 +85,10 @@ export class MoreStuffComponent implements OnInit {
xAxes: [{
type: 'time',
time: {
parser: 'YYYYMMDD',
unit: 'month'
}
}],
yAxes: [
{
ticks: {
min: 0,
}
}
]
yAxes: []
},
tooltips: {
callbacks: {
@ -90,18 +102,38 @@ export class MoreStuffComponent implements OnInit {
private bubbleTooltipCallback(tooltipItem: any, data: any) {
let dataset = data.datasets[tooltipItem.datasetIndex];
let value = dataset.data[tooltipItem.index];
return `${value.supplier}: ${this.currencyPipe.transform(value.y, 'GBP', 'symbol', '1.2-2')} over ${value.count} purchases`;
return `${value.supplier}: ${this.currencyPipe.transform(value.value, 'GBP', 'symbol', '1.2-2')} over ${value.count} purchases`;
}
private loadYearSpend() {
this.api.loadMiscUrl('organisation/external/year_spend').subscribe(
result => {
let value_data = [];
let count_data = [];
console.log(result.data);
result.data.map(item => {
value_data.push({
t: item.date,
y: item.value,
});
count_data.push({
t: item.date,
y: item.count,
});
});
this.yearSpendChartData[0].data = value_data;
this.yearSpendChartData[1].data = count_data;
}
)
}
public yearSpendChartData: any[] = [
{
data: [
{t: '20180101', y: 123.34},
{t: '20180314', y: 11.345},
{t: '20180615', y: 112.6},
{t: '20180714', y: 91234.5},
{t: '20181230', y: 23.12},
],
data: [],
label: ["Value"],
fill: false,
borderColor: 'red',
@ -110,13 +142,7 @@ export class MoreStuffComponent implements OnInit {
yAxisID: 'y-value',
},
{
data: [
{t: '20180101', y: 12},
{t: '20180314', y: 11},
{t: '20180615', y: 1},
{t: '20180714', y: 9},
{t: '20181230', y: 23},
],
data: [],
label: ["Count"],
fill: false,
borderColor: 'blue',
@ -131,7 +157,6 @@ export class MoreStuffComponent implements OnInit {
xAxes: [{
type: 'time',
time: {
parser: 'YYYYMMDD',
unit: 'month'
}
}],
@ -158,24 +183,38 @@ export class MoreStuffComponent implements OnInit {
}
];
public yearSpendChartLabels: string[] = [];
public yearSpendChartType = 'line';
public yearSpendChartType: ChartType = 'line';
randomData() {
return Math.random();
}
@ViewChild('supplierChart', {read: BaseChartDirective, static: false}) supplierChart: BaseChartDirective;
private loadSupplierHistory() {
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,10);
this.supplierMonthChartData[1].data = half.slice(0,10);
this.supplierMonthChartData[2].data = year.slice(0,10);
this.supplierMonthChartLabels = labels.slice(0,10);
}
)
}
public supplierMonthChartData: any[] = [
{
data: [
this.randomData(),
this.randomData(),
this.randomData(),
this.randomData(),
this.randomData(),
this.randomData(),
this.randomData(),
this.randomData(),
],
data: [],
label: ["3 Month"],
fill: false,
borderColor: 'red',
@ -183,16 +222,7 @@ export class MoreStuffComponent implements OnInit {
hoverBackgroundColor: 'red',
},
{
data: [
this.randomData(),
this.randomData(),
this.randomData(),
this.randomData(),
this.randomData(),
this.randomData(),
this.randomData(),
this.randomData(),
],
data: [],
label: ["6 Month"],
fill: false,
borderColor: 'red',
@ -200,16 +230,7 @@ export class MoreStuffComponent implements OnInit {
hoverBackgroundColor: 'red',
},
{
data: [
this.randomData(),
this.randomData(),
this.randomData(),
this.randomData(),
this.randomData(),
this.randomData(),
this.randomData(),
this.randomData(),
],
data: [],
label: ["12 Month"],
fill: false,
borderColor: 'red',
@ -218,30 +239,13 @@ export class MoreStuffComponent implements OnInit {
},
];
public supplierMonthChartOptions: any = {
//maintainAspectRatio: false,
responsive: true,
scales: {
xAxes: [],
yAxes: []
},
};
public supplierMonthChartLabels: string[] = [
'some name',
'another name',
'more names',
'again',
'some',
'random',
'names'
];
public supplierMonthChartType = 'horizontalBar';
private setChartData(dataCat: any) {
// now we just need some data and it will display!
}
// functions
// SAMPLE chart data
public supplierMonthChartLabels: string[] = [];
public supplierMonthChartType: ChartType = 'horizontalBar';
}

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

@ -48,6 +48,13 @@
</li>
</ul>
</pagination-template>
<select (change)="loadSuppliers(1)" [(ngModel)]="perPage">
<option>10</option>
<option>20</option>
<option>50</option>
<option>100</option>
<option>200</option>
</select>
</div>
<div *ngIf="!supplierListAvailable" class="card-block">
No Suppliers available.

5
src/app/dashboard/suppliers.component.ts
View file

@ -11,6 +11,7 @@ import { PaginationInstance } from 'ngx-pagination';
export class SuppliersComponent implements OnInit, AfterViewInit {
@Output() public onClick = new EventEmitter();
@Input() public categories: any;
public perPage: number = 10;
supplierList: any;
supplierListAvailable = false;
@ -19,7 +20,7 @@ export class SuppliersComponent implements OnInit, AfterViewInit {
public paginateConfig: PaginationInstance = {
id: 'transpaginate',
itemsPerPage: 10,
itemsPerPage: this.perPage,
currentPage: 1,
totalItems: 0
};
@ -37,7 +38,7 @@ export class SuppliersComponent implements OnInit, AfterViewInit {
}
loadSuppliers(logPage: number) {
this.api.externalSuppliers(logPage, this.sortBy, this.sortDir).subscribe(
this.api.externalSuppliers(logPage, this.sortBy, this.sortDir, this.perPage).subscribe(
result => {
this.supplierList = result.suppliers;
if (this.supplierList) {

15
src/app/providers/api-service.ts
View file

@ -144,7 +144,17 @@ export class ApiService {
);
}
public externalSuppliers(data, sortBy, sortDir) {
public loadMiscUrl(extra_url) {
const key = this.sessionKey;
return this.http.post<any>(
this.apiUrl + '/v1/' + extra_url,
{
session_key : key,
}
);
}
public externalSuppliers(data, sortBy, sortDir, perPage) {
const key = this.sessionKey;
return this.http.post<any>(
this.apiUrl + '/v1/organisation/external/suppliers',
@ -152,7 +162,8 @@ export class ApiService {
session_key : key,
page : data,
sort_by : sortBy,
sort_dir : sortDir
sort_dir : sortDir,
per_page : perPage
}
);
}