From 4350a24132d1cdb450b76382ab29d0c6da3f870d Mon Sep 17 00:00:00 2001 From: Tom Slater Date: Thu, 11 Jul 2019 15:18:33 +0100 Subject: [PATCH] Unfished Graph sections Part 2 --- src/app/dashboard/add-data.component.html | 4 +- .../dashboard-customer.component.html | 14 +-- .../dashboard/dashboard-customer.component.ts | 76 ++++++++++++++ src/app/dashboard/dashboard.component.html | 85 ++++++++++++++++ src/app/dashboard/dashboard.component.ts | 2 + .../more-graphs-and-tables.component.html | 30 ++---- .../more-graphs-and-tables.component.ts | 98 ++++++++++--------- src/app/providers/org-graphs.service.ts | 2 +- src/scss/bootstrap/_type.scss | 1 + 9 files changed, 235 insertions(+), 77 deletions(-) diff --git a/src/app/dashboard/add-data.component.html b/src/app/dashboard/add-data.component.html index e86e65b..59a1cfc 100644 --- a/src/app/dashboard/add-data.component.html +++ b/src/app/dashboard/add-data.component.html @@ -29,8 +29,8 @@
+ Tick if the purchase is deemed an essential purchase for budgeting purposes.
- Tick if the purchase is deemed an essential purchase for budgeting purposes.
@@ -38,8 +38,8 @@
+ Tick if the purchase frequently recurs, such as monthly.
- Tick if the purchase frequently recurs, such as monthly.
diff --git a/src/app/dashboard/dashboard-customer.component.html b/src/app/dashboard/dashboard-customer.component.html index 7f7abc9..f11d074 100644 --- a/src/app/dashboard/dashboard-customer.component.html +++ b/src/app/dashboard/dashboard-customer.component.html @@ -179,21 +179,21 @@
-
+
-

Spend by company and industrial sector

+

Spend by company and Industrial sector

diff --git a/src/app/dashboard/dashboard-customer.component.ts b/src/app/dashboard/dashboard-customer.component.ts index 0295a7e..34dd082 100644 --- a/src/app/dashboard/dashboard-customer.component.ts +++ b/src/app/dashboard/dashboard-customer.component.ts @@ -115,6 +115,82 @@ export class DashboardCustomerComponent implements OnInit { totalCategoryLimit: number = 10; totalCategoryList: any[]=[]; + public lineChartData: ChartDataSets[] = [ + { data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A' }, + { data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B' }, + { data: [180, 480, 770, 90, 1000, 270, 400], label: 'Series C', yAxisID: 'y-axis-1' } + ]; + public lineChartLabels: Label[] = ['January', 'February', 'March', 'April', 'May', 'June', 'July','August','September','October','November','December']; + public lineChartOptions: (ChartOptions & { annotation: any }) = { + responsive: true, + scales: { + // We use this empty structure as a placeholder for dynamic theming. + xAxes: [{}], + yAxes: [ + { + id: 'y-axis-0', + position: 'left', + }, + { + id: 'y-axis-1', + position: 'right', + gridLines: { + color: 'rgba(255,0,0,0.3)', + }, + ticks: { + fontColor: 'red', + } + } + ] + }, + annotation: { + annotations: [ + { + type: 'line', + mode: 'vertical', + scaleID: 'x-axis-0', + value: 'March', + borderColor: 'orange', + borderWidth: 2, + label: { + enabled: true, + fontColor: 'orange', + content: 'LineAnno' + } + }, + ], + }, + }; + public lineChartColors: Color[] = [ + { // grey + backgroundColor: 'rgba(148,159,177,0.2)', + borderColor: 'rgba(148,159,177,1)', + pointBackgroundColor: 'rgba(148,159,177,1)', + pointBorderColor: '#fff', + pointHoverBackgroundColor: '#fff', + pointHoverBorderColor: 'rgba(148,159,177,0.8)' + }, + { // dark grey + backgroundColor: 'rgba(77,83,96,0.2)', + borderColor: 'rgba(77,83,96,1)', + pointBackgroundColor: 'rgba(77,83,96,1)', + pointBorderColor: '#fff', + pointHoverBackgroundColor: '#fff', + pointHoverBorderColor: 'rgba(77,83,96,1)' + }, + { // red + backgroundColor: 'rgba(255,0,0,0.3)', + borderColor: 'red', + pointBackgroundColor: 'rgba(148,159,177,1)', + pointBorderColor: '#fff', + pointHoverBackgroundColor: '#fff', + pointHoverBorderColor: 'rgba(148,159,177,0.8)' + } + ]; + public lineChartLegend = true; + public lineChartType = 'line'; + + // Graph widgets public widgetList = [ { diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html index ff6f092..0880fd1 100644 --- a/src/app/dashboard/dashboard.component.html +++ b/src/app/dashboard/dashboard.component.html @@ -11,4 +11,89 @@
+
+
+
+
+

Spend by company and Industrial sector

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

All Purchases by Category

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

No. of Essential Purchases

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

Weekly Spending by Category

+
+
+
+ +
+
+
+
+
+ +
diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts index 4a15b1e..2563e3a 100644 --- a/src/app/dashboard/dashboard.component.ts +++ b/src/app/dashboard/dashboard.component.ts @@ -3,6 +3,7 @@ import {Router, NavigationEnd} from "@angular/router"; import { GraphWidget } from '../widgets/graph-widget.component'; import { OrgBarSnippetComponent } from '../snippets/org-snippet-bar.component'; import { GraphPanel } from '../panels/graph-panel.component'; +import { PiePanel } from '../panels/pie-panel.component'; import { DataType } from '../shared/data-types.enum'; import { environment } from '../../environments/environment'; @@ -61,4 +62,5 @@ export class DashboardComponent { }); } } + } diff --git a/src/app/dashboard/more-graphs-and-tables.component.html b/src/app/dashboard/more-graphs-and-tables.component.html index ec6192a..3ef35ee 100644 --- a/src/app/dashboard/more-graphs-and-tables.component.html +++ b/src/app/dashboard/more-graphs-and-tables.component.html @@ -1,31 +1,11 @@ -
-

Spend by Region

+

Spend by Company Type

@@ -35,10 +15,14 @@ [colors]="sampleBubbleChartColors" [labels]="bubbleChartLabelsCategory" [legend]="chartLegend" - [chartType]="chartType"> + [chartType]="chartType" + (chartHover)="chartHovered($event)" + (chartClick)="chartClicked($event)"> + +
-
\ No newline at end of file +
diff --git a/src/app/dashboard/more-graphs-and-tables.component.ts b/src/app/dashboard/more-graphs-and-tables.component.ts index 4fbfbcc..65b65bf 100644 --- a/src/app/dashboard/more-graphs-and-tables.component.ts +++ b/src/app/dashboard/more-graphs-and-tables.component.ts @@ -17,8 +17,8 @@ import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service'; @Component({ templateUrl: 'more-graphs-and-tables.component.html', }) -export class MoreStuffComponent implements OnInit { // if you wanna rename this, replace in all files 'MoreStuffComponent' with desired name and 'more-graphs-and-tables.component' with another desired name - // @Input() public recurList: Array; +export class MoreStuffComponent implements OnInit { +// @Input() public recurList: Array; @Output() public onClick = new EventEmitter(); @Input() public categories: any; @@ -43,10 +43,55 @@ export class MoreStuffComponent implements OnInit { // if you wanna rename this public chartType = 'bubble'; public chartLegend = true; - public bubbleChartDataCategory: any[] = []; + 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) => { @@ -59,7 +104,13 @@ export class MoreStuffComponent implements OnInit { // if you wanna rename this 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) { @@ -69,46 +120,6 @@ export class MoreStuffComponent implements OnInit { // if you wanna rename this } // SAMPLE chart data - - public sampleBubbleChartOptions: ChartOptions = { - responsive: true, - scales: { - xAxes: [ - { - ticks: { - min: 0, - max: 30, - } - } - ], - yAxes: [ - { - ticks: { - min: 0, - max: 30, - } - } - ] - } - }; - public sampleBubbleChartType: ChartType = 'bubble'; - public sampleBubbleChartLegend = true; - - public sampleBubbleChartData: ChartDataSets[] = [ - { - 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', - }, - ]; public sampleBubbleChartColors: Color[] = [ { @@ -127,4 +138,3 @@ export class MoreStuffComponent implements OnInit { // if you wanna rename this } ]; } - diff --git a/src/app/providers/org-graphs.service.ts b/src/app/providers/org-graphs.service.ts index d19a53b..859361c 100644 --- a/src/app/providers/org-graphs.service.ts +++ b/src/app/providers/org-graphs.service.ts @@ -3,7 +3,7 @@ import { ApiService } from './api-service'; @Injectable() export class OrgGraphsService { - private orgGraphUrl = '/v1/customer/graphs'; + private orgGraphUrl = '/v1/organisation/graphs'; constructor(private api: ApiService) { } diff --git a/src/scss/bootstrap/_type.scss b/src/scss/bootstrap/_type.scss index fc9c791..554d0c3 100644 --- a/src/scss/bootstrap/_type.scss +++ b/src/scss/bootstrap/_type.scss @@ -66,6 +66,7 @@ small, .small { font-size: $small-font-size; font-weight: $font-weight-normal; + padding-left: 20px; } mark,