From 1dc46a55e0b52c14e37d05d5c0c2f0f73c526206 Mon Sep 17 00:00:00 2001 From: Tom Slater Date: Fri, 30 Aug 2019 16:50:19 +0100 Subject: [PATCH] Misc chart work Search feature on both suppliers and the pagination feature on the spend history still not functional --- package-lock.json | 8 +++ package.json | 1 + src/app/app.module.ts | 2 + src/app/dashboard/dashboard.component.html | 2 +- .../more-graphs-and-tables.component.html | 17 +++-- .../more-graphs-and-tables.component.ts | 71 ++++++++++++------- src/app/dashboard/suppliers.component.html | 17 +++++ src/app/dashboard/suppliers.component.ts | 2 +- .../dashboard/transaction-log.component.html | 2 +- src/scss/_custom.scss | 1 - src/scss/bootstrap/_type.scss | 1 - 11 files changed, 84 insertions(+), 40 deletions(-) diff --git a/package-lock.json b/package-lock.json index ffb94b3..1ef5852 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 06804f4..d3e3510 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/app/app.module.ts b/src/app/app.module.ts index baf5a2a..0a38780 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -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(), diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html index 627fbe4..98901c3 100644 --- a/src/app/dashboard/dashboard.component.html +++ b/src/app/dashboard/dashboard.component.html @@ -60,7 +60,7 @@
-

Spending by Category

+

This weeks' spending by Category

diff --git a/src/app/dashboard/more-graphs-and-tables.component.html b/src/app/dashboard/more-graphs-and-tables.component.html index 4e6f05e..1115f20 100644 --- a/src/app/dashboard/more-graphs-and-tables.component.html +++ b/src/app/dashboard/more-graphs-and-tables.component.html @@ -10,6 +10,7 @@
+ vertical shows number of purchases, size of bubble shows the total spend amount, horizontal shows date
@@ -27,12 +28,9 @@
-
+

Spend amount and number of organisations

-
-
- - + horizontal axis shows date, vertical axis shows total number of orgs and amount spent
@@ -49,14 +47,15 @@
-
+

Supplier Spend History

-
- +
+ +
-
+
{ - 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: [], diff --git a/src/app/dashboard/suppliers.component.html b/src/app/dashboard/suppliers.component.html index 4df6955..0497ecb 100644 --- a/src/app/dashboard/suppliers.component.html +++ b/src/app/dashboard/suppliers.component.html @@ -1,3 +1,20 @@ +
+
+
+
+
+ Search list of suppliers + Search by name or postcode of suppliers here +
+
+
+ +
+
+
+
+
+
diff --git a/src/app/dashboard/suppliers.component.ts b/src/app/dashboard/suppliers.component.ts index c0cfa2d..3210cbc 100644 --- a/src/app/dashboard/suppliers.component.ts +++ b/src/app/dashboard/suppliers.component.ts @@ -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', }) diff --git a/src/app/dashboard/transaction-log.component.html b/src/app/dashboard/transaction-log.component.html index d7f8aa7..f415a96 100644 --- a/src/app/dashboard/transaction-log.component.html +++ b/src/app/dashboard/transaction-log.component.html @@ -89,7 +89,7 @@
- +
diff --git a/src/scss/_custom.scss b/src/scss/_custom.scss index 009af6f..683480b 100644 --- a/src/scss/_custom.scss +++ b/src/scss/_custom.scss @@ -74,7 +74,6 @@ agm-map { } } .small { - padding-left: 20px; } &.legend { text-align: center; diff --git a/src/scss/bootstrap/_type.scss b/src/scss/bootstrap/_type.scss index 554d0c3..fc9c791 100644 --- a/src/scss/bootstrap/_type.scss +++ b/src/scss/bootstrap/_type.scss @@ -66,7 +66,6 @@ small, .small { font-size: $small-font-size; font-weight: $font-weight-normal; - padding-left: 20px; } mark,