Real bubble chart works, just need data now!
This commit is contained in:
parent
1c11f8e936
commit
45d52c9cdb
2 changed files with 86 additions and 29 deletions
|
@ -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>
|
|
@ -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) {
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Reference in a new issue