From 1c11f8e936214fb0801acf28f07b6d3a8b91b8df Mon Sep 17 00:00:00 2001 From: Felix Date: Wed, 10 Jul 2019 12:49:36 +0100 Subject: [PATCH] Added sample bubble chart --- package-lock.json | 20 +++--- package.json | 2 +- src/app/app.module.ts | 1 + .../more-graphs-and-tables.component.html | 13 +++- .../more-graphs-and-tables.component.ts | 66 +++++++++++++++++++ src/app/panels/bubble-panel.html | 26 ++++---- src/app/panels/bubble-panel.ts | 2 +- 7 files changed, 100 insertions(+), 30 deletions(-) diff --git a/package-lock.json b/package-lock.json index 840a283..b969ab3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -760,9 +760,9 @@ } }, "@types/chart.js": { - "version": "2.7.54", - "resolved": "https://registry.npmjs.org/@types/chart.js/-/chart.js-2.7.54.tgz", - "integrity": "sha512-BxIUR4mfk0zOqOPEu4gxLP5herra6INQLyFmgVE6JVRNNB+r36g2cd67nDUEEdD/EShZvaR33xausxOGv1+nbw==" + "version": "2.7.55", + "resolved": "https://registry.npmjs.org/@types/chart.js/-/chart.js-2.7.55.tgz", + "integrity": "sha512-CACGbxPkr0vcyrZFpDAr4dqpfgu/PiHWzsKAhXdY+g72Laebjn/dijr7ExwVv9JS/99KrhtKmfJ0vBEhPTJBTQ==" }, "@types/events": { "version": "3.0.0", @@ -2142,11 +2142,11 @@ "integrity": "sha512-aoAzpf9KuoDH+4qwj13gx6NOKcwJkgDQrOvIIoaO1e7LR/XXeNlDbDUMnkptmuIfIaqllZQSnR2cNa8vYWd1gw==" }, "chartjs-color": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.1.0.tgz", - "integrity": "sha1-nDmsgwzNmJlq6AyfEQhv8SyYp1Y=", + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.3.0.tgz", + "integrity": "sha512-hEvVheqczsoHD+fZ+tfPUE+1+RbV6b+eksp2LwAhwRTVXEjCSEavvk+Hg3H6SZfGlPh/UfmWKGIvZbtobOEm3g==", "requires": { - "chartjs-color-string": "^0.4.0", + "chartjs-color-string": "^0.6.0", "color-convert": "^0.5.3" }, "dependencies": { @@ -2158,9 +2158,9 @@ } }, "chartjs-color-string": { - "version": "0.4.0", - "resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.4.0.tgz", - "integrity": "sha1-V3SNRTCuKNjbClSSGCugbf3y9Gg=", + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz", + "integrity": "sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==", "requires": { "color-name": "^1.0.0" } diff --git a/package.json b/package.json index 3f24af8..ad11871 100644 --- a/package.json +++ b/package.json @@ -43,7 +43,7 @@ "jszip": "^3.2.2", "luxon": "^1.16.1", "moment": "^2.24.0", - "ng2-charts": "2.3.0", + "ng2-charts": "^2.3.0", "ng2-validation-manager": "0.5.3", "ngx-bootstrap": "^5.0.0", "ngx-pagination": "^4.0.0", diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 1f9dd9a..5dac1a3 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -55,6 +55,7 @@ import { MoreStuffComponent } from './dashboard/more-graphs-and-tables.component BsDropdownModule.forRoot(), TabsModule.forRoot(), AuthModule, + ChartsModule, DashboardModule, // Loaded last to allow for 404 catchall AppRoutingModule, diff --git a/src/app/dashboard/more-graphs-and-tables.component.html b/src/app/dashboard/more-graphs-and-tables.component.html index 0382c67..84f68bc 100644 --- a/src/app/dashboard/more-graphs-and-tables.component.html +++ b/src/app/dashboard/more-graphs-and-tables.component.html @@ -1,3 +1,4 @@ +
@@ -6,9 +7,15 @@

Weekly Spending by Category

-
- -
+
+ + +
\ 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 fffc519..a2a3f7b 100644 --- a/src/app/dashboard/more-graphs-and-tables.component.ts +++ b/src/app/dashboard/more-graphs-and-tables.component.ts @@ -1,5 +1,8 @@ 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 { BubbleChartComponent } from '../panels/bubble-panel'; import { AgmCoreModule } from '@agm/core'; import { BsModalService, ModalDirective } from 'ngx-bootstrap/modal'; import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service'; @@ -16,6 +19,64 @@ export class MoreStuffComponent implements OnInit { // if you wanna rename this @Output() public onClick = new EventEmitter(); @Input() public categories: any; + // chart data + 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' + ] + } + ]; + public recurClick(event: any): void { this.onClick.emit( event ); } @@ -27,4 +88,9 @@ export class MoreStuffComponent implements OnInit { // if you wanna rename this ngOnInit(): void { } + + private setChartData(dataCat: any) { + + } } + diff --git a/src/app/panels/bubble-panel.html b/src/app/panels/bubble-panel.html index e567aa7..9a9ab6b 100644 --- a/src/app/panels/bubble-panel.html +++ b/src/app/panels/bubble-panel.html @@ -1,17 +1,13 @@ -
-
-
-
-

Spend by company and sector

+
+
+
+ +
-
- -
-
-
+
\ No newline at end of file diff --git a/src/app/panels/bubble-panel.ts b/src/app/panels/bubble-panel.ts index bc76869..d5edbdf 100644 --- a/src/app/panels/bubble-panel.ts +++ b/src/app/panels/bubble-panel.ts @@ -95,4 +95,4 @@ export class BubbleChartComponent implements OnInit { const data = Array.apply(null, { length: numberOfPoints }).map(r => this.randomPoint(30)); this.bubbleChartData[0].data = data; } -} +} \ No newline at end of file