From dd735e517e50cd6c6fffbe36270957c2ef8fd840 Mon Sep 17 00:00:00 2001
From: Tom Bloor <t.bloor@shadowcat.co.uk>
Date: Thu, 7 Sep 2017 13:32:42 +0100
Subject: [PATCH] Give graph ability to support different datatypes

---
 src/app/widgets/graph-widget.component.html |  3 +-
 src/app/widgets/graph-widget.component.ts   | 33 +++++++++++++++++++--
 2 files changed, 33 insertions(+), 3 deletions(-)

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 @@
     <button type="button" class="btn btn-transparent p-0 float-right">
       <i [ngClass]="graphIcon"></i>
     </button>
-    <h4 class="mb-0">{{ graphSum }}</h4>
+    <h4 *ngIf="dataType == availableDataTypes.number" class="mb-0">{{ graphSum }}</h4>
+    <h4 *ngIf="dataType == availableDataTypes.currency" class="mb-0">{{ graphSum | currency:'GBP':true:'1.2-2' }}</h4>
     <p>{{ graphTitle }}</p>
   </div>
   <div class="chart-wrapper px-3" style="height:70px;">
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<number>;
@@ -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<ChartData> = [
     {
@@ -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<any> = [
     {
@@ -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';
+  }
 }