From 5dad9d464866b2439e38e0678c8e8473e7484646 Mon Sep 17 00:00:00 2001 From: Tom Bloor Date: Mon, 15 Jul 2019 01:17:01 +0100 Subject: [PATCH] More graphs with testing data --- .gitignore | 1 - .idea/misc.xml | 6 + .idea/modules.xml | 8 + .idea/vcs.xml | 6 + Foodloop-Web.iml | 12 + package.json | 1 + .../more-graphs-and-tables.component.html | 79 +++-- .../more-graphs-and-tables.component.ts | 325 ++++++++++++------ 8 files changed, 304 insertions(+), 134 deletions(-) create mode 100644 .idea/misc.xml create mode 100644 .idea/modules.xml create mode 100644 .idea/vcs.xml create mode 100644 Foodloop-Web.iml diff --git a/.gitignore b/.gitignore index 4101f22..45ad792 100644 --- a/.gitignore +++ b/.gitignore @@ -22,7 +22,6 @@ $RECYCLE.BIN/ /bower_components # IDEs and editors -/.idea .project .classpath *.launch diff --git a/.idea/misc.xml b/.idea/misc.xml new file mode 100644 index 0000000..639900d --- /dev/null +++ b/.idea/misc.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 0000000..e122851 --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 0000000..35eb1dd --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/Foodloop-Web.iml b/Foodloop-Web.iml new file mode 100644 index 0000000..da8860c --- /dev/null +++ b/Foodloop-Web.iml @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/package.json b/package.json index ad11871..ce48a88 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "scripts": { "ng": "ng", "start": "ng serve", + "start:dev": "ng serve --optimization=false --configuration=dev", "build": "ng build", "test": "ng test", "test:ci": "ng test --watch=false", diff --git a/src/app/dashboard/more-graphs-and-tables.component.html b/src/app/dashboard/more-graphs-and-tables.component.html index 3ef35ee..e65b41a 100644 --- a/src/app/dashboard/more-graphs-and-tables.component.html +++ b/src/app/dashboard/more-graphs-and-tables.component.html @@ -1,28 +1,59 @@ -
- -
-
-
-
-

Spend by Company Type

-
-
-
- - - - -
+
+
+
+
+

Spend by Company Type

+
+
+ + +
- +
+
+
+
+
+

Last 12 months

+
+
+
+ + +
+
+
+
+
+
+
+

Supplier Spend History

+
+
+
+ + +
+
+
diff --git a/src/app/dashboard/more-graphs-and-tables.component.ts b/src/app/dashboard/more-graphs-and-tables.component.ts index 533b1d0..8a3c5c5 100644 --- a/src/app/dashboard/more-graphs-and-tables.component.ts +++ b/src/app/dashboard/more-graphs-and-tables.component.ts @@ -1,127 +1,26 @@ -import { Component, OnInit, AfterViewInit, Input, Output, EventEmitter, ViewChild, TemplateRef } from '@angular/core'; -import { ApiService } from '../providers/api-service'; -import { ChartOptions, ChartType, ChartDataSets } from 'chart.js'; -import { Color } from 'ng2-charts'; -import { CurrencyPipe } from '@angular/common'; -import { DataType } from '../shared/data-types.enum'; -import * as moment from 'moment'; -import { BubbleChartComponent } from '../panels/bubble-panel.component'; -import { AgmCoreModule } from '@agm/core'; -import { BsModalService, ModalDirective } from 'ngx-bootstrap/modal'; -import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service'; - -// interface RecurSupplierData { -// name : string; -// } +import {Component, OnInit, Input, Output, EventEmitter} from '@angular/core'; +import {ApiService} from '../providers/api-service'; +import {Color} from 'ng2-charts'; +import {CurrencyPipe} from '@angular/common'; @Component({ templateUrl: 'more-graphs-and-tables.component.html', }) export class MoreStuffComponent implements OnInit { -// @Input() public recurList: Array; @Output() public onClick = new EventEmitter(); @Input() public categories: any; - public recurClick(event: any): void { - this.onClick.emit( event ); - } - constructor( private api: ApiService, private currencyPipe: CurrencyPipe, - ) { } + ) { + } ngOnInit(): void { } - // main vars - - public bootstrapColours: string[] = ['bg-primary', 'bg-secondary', 'bg-success', - 'bg-danger', 'bg-warning', 'bg-info']; - - // REAL chart data - - public chartType = 'bubble'; - public chartLegend = true; - public bubbleChartDataCategory: any[] = [ - { - data: [ - { x: 10, y: 10, r: 10 }, - { x: 15, y: 5, r: 15 }, - { x: 26, y: 12, r: 23 }, - { x: 7, y: 8, r: 8 }, - ], - label: ["Series A"], - backgroundColor: 'green', - borderColor: 'blue', - hoverBackgroundColor: 'purple', - hoverBorderColor: 'red', -}, -{ -data: [ - { x: 10, y: 2, r: 10 }, - { x: 15, y: 1, r: 15 }, - { x: 26, y: 7, r: 23 }, - { x: 5, y: 8, r: 8 }, - ], - label: ["Series B"], - backgroundColor: 'green', - borderColor: 'blue', - hoverBackgroundColor: 'purple', - hoverBorderColor: 'red', -}, - - ]; - public bubbleChartLabelsCategory: string[] = []; - - public bubbleChartOptionsCategory:any = { - responsive: true, - scales: { - xAxes: [ - { - ticks: { - min: 0, - } - } - ], - yAxes: [ - { - ticks: { - min: 0, - } - } - ] -}, - tooltips: { - callbacks: { - label: (tooltip, data) => { - return this.tooltipLabelCallback(tooltip, data); - }, - }, - }, - } - - private setChartData(dataCat: any) { - // now we just need some data and it will display! - } - public chartClicked({ event, active }: { event: MouseEvent, active: {}[] }): void { - console.log(event, active); - } - - public chartHovered({ event, active }: { event: MouseEvent, active: {}[] }): void { - console.log(event, active); - } - // functions - - private tooltipLabelCallback(tooltipItem: any, data: any) { - var dataset = data.datasets[tooltipItem.datasetIndex]; - var value = dataset.data[tooltipItem.index]; - return this.currencyPipe.transform(value, 'GBP', 'symbol', '1.2-2'); - } - - // SAMPLE chart data - - public sampleBubbleChartColors: Color[] = [ + public showLegend = true; + public sampleColours: Color[] = [ { backgroundColor: [ 'red', @@ -137,4 +36,212 @@ data: [ ] } ]; + + + /* + * Supplier Bubble Chart Setup + */ + public supplierBubbleChartType = '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"], + backgroundColor: 'green', + borderColor: 'blue', + hoverBackgroundColor: 'purple', + hoverBorderColor: 'red', + }, + ]; + public supplierBubbleChartLabels: string[] = []; + public supplierBubbleChartOptions: any = { + responsive: true, + scales: { + xAxes: [{ + type: 'time', + time: { + parser: 'YYYYMMDD', + unit: 'month' + } + }], + yAxes: [ + { + ticks: { + min: 0, + } + } + ] + }, + tooltips: { + callbacks: { + label: (tooltip, data) => { + return this.bubbleTooltipCallback(tooltip, data); + }, + }, + }, + }; + + 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`; + } + + 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}, + ], + label: ["Value"], + fill: false, + borderColor: 'red', + hoverBorderColor: 'red', + hoverBackgroundColor: 'red', + yAxisID: 'y-value', + }, + { + data: [ + {t: '20180101', y: 12}, + {t: '20180314', y: 11}, + {t: '20180615', y: 1}, + {t: '20180714', y: 9}, + {t: '20181230', y: 23}, + ], + label: ["Count"], + fill: false, + borderColor: 'blue', + hoverBackgroundColor: 'blue', + hoverBorderColor: 'blue', + yAxisID: 'y-count', + }, + ]; + public yearSpendChartOptions: any = { + responsive: true, + scales: { + xAxes: [{ + type: 'time', + time: { + parser: 'YYYYMMDD', + unit: 'month' + } + }], + yAxes: [ + {id: 'y-value', position: 'left', beginAtZero: true}, + {id: 'y-count', position: 'right', beginAtZero: true}, + ] + }, + }; + public yearSpendChartColors: Color[] = [ + { + backgroundColor: [ + 'red', + 'green', + 'blue', + 'purple', + 'yellow', + 'brown', + 'magenta', + 'cyan', + 'orange', + 'pink' + ] + } + ]; + public yearSpendChartLabels: string[] = []; + public yearSpendChartType = 'line'; + + randomData() { + return Math.random(); + } + + public supplierMonthChartData: any[] = [ + { + data: [ + this.randomData(), + this.randomData(), + this.randomData(), + this.randomData(), + this.randomData(), + this.randomData(), + this.randomData(), + this.randomData(), + ], + label: ["3 Month"], + fill: false, + borderColor: 'red', + hoverBorderColor: 'red', + hoverBackgroundColor: 'red', + }, + { + data: [ + this.randomData(), + this.randomData(), + this.randomData(), + this.randomData(), + this.randomData(), + this.randomData(), + this.randomData(), + this.randomData(), + ], + label: ["6 Month"], + fill: false, + borderColor: 'red', + hoverBorderColor: 'red', + hoverBackgroundColor: 'red', + }, + { + data: [ + this.randomData(), + this.randomData(), + this.randomData(), + this.randomData(), + this.randomData(), + this.randomData(), + this.randomData(), + this.randomData(), + ], + label: ["12 Month"], + fill: false, + borderColor: 'red', + hoverBorderColor: 'red', + hoverBackgroundColor: 'red', + }, + ]; + public supplierMonthChartOptions: any = { + 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 + }