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

Misc chart work

Browse source 
Search feature on both suppliers and the pagination feature on the spend history still not functional
This commit is contained in:
Tom Slater 2019-08-30 16:50:19 +01:00
parent 420174e953
commit 1dc46a55e0
11 changed files with 84 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
package-lock.json generated
View file

@ -7149,6 +7149,14 @@
"resolved": "https://registry.npmjs.org/ngx-bootstrap/-/ngx-bootstrap-5.0.0.tgz",
"integrity": "sha512-5TTFP9s3wfiRychGcdyvpCvvxtxW1Nf2Dqmk2YBzuIhHHLT6gRq1Fsic4lYrtAUwmy0PSLhOY/XW/saYKlrSJw=="
},
"ngx-filter-pipe": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/ngx-filter-pipe/-/ngx-filter-pipe-2.1.2.tgz",
"integrity": "sha512-YEXvjEw+Mpg5jL+yqSnFWKiY0P9XtRAJ2Dk3n9sC4stnsuhPzPRwIkF58aBvqYfoi3vrb7KQFImgbmfFAQqnFw==",
"requires": {
"tslib": "^1.7.1"
}
},
"ngx-pagination": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/ngx-pagination/-/ngx-pagination-4.0.0.tgz",

1
package.json
View file

@ -48,6 +48,7 @@
"ng2-charts": "^2.3.0",
"ng2-validation-manager": "0.5.3",
"ngx-bootstrap": "^5.0.0",
"ngx-filter-pipe": "^2.1.2",
"ngx-pagination": "^4.0.0",
"popper.js": "^1.15.0",
"rxjs": "6.5.2",

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

@ -44,6 +44,7 @@ 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';
import { FilterPipeModule } from 'ngx-filter-pipe';
@NgModule({
@ -51,6 +52,7 @@ import { MoreStuffComponent } from './dashboard/more-graphs-and-tables.component
BrowserModule,
HttpClientModule,
FormsModule,
FilterPipeModule,
ReactiveFormsModule,
NgxPaginationModule,
BsDropdownModule.forRoot(),

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

@ -60,7 +60,7 @@
<div class="card-block">
<div class="row">
<div class="col-12">
<h4 class="card-title mb-0">Spending by Category</h4>
<h4 class="card-title mb-0">This weeks' spending by Category</h4>
</div>
</div>
<div class="chart-wrapper">

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

@ -10,6 +10,7 @@
<input type="date" [(ngModel)]="bubbleChartEnd" (change)="bubbleChartUpdate()">
</div>
</div>
<small>vertical shows number of purchases, size of bubble shows the total spend amount, horizontal shows date</small>
<div class="col-sm-12" *ngIf="!isBubbleChartLoaded">
<div class="spinner"></div>
</div>
@ -27,12 +28,9 @@
<div class="card">
<div class="card-block">
<div class="row">
<div class="col-sm-8">
<div class="col-sm-12">
<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()">
<small>horizontal axis shows date, vertical axis shows total number of orgs and amount spent</small>
</div>
</div>
<div>
@ -49,14 +47,15 @@
<div class="card">
<div class="card-block">
<div class="row">
<div class="col-sm-8">
<div class="col-sm-6">
<h4 class="card-title mb-0">Supplier Spend History</h4>
</div>
<div class="col-sm-4 hidden-sm-down">
<button type="button" class="btn btn-info" (click)="supplierChartUpdate()">New Suppliers</button>
<div class="col-sm-6 hidden-sm-down">
<button type="button" class="btn btn-danger" (click)="supplierChartPrevious()">Previous Suppliers</button>
<button type="button" class="btn btn-info" (click)="supplierChartNext()">Next Suppliers</button>
</div>
</div>
<div>
<div *ngIf="isSupplierChartLoaded">
<canvas baseChart #supplierChart
[datasets]="supplierMonthChartData"
[options]="supplierMonthChartOptions"

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

@ -17,8 +17,9 @@ export class MoreStuffComponent implements OnInit {
bubbleChartBegin: any;
bubbleChartEnd: any;
cached_graph_data: any;
isBubbleChartLoaded = false;
isLineChartLoaded = false;
isBubbleChartLoaded:boolean = false;
isLineChartLoaded:boolean = false;
isSupplierChartLoaded:boolean = false;
constructor(
private api: ApiService,
@ -31,7 +32,7 @@ export class MoreStuffComponent implements OnInit {
}
ngOnInit(): void {
this.loadYearSpend(false, ('0'), ('0'));
this.loadYearSpend();
this.loadSupplierBubble(false, ('0'), ('0'));
this.loadSupplierHistory();
}
@ -131,9 +132,6 @@ export class MoreStuffComponent implements OnInit {
// console.log("variable \"this.isBubbleChartLoaded\": " + this.isBubbleChartLoaded);
}
private bubbleChartUpdate() {
console.log("test change");
}
public supplierBubbleChartType: ChartType = 'bubble';
public supplierBubbleChartData: any[] = [
{
@ -275,7 +273,7 @@ export class MoreStuffComponent implements OnInit {
}
lineChartUpdate() {
this.loadYearSpend(true, (this.lineChartBegin), (this.lineChartEnd));
this.loadYearSpend();
}
@ -300,27 +298,48 @@ export class MoreStuffComponent implements OnInit {
this.supplierMonthChartLabels = labels.slice(0,15);
}
)
this.isSupplierChartLoaded = true;
}
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);
}
)
private supplierChartNext() {
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(16,30);
this.supplierMonthChartData[1].data = half.slice(16,30);
this.supplierMonthChartData[2].data = year.slice(16,30);
this.supplierMonthChartLabels = labels.slice(16,30);
}
this.isSupplierChartLoaded = true;
}
private supplierChartPrevious() {
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);
}
this.isSupplierChartLoaded = true;
}
public supplierMonthChartData: any[] = [
{
data: [],

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

@ -1,3 +1,20 @@
<div class="animated fadeIn">
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<strong>Search list of suppliers</strong>
<small>Search by name or postcode of suppliers here</small>
</div>
<div *ngIf="supplierListAvailable" class="card-block">
<div class="search-hero">
<input class="form-control" type="text" name="search" [(ngModel)]="searchText" autocomplete="off" placeholder="Search for a supplier here">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="animated fadeIn">
<div class="row">
<div class="col-lg-12">

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

@ -4,7 +4,7 @@ import { AgmCoreModule } from '@agm/core';
import { BsModalService, ModalDirective } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
import { PaginationInstance } from 'ngx-pagination';
import { FilterPipeModule } from 'ngx-filter-pipe';
@Component({
templateUrl: 'suppliers.component.html',
})

2
src/app/dashboard/transaction-log.component.html
View file

@ -89,7 +89,7 @@
</div>
<div class="modal-footer d-flex justify-content-between">
<button type="submit" (click)="deleteRecurringTransaction()" class="btn btn-sm btn-danger"><i class="fa fa-times"></i> Delete</button>
<button type="submit" (click)="editRecurringTransaction()" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Edit</button>
<button type="submit" (click)="editRecurringTransaction()" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Save</button>
</div>
</ng-template>
</div>

1
src/scss/_custom.scss
View file

@ -74,7 +74,6 @@ agm-map {
}
}
.small {
padding-left: 20px;
}
&.legend {
text-align: center;

1
src/scss/bootstrap/_type.scss
View file

@ -66,7 +66,6 @@ small,
.small {
font-size: $small-font-size;
font-weight: $font-weight-normal;
padding-left: 20px;
}
mark,