From 2998f0b3da1a7189fcd35b5b76bbeb42e7ed41e9 Mon Sep 17 00:00:00 2001 From: Tom Slater Date: Tue, 9 Jul 2019 12:41:17 +0100 Subject: [PATCH] Minor changes for Felix --- .../dashboard-customer.component.html | 19 +++- .../dashboard/dashboard-customer.component.ts | 6 +- src/app/dashboard/dashboard.routing.ts | 1 - src/app/dashboard/leaderboard.component.html | 2 +- src/app/dashboard/suppliers.component.html | 26 ++--- src/app/dashboard/suppliers.component.ts | 2 +- src/app/panels/bubble-panel.html | 17 ++++ src/app/panels/bubble-panel.ts | 98 +++++++++++++++++++ src/app/panels/pie-panel.component.ts | 2 +- src/scss/_custom.scss | 4 +- 10 files changed, 152 insertions(+), 25 deletions(-) create mode 100644 src/app/panels/bubble-panel.html create mode 100644 src/app/panels/bubble-panel.ts diff --git a/src/app/dashboard/dashboard-customer.component.html b/src/app/dashboard/dashboard-customer.component.html index babe1c0..c18993a 100644 --- a/src/app/dashboard/dashboard-customer.component.html +++ b/src/app/dashboard/dashboard-customer.component.html @@ -12,13 +12,13 @@
- --> +
-
-
+
+
@@ -34,8 +34,7 @@ [legend]="chartLegend" [chartType]="chartType" (chartHover)="chartHovered($event)" - (chartClick)="chartClicked($event)"> - + (chartClick)="chartClicked($event)">
@@ -149,6 +148,16 @@

All Purchases by Category

+
+ +
    diff --git a/src/app/dashboard/dashboard-customer.component.ts b/src/app/dashboard/dashboard-customer.component.ts index 4005cc4..1775f49 100644 --- a/src/app/dashboard/dashboard-customer.component.ts +++ b/src/app/dashboard/dashboard-customer.component.ts @@ -30,7 +30,7 @@ export class DashboardCustomerComponent implements OnInit { public bootstrapColours: string[] = ['bg-primary', 'bg-secondary', 'bg-success', 'bg-danger', 'bg-warning', 'bg-info']; - public chartType = 'polarArea'; + public chartType = 'doughnut'; public chartLegend = true; public doughnutChartDataCategory: any[] = []; public doughnutChartLabelsCategory: string[] = []; @@ -150,7 +150,9 @@ export class DashboardCustomerComponent implements OnInit { this.setWeekData(result); this.setChartData(result.data.cat_total); this.totalCategoryList = result.data.cat_list; - this.showTotalCategoryList = true; + if (this.totalCategoryList) { + this.showTotalCategoryList = true; + } this.purchaseEssential = result.data.essentials.purchase_no_essential_total; this.purchaseNotEssential = result.data.essentials.purchase_no_total - this.purchaseEssential; this.barChartDataEssential = [ diff --git a/src/app/dashboard/dashboard.routing.ts b/src/app/dashboard/dashboard.routing.ts index faef8f5..8e3d80a 100644 --- a/src/app/dashboard/dashboard.routing.ts +++ b/src/app/dashboard/dashboard.routing.ts @@ -18,7 +18,6 @@ import { LeaderboardComponent } from './leaderboard.component'; import { MapComponent } from './map.component'; import { TrailMapComponent } from './trail-map.component'; import { SuppliersComponent } from './suppliers.component'; - // Using child path to allow for FullLayout theming const routes: Routes = [ { path: '', redirectTo: '/dashboard', pathMatch: 'full' }, diff --git a/src/app/dashboard/leaderboard.component.html b/src/app/dashboard/leaderboard.component.html index c5014ea..91f27f5 100644 --- a/src/app/dashboard/leaderboard.component.html +++ b/src/app/dashboard/leaderboard.component.html @@ -24,7 +24,7 @@ Position Name - Amount + Gross amount diff --git a/src/app/dashboard/suppliers.component.html b/src/app/dashboard/suppliers.component.html index b953729..1165fb3 100644 --- a/src/app/dashboard/suppliers.component.html +++ b/src/app/dashboard/suppliers.component.html @@ -1,3 +1,4 @@ +
    @@ -11,23 +12,22 @@ - +
    -
    - \ No newline at end of file +
diff --git a/src/app/dashboard/suppliers.component.ts b/src/app/dashboard/suppliers.component.ts index badbc76..7367d03 100644 --- a/src/app/dashboard/suppliers.component.ts +++ b/src/app/dashboard/suppliers.component.ts @@ -26,7 +26,7 @@ export class SuppliersComponent implements OnInit, AfterViewInit { ) { } ngOnInit(): void { - + } ngAfterViewInit() { diff --git a/src/app/panels/bubble-panel.html b/src/app/panels/bubble-panel.html new file mode 100644 index 0000000..e567aa7 --- /dev/null +++ b/src/app/panels/bubble-panel.html @@ -0,0 +1,17 @@ +
+
+
+
+

Spend by company and sector

+
+
+
+ +
+
+
diff --git a/src/app/panels/bubble-panel.ts b/src/app/panels/bubble-panel.ts new file mode 100644 index 0000000..bc76869 --- /dev/null +++ b/src/app/panels/bubble-panel.ts @@ -0,0 +1,98 @@ +import { Component, OnInit } from '@angular/core'; +import { ChartOptions, ChartType, ChartDataSets } from 'chart.js'; +import { Color } from 'ng2-charts'; + +@Component({ + selector: 'app-bubble-chart', + templateUrl: './bubble-chart.component.html', + styleUrls: ['./bubble-chart.component.scss'] +}) +export class BubbleChartComponent implements OnInit { + public bubbleChartOptions: ChartOptions = { + responsive: true, + scales: { + xAxes: [ + { + ticks: { + min: 0, + max: 30, + } + } + ], + yAxes: [ + { + ticks: { + min: 0, + max: 30, + } + } + ] + } + }; + public bubbleChartType: ChartType = 'bubble'; + public bubbleChartLegend = true; + + public bubbleChartData: 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 bubbleChartColors: Color[] = [ + { + backgroundColor: [ + 'red', + 'green', + 'blue', + 'purple', + 'yellow', + 'brown', + 'magenta', + 'cyan', + 'orange', + 'pink' + ] + } + ]; + + constructor() { } + + ngOnInit() { + } + + // events + public chartClicked({ event, active }: { event: MouseEvent, active: {}[] }): void { + console.log(event, active); + } + + public chartHovered({ event, active }: { event: MouseEvent, active: {}[] }): void { + console.log(event, active); + } + + private rand(max: number) { + return Math.trunc(Math.random() * max); + } + + private randomPoint(maxCoordinate: number) { + const x = this.rand(maxCoordinate); + const y = this.rand(maxCoordinate); + const r = this.rand(30) + 5; + return { x, y, r }; + } + + public randomize(): void { + const numberOfPoints = this.rand(5) + 5; + const data = Array.apply(null, { length: numberOfPoints }).map(r => this.randomPoint(30)); + this.bubbleChartData[0].data = data; + } +} diff --git a/src/app/panels/pie-panel.component.ts b/src/app/panels/pie-panel.component.ts index b4b180c..6cc9005 100644 --- a/src/app/panels/pie-panel.component.ts +++ b/src/app/panels/pie-panel.component.ts @@ -12,7 +12,7 @@ import { ChartData } from '../_interfaces/chart-data'; export class PiePanel implements OnInit { - public chartType = 'panel-pie'; + public chartType = 'doughnut'; public chartLegend = true; public doughnutChartDataLocal: number[] = []; public doughnutChartLabelsLocal: string[] = []; diff --git a/src/scss/_custom.scss b/src/scss/_custom.scss index fa409c6..009af6f 100644 --- a/src/scss/_custom.scss +++ b/src/scss/_custom.scss @@ -73,7 +73,9 @@ agm-map { margin-bottom: 2px; } } - + .small { + padding-left: 20px; + } &.legend { text-align: center;