Pear-Trading/FoodLoop-Web
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Added sample bubble chart

Browse source
This commit is contained in:
Felix 2019-07-10 12:49:36 +01:00
parent 9f50b3c2ce
commit 1c11f8e936
7 changed files with 100 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
package-lock.json generated
View file

@ -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"
}

2
package.json
View file

@ -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",

1
src/app/app.module.ts
View file

@ -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,

13
src/app/dashboard/more-graphs-and-tables.component.html
View file

@ -1,3 +1,4 @@
<script src="node_modules/chart.js/src/chart.js"></script>
<div class="animated fadeIn">
<div class="form-group row">
<div class="card-block">
@ -6,9 +7,15 @@
<h4 class="card-title mb-0">Weekly Spending by Category</h4>
</div>
</div>
<div class="chart-wrapper">
<canvas baseChart class="chart"></canvas>
</div>
<div style="display: block">
<canvas baseChart
[datasets]="bubbleChartData"
[options]="bubbleChartOptions"
[colors]="bubbleChartColors"
[legend]="bubbleChartLegend"
[chartType]="bubbleChartType">
</canvas>
</div>
</div>
</div>
</div>

66
src/app/dashboard/more-graphs-and-tables.component.ts
View file

@ -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) {
}
}

26
src/app/panels/bubble-panel.html
View file

@ -1,17 +1,13 @@
<div class="card">
<div class="card-block">
<div class="row">
<div class="col-12">
<h4 class="card-title mb-0">Spend by company and sector</h4>
<div>
<div>
<div style="display: block">
<canvas baseChart
[datasets]="bubbleChartData"
[options]="bubbleChartOptions"
[colors]="bubbleChartColors"
[legend]="bubbleChartLegend"
[chartType]="bubbleChartType">
</canvas>
</div>
</div>
<div class"chart-wrapper">
<canvas baseChart class="chart"
[datasets]="bubbleChartData"
[options]="bubbleChartOptions"
[colors]="bubbleChartColors"
[legend]="bubbleChartLegend"
[chartType]="bubbleChartType"></canvas>
</div>
</div>
</div>
</div>

2
src/app/panels/bubble-panel.ts
View file

@ -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;
}
}
}