diff --git a/src/app/widgets/graph-widget.component.html b/src/app/widgets/graph-widget.component.html
index 9c008e3..b94d92e 100644
--- a/src/app/widgets/graph-widget.component.html
+++ b/src/app/widgets/graph-widget.component.html
@@ -3,7 +3,8 @@
-
{{ graphSum }}
+ {{ graphSum }}
+ {{ graphSum | currency:'GBP':true:'1.2-2' }}
{{ graphTitle }}
diff --git a/src/app/widgets/graph-widget.component.ts b/src/app/widgets/graph-widget.component.ts
index aaa4f9a..1339db9 100644
--- a/src/app/widgets/graph-widget.component.ts
+++ b/src/app/widgets/graph-widget.component.ts
@@ -1,5 +1,7 @@
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { CurrencyPipe } from '@angular/common';
import { OrgGraphsService } from '../providers/org-graphs.service';
+import { DataType } from '../shared/data-types.enum';
interface ChartData {
data: Array
;
@@ -14,11 +16,13 @@ export class GraphWidget implements OnInit {
@Input() public graphName: string;
@Input() public graphTitle = 'Graph';
@Input() public graphIcon = 'icon-graph';
+ @Input() public dataType: DataType = DataType.number;
@Output() public graphHover = new EventEmitter();
@Output() public graphClick = new EventEmitter();
public graphSum: Number = 0;
+ public availableDataTypes = DataType;
public lineChartData: Array = [
{
@@ -60,7 +64,14 @@ export class GraphWidget implements OnInit {
},
legend: {
display: false
- }
+ },
+ tooltips: {
+ callbacks: {
+ label: (tooltip, data) => {
+ return this.tooltipLabelCallback(tooltip, data);
+ },
+ },
+ },
};
public lineChartColours: Array = [
{
@@ -72,12 +83,22 @@ export class GraphWidget implements OnInit {
public lineChartType = 'line';
- constructor(private graphService: OrgGraphsService) { }
+ constructor(
+ private graphService: OrgGraphsService,
+ private currencyPipe: CurrencyPipe,
+ ) { }
ngOnInit(): void {
if ( this.graphName == null ) {
throw new Error('Attribute \'graphName\' is required on component \'widget-graph\'');
}
+ if ( this.dataType === undefined ) {
+ // Need to do this as it may be passed in a loop with an undefined value
+ this.dataType = DataType.number;
+ }
+ if ( !( this.dataType in DataType ) ) {
+ console.warn('Unknown DataType for graph \'' + this.graphName + '\' - defaulting to number');
+ }
this.graphService.getGraph(this.graphName)
.subscribe( result => this.setData(result.graph) );
}
@@ -112,4 +133,12 @@ export class GraphWidget implements OnInit {
public chartHovered(e: any): void {
console.log(e);
}
+
+ private tooltipLabelCallback(tooltipItem: any, data: any) {
+ const value = tooltipItem.yLabel;
+ if ( this.dataType === DataType.currency ) {
+ return this.currencyPipe.transform(value, 'GBP', true, '1.2-2');
+ }
+ return value || '0';
+ }
}