Real bubble chart works, just need data now!

This commit is contained in:
Felix 2019-07-10 13:04:07 +01:00
parent 1c11f8e936
commit 45d52c9cdb
2 changed files with 86 additions and 29 deletions

View file

@ -1,21 +1,44 @@
<script src="node_modules/chart.js/src/chart.js"></script> <script src="node_modules/chart.js/src/chart.js"></script>
<div class="animated fadeIn"> <!--
<div class="form-group row"> <div class="form-group row">
<div class="card-block"> <div class="card-block">
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
<h4 class="card-title mb-0">Weekly Spending by Category</h4> <h4 class="card-title mb-0">Spend by Industrial Sector</h4>
</div> </div>
</div> </div>
<div style="display: block"> <div style="display: block">
<canvas baseChart <canvas baseChart
[datasets]="bubbleChartData" [datasets]="sampleBubbleChartData"
[options]="bubbleChartOptions" [options]="sampleBubbleChartOptions"
[colors]="bubbleChartColors" [colors]="sampleBubbleChartColors"
[legend]="bubbleChartLegend" [legend]="sampleBubbleChartLegend"
[chartType]="bubbleChartType"> [chartType]="sampleBubbleChartType">
</canvas> </canvas>
</div> </div>
</div> </div>
</div> </div>
</div>-->
<div class="animated fadeIn">
<!-- <div class="form-group row"> -->
<div class="card">
<div class="card-block">
<div class="row">
<div class="col-12">
<h4 class="card-title mb-0">Spend by Region</h4>
</div>
</div>
<div style="display: block">
<canvas baseChart
[datasets]="bubbleChartDataCategory"
[options]="bubbleChartOptionsCategory"
[colors]="sampleBubbleChartColors"
[labels]="bubbleChartLabelsCategory"
[legend]="chartLegend"
[chartType]="chartType"> <!--bootstrapColours-->
</canvas>
</div>
</div>
</div>
<!-- </div> -->
</div> </div>

View file

@ -2,6 +2,9 @@ import { Component, OnInit, AfterViewInit, Input, Output, EventEmitter, ViewChil
import { ApiService } from '../providers/api-service'; import { ApiService } from '../providers/api-service';
import { ChartOptions, ChartType, ChartDataSets } from 'chart.js'; import { ChartOptions, ChartType, ChartDataSets } from 'chart.js';
import { Color } from 'ng2-charts'; 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'; import { BubbleChartComponent } from '../panels/bubble-panel';
import { AgmCoreModule } from '@agm/core'; import { AgmCoreModule } from '@agm/core';
import { BsModalService, ModalDirective } from 'ngx-bootstrap/modal'; import { BsModalService, ModalDirective } from 'ngx-bootstrap/modal';
@ -19,8 +22,55 @@ export class MoreStuffComponent implements OnInit { // if you wanna rename this
@Output() public onClick = new EventEmitter(); @Output() public onClick = new EventEmitter();
@Input() public categories: any; @Input() public categories: any;
// chart data public recurClick(event: any): void {
public bubbleChartOptions: ChartOptions = { 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[] = [];
public bubbleChartLabelsCategory: string[] = [];
public bubbleChartOptionsCategory:any = {
tooltips: {
callbacks: {
label: (tooltip, data) => {
return this.tooltipLabelCallback(tooltip, data);
},
},
},
}
private setChartData(dataCat: any) {
// now we just need some data and it will display!
}
// 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 sampleBubbleChartOptions: ChartOptions = {
responsive: true, responsive: true,
scales: { scales: {
xAxes: [ xAxes: [
@ -41,10 +91,10 @@ export class MoreStuffComponent implements OnInit { // if you wanna rename this
] ]
} }
}; };
public bubbleChartType: ChartType = 'bubble'; public sampleBubbleChartType: ChartType = 'bubble';
public bubbleChartLegend = true; public sampleBubbleChartLegend = true;
public bubbleChartData: ChartDataSets[] = [ public sampleBubbleChartData: ChartDataSets[] = [
{ {
data: [ data: [
{ x: 10, y: 10, r: 10 }, { x: 10, y: 10, r: 10 },
@ -60,7 +110,7 @@ export class MoreStuffComponent implements OnInit { // if you wanna rename this
}, },
]; ];
public bubbleChartColors: Color[] = [ public sampleBubbleChartColors: Color[] = [
{ {
backgroundColor: [ backgroundColor: [
'red', 'red',
@ -76,21 +126,5 @@ export class MoreStuffComponent implements OnInit { // if you wanna rename this
] ]
} }
]; ];
public recurClick(event: any): void {
this.onClick.emit( event );
}
constructor(
private api: ApiService,
) { }
ngOnInit(): void {
}
private setChartData(dataCat: any) {
}
} }