diff --git a/src/app/app.module.ts b/src/app/app.module.ts index c9ab0fc..6b81ab1 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -21,6 +21,7 @@ import { CustomerGuard } from './_guards/customer.guard'; import { ApiService } from './providers/api-service'; import { OrgGraphsService } from './providers/org-graphs.service'; +import { OrgSnippetsService } from './providers/org-snippets.service'; // Layouts import { FullLayoutComponent } from './layouts/full-layout.component'; @@ -63,6 +64,7 @@ import { DashboardModule } from './dashboard/dashboard.module'; CustomerGuard, ApiService, OrgGraphsService, + OrgSnippetsService, { provide: LocationStrategy, useClass: HashLocationStrategy diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html index 324e795..c85910e 100644 --- a/src/app/dashboard/dashboard.component.html +++ b/src/app/dashboard/dashboard.component.html @@ -1,228 +1,12 @@
-
-
-
    -
  • -
    Customers This Month
    - {{customersThisMonth}} -
    • -
  • -
    Money Spent This Month
    - {{moneySpentThisMonth | currency:'GBP':true:'1.2-2'}} -
    • -
  • -
    Points Total
    - {{pointsTotal}} -
    • -
  • -
    Average Transaction Today
    - {{averageTransactionToday | currency:'GBP':true:'1.2-2'}} -
    • -
-
-
+
- -
-
-
-
-
{{noOfCustomersSector}}
-
No. of Customers in your Sector
-
-
-
- Lorem ipsum dolor sit amet enim. -
-
-
-
-
-
-
{{percentOfCustomersSector}}%
-
Customers in your Sector
-
-
-
- Lorem ipsum dolor sit amet enim. -
-
-
-
-
-
- -

9.823

-

Customers last year

-
-
- -
-
-
-
-
-
- -

9.823

-

Returning Customers last week

-
-
- -
-
-
-
-
-
- -

9.823

-

Returning Customers last month

-
-
- -
-
-
-
-
-
- -

9.823

-

Returning Customers last year

-
-
- -
-
-
-
-
-
-
- -
- Action - Another action - Something else here -
-
-

9.823

-

Points earned this week

-
-
- -
-
-
-
-
-
-
- -
- Action - Another action - Something else here -
-
-

9.823

-

Points earned last week

-
-
- -
-
-
-
-
-
-
Your suppliers that are local vs a local competitor
-
    -
  • - - Yours - {{percentOfLocalSuppliers}}% -
    -
    -
    -
    -
    -
    • -
  • - - A competitor - {{percentOfSingleCompetitorLocalSuppliers}}% -
    -
    -
    -
    -
    -
    • -
-
-
+
diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts index 407d643..f5530b7 100644 --- a/src/app/dashboard/dashboard.component.ts +++ b/src/app/dashboard/dashboard.component.ts @@ -1,30 +1,15 @@ import { Directive, Component, OnInit } from '@angular/core'; -import { Http, Response } from '@angular/http'; -import { ApiService } from '../providers/api-service'; import { Router } from '@angular/router'; import { GraphWidget } from '../widgets/graph-widget.component'; +import { OrgBarSnippetComponent } from '../snippets/org-snippet-bar.component'; +import { DataType } from '../shared/data-types.enum'; @Component({ templateUrl: 'dashboard.component.html' }) export class DashboardComponent implements OnInit { + shuffledArray: any; - showGraph: any; - showSnippet: any; - customersThisMonth: any; - moneySpentThisMonth: any; - pointsTotal: any; - averageTransactionToday: any; - customersThisWeek: any; - customersLastWeek: any; - customersLastMonth: any; - customersLastYear: any; - pointsThisWeek: any; - pointsLastWeek: any; - percentOfCustomersSector: any; - noOfCustomersSector: any; - percentOfLocalSuppliers: any; - percentOfSingleCompetitorLocalSuppliers: any; public widgetList = [ { @@ -44,83 +29,32 @@ export class DashboardComponent implements OnInit { name: 'sales_last_7_days', icon: 'icon-diamond', title: 'Sales Last 7 Days', + dataType: DataType.currency, }, { type: 'graph', name: 'sales_last_30_days', icon: 'icon-diamond', title: 'Sales Last 30 Days', + dataType: DataType.currency, }, { type: 'graph', name: 'purchases_last_7_days', title: 'Purchases Last 7 Days', + dataType: DataType.currency, }, { type: 'graph', name: 'purchases_last_30_days', title: 'Purchases Last 30 Days', + dataType: DataType.currency, }, ]; constructor( - private http: Http, - private api: ApiService, ) { - this.shuffle = this.shuffledArray; - this.api.graph_data(undefined) - .subscribe( - result => { - console.log(result); - // Return what data to show 4 of - this.showGraph = result.elementstoshow.graphs; - this.showSnippet = result.elementstoshow.snippets; - // Percentage Chart - this.percentOfLocalSuppliers = result.data.localsuppliers.percentownlocal; - this.percentOfSingleCompetitorLocalSuppliers = result.data.localsuppliers.percentsinglecompetitorlocal; - // Percentage Chart 2 - this.percentOfCustomersSector = result.data.customersinsector.percent; - this.noOfCustomersSector = result.data.customersinsector.customerno; - // Chart 1 - this.customersThisWeek = result.data.customersthisweek; - this.lineChart1Data[0].data = this.customersThisWeek.customerno; - this.lineChart1Labels = this.customersThisWeek.day; - // Chart 4 - this.customersLastYear = result.data.customerslastyear; - this.lineChart4Data[0].data = this.customersLastYear.customerno; - this.lineChart4Labels = this.customersLastYear.month; - // Chart 5 - this.pointsThisWeek = result.data.pointsthisweek; - this.lineChart5Data[0].data = this.pointsThisWeek.points; - this.lineChart5Labels = this.pointsThisWeek.day; - // Chart 6 - this.pointsLastWeek = result.data.pointslastweek; - this.barChart1Data[0].data = this.pointsLastWeek.points; - this.barChart1Labels = this.pointsLastWeek.day; - // Chart 7 - this.customersLastWeek = result.data.customerslastweek; - this.lineChart6Data[0].data = this.customersLastWeek.returningcustomerno; - this.lineChart6Labels = this.customersLastWeek.day; - // Chart 8 - this.customersLastMonth = result.data.customerslastmonth; - this.lineChart7Data[0].data = this.customersLastMonth.returningcustomerno; - this.lineChart7Labels = this.customersLastMonth.day; - // Chart 9 - this.customersLastYear = result.data.customerslastyear; - this.lineChart8Data[0].data = this.customersLastYear.returningcustomerno; - this.lineChart8Labels = this.customersLastYear.month; - } - ), - this.api.breadcrumb_data(undefined) - .subscribe( - result => { - console.log(result); - this.customersThisMonth = result.customersthismonth; - this.moneySpentThisMonth = result.moneyspentthismonth; - this.pointsTotal = result.pointstotal; - this.averageTransactionToday = result.averagetransactiontoday; - } - ); + this.shuffle = this.shuffledArray; } // Fisher-Yates shuffle function @@ -147,20 +81,10 @@ export class DashboardComponent implements OnInit { }); } - public brandPrimary = '#20a8d8'; public brandSuccess = '#4dbd74'; public brandInfo = '#63c2de'; - public brandWarning = '#f8cb00'; public brandDanger = '#f86c6b'; - // dropdown buttons - public status: { isopen } = { isopen: false }; - public toggleDropdown($event: MouseEvent): void { - $event.preventDefault(); - $event.stopPropagation(); - this.status.isopen = !this.status.isopen; - } - // convert Hex to RGBA public convertHex(hex: string, opacity: number) { hex = hex.replace('#', ''); @@ -181,332 +105,6 @@ export class DashboardComponent implements OnInit { console.log(e); } - // lineChart1 - public lineChart1Data: Array = [ - { - data: [], - label: 'Series A' - } - ]; - public lineChart1Labels: Array = []; - public lineChart1Options: any = { - maintainAspectRatio: false, - scales: { - xAxes: [{ - gridLines: { - color: 'transparent', - zeroLineColor: 'transparent' - }, - ticks: { - fontSize: 2, - fontColor: 'transparent', - } - - }], - yAxes: [{ - display: false, - ticks: { - display: false, - } - }], - }, - elements: { - line: { - borderWidth: 1 - }, - point: { - radius: 4, - hitRadius: 10, - hoverRadius: 4, - }, - }, - legend: { - display: false - } - }; - public lineChart1Colours: Array = [ - { // grey - backgroundColor: this.brandPrimary, - borderColor: 'rgba(255,255,255,.55)' - } - ]; - public lineChart1Legend = false; - public lineChart1Type = 'line'; - - // lineChart4 - public lineChart4Data: Array = [ - { - data: [], - label: 'Series B' - } - ]; - public lineChart4Labels: Array = []; - public lineChart4Options: any = { - maintainAspectRatio: false, - scales: { - xAxes: [{ - gridLines: { - color: 'transparent', - zeroLineColor: 'transparent' - }, - ticks: { - fontSize: 2, - fontColor: 'transparent', - } - - }], - yAxes: [{ - display: false, - ticks: { - display: false, - } - }], - }, - elements: { - line: { - tension: 0.00001, - borderWidth: 1 - }, - point: { - radius: 4, - hitRadius: 10, - hoverRadius: 4, - }, - }, - legend: { - display: false - } - }; - public lineChart4Colours: Array = [ - { // grey - backgroundColor: this.brandInfo, - borderColor: 'rgba(255,255,255,.55)' - } - ]; - public lineChart4Legend = false; - public lineChart4Type = 'line'; - - // lineChart6 - public lineChart6Data: Array = [ - { - data: [], - label: 'Series B' - } - ]; - public lineChart6Labels: Array = []; - public lineChart6Options: any = { - maintainAspectRatio: false, - scales: { - xAxes: [{ - gridLines: { - color: 'transparent', - zeroLineColor: 'transparent' - }, - ticks: { - fontSize: 2, - fontColor: 'transparent', - } - - }], - yAxes: [{ - display: false, - ticks: { - display: false, - } - }], - }, - elements: { - line: { - tension: 0.00001, - borderWidth: 1 - }, - point: { - radius: 4, - hitRadius: 10, - hoverRadius: 4, - }, - }, - legend: { - display: false - } - }; - public lineChart6Colours: Array = [ - { // grey - backgroundColor: this.brandInfo, - borderColor: 'rgba(255,255,255,.55)' - } - ]; - public lineChart6Legend = false; - public lineChart6Type = 'line'; - - // lineChart7 - public lineChart7Data: Array = [ - { - data: [], - label: 'Series B' - } - ]; - public lineChart7Labels: Array = []; - public lineChart7Options: any = { - maintainAspectRatio: false, - scales: { - xAxes: [{ - display: false - }], - yAxes: [{ - display: false - }] - }, - elements: { - line: { - borderWidth: 2 - }, - point: { - radius: 2, - hitRadius: 10, - hoverRadius: 4, - }, - }, - legend: { - display: false - } - }; - public lineChart7Colours: Array = [ - { // grey - backgroundColor: this.brandInfo, - borderColor: 'rgba(255,255,255,.55)' - } - ]; - public lineChart7Legend = false; - public lineChart7Type = 'line'; - - // lineChart8 - public lineChart8Data: Array = [ - { - data: [], - label: 'Series B' - } - ]; - public lineChart8Labels: Array = []; - public lineChart8Options: any = { - maintainAspectRatio: false, - scales: { - xAxes: [{ - gridLines: { - color: 'transparent', - zeroLineColor: 'transparent' - }, - ticks: { - fontSize: 2, - fontColor: 'transparent', - } - - }], - yAxes: [{ - display: false, - ticks: { - display: false, - } - }], - }, - elements: { - line: { - tension: 0.00001, - borderWidth: 1 - }, - point: { - radius: 4, - hitRadius: 10, - hoverRadius: 4, - }, - }, - legend: { - display: false - } - }; - public lineChart8Colours: Array = [ - { // grey - backgroundColor: this.brandInfo, - borderColor: 'rgba(255,255,255,.55)' - } - ]; - public lineChart8Legend = false; - public lineChart8Type = 'line'; - - // lineChart5 - public lineChart5Data: Array = [ - { - data: [], - label: 'Series A' - } - ]; - public lineChart5Labels: Array = []; - public lineChart5Options: any = { - maintainAspectRatio: false, - scales: { - xAxes: [{ - display: false - }], - yAxes: [{ - display: false - }] - }, - elements: { - line: { - borderWidth: 2 - }, - point: { - radius: 0, - hitRadius: 10, - hoverRadius: 4, - }, - }, - legend: { - display: false - } - }; - public lineChart5Colours: Array = [ - { - backgroundColor: 'rgba(255,255,255,.2)', - borderColor: 'rgba(255,255,255,.55)', - } - ]; - public lineChart5Legend = false; - public lineChart5Type = 'line'; - - - // barChart1 - public barChart1Data: Array = [ - { - data: [], - label: 'Series A' - } - ]; - public barChart1Labels: Array = []; - public barChart1Options: any = { - maintainAspectRatio: false, - scales: { - xAxes: [{ - display: false, - barPercentage: 0.6, - }], - yAxes: [{ - display: false - }] - }, - legend: { - display: false - } - }; - public barChart1Colours: Array = [ - { - backgroundColor: 'rgba(255,255,255,.3)', - borderWidth: 0 - } - ]; - public barChart1Legend = false; - public barChart1Type = 'bar'; - // mainChart public random(min: number, max: number) { @@ -595,154 +193,6 @@ export class DashboardComponent implements OnInit { public mainChartLegend = false; public mainChartType = 'line'; - // social box charts - - public socialChartData1: Array = [ - { - data: [65, 59, 84, 84, 51, 55, 40], - label: 'Facebook' - } - ]; - public socialChartData2: Array = [ - { - data: [1, 13, 9, 17, 34, 41, 38], - label: 'Twitter' - } - ]; - public socialChartData3: Array = [ - { - data: [78, 81, 80, 45, 34, 12, 40], - label: 'LinkedIn' - } - ]; - public socialChartData4: Array = [ - { - data: [35, 23, 56, 22, 97, 23, 64], - label: 'Google+' - } - ]; - - public socialChartLabels: Array = ['January', 'February', 'March', 'April', 'May', 'June', 'July']; - public socialChartOptions: any = { - responsive: true, - maintainAspectRatio: false, - scales: { - xAxes: [{ - display: false, - }], - yAxes: [{ - display: false, - }] - }, - elements: { - line: { - borderWidth: 2 - }, - point: { - radius: 0, - hitRadius: 10, - hoverRadius: 4, - hoverBorderWidth: 3, - } - }, - legend: { - display: false - } - }; - public socialChartColours: Array = [ - { - backgroundColor: 'rgba(255,255,255,.1)', - borderColor: 'rgba(255,255,255,.55)', - pointHoverBackgroundColor: '#fff' - } - ]; - public socialChartLegend = false; - public socialChartType = 'line'; - - // sparkline charts - - public sparklineChartData1: Array = [ - { - data: [35, 23, 56, 22, 97, 23, 64], - label: 'Clients' - } - ]; - public sparklineChartData2: Array = [ - { - data: [65, 59, 84, 84, 51, 55, 40], - label: 'Clients' - } - ]; - - public sparklineChartLabels: Array = ['January', 'February', 'March', 'April', 'May', 'June', 'July']; - public sparklineChartOptions: any = { - responsive: true, - maintainAspectRatio: false, - scales: { - xAxes: [{ - display: false, - }], - yAxes: [{ - display: false, - }] - }, - elements: { - line: { - borderWidth: 2 - }, - point: { - radius: 0, - hitRadius: 10, - hoverRadius: 4, - hoverBorderWidth: 3, - } - }, - legend: { - display: false - } - }; - public sparklineChartDefault: Array = [ - { - backgroundColor: 'transparent', - borderColor: '#d1d4d7', - } - ]; - public sparklineChartPrimary: Array = [ - { - backgroundColor: 'transparent', - borderColor: this.brandPrimary, - } - ]; - public sparklineChartInfo: Array = [ - { - backgroundColor: 'transparent', - borderColor: this.brandInfo, - } - ]; - public sparklineChartDanger: Array = [ - { - backgroundColor: 'transparent', - borderColor: this.brandDanger, - } - ]; - public sparklineChartWarning: Array = [ - { - backgroundColor: 'transparent', - borderColor: this.brandWarning, - } - ]; - public sparklineChartSuccess: Array = [ - { - backgroundColor: 'transparent', - borderColor: this.brandSuccess, - } - ]; - - - public sparklineChartLegend = false; - public sparklineChartType = 'line'; - - ngOnInit(): void { // generate random values for mainChart for (let i = 0; i <= this.mainChartElements; i++) { diff --git a/src/app/dashboard/dashboard.module.ts b/src/app/dashboard/dashboard.module.ts index 7f2b40d..0427e81 100644 --- a/src/app/dashboard/dashboard.module.ts +++ b/src/app/dashboard/dashboard.module.ts @@ -5,6 +5,8 @@ import { ChartsModule } from 'ng2-charts/ng2-charts'; import { BsDropdownModule } from 'ngx-bootstrap/dropdown'; import { NgxPaginationModule } from 'ngx-pagination'; +import { CurrencyPipe } from '@angular/common'; + import { DashboardComponent } from './dashboard.component'; import { DashboardCustomerComponent } from './dashboard-customer.component'; import { AccountEditComponent } from './account-edit.component'; @@ -13,6 +15,7 @@ import { FeedbackComponent } from './feedback.component'; import { TransactionLogComponent } from './transaction-log.component'; import { GraphWidget } from '../widgets/graph-widget.component'; +import { OrgBarSnippetComponent } from '../snippets/org-snippet-bar.component'; import { DashboardRoutingModule } from './dashboard.routing'; import { OrgResultComponent } from '../shared/org-result.component'; @@ -41,6 +44,10 @@ import { TransactionResultComponent } from '../shared/transaction-result.compone TransactionResultComponent, FeedbackComponent, GraphWidget, - ] + OrgBarSnippetComponent, + ], + providers: [ + CurrencyPipe + ], }) export class DashboardModule { } diff --git a/src/app/providers/api-service.ts b/src/app/providers/api-service.ts index 1be481f..ee131d0 100644 --- a/src/app/providers/api-service.ts +++ b/src/app/providers/api-service.ts @@ -18,7 +18,7 @@ export class ApiService { } } - public post(url, data) { + public post(url: string, data: any = {}) { if ( this.sessionKey != null ) { data.session_key = this.sessionKey; } @@ -230,19 +230,6 @@ export class ApiService { ).map( response => response.json() ); } - // Fake Breadcrumb data - - public breadcrumb_data(data) { - return Observable.of( - { - "customersthismonth" : 196, - "moneyspentthismonth" : 156.02, - "pointstotal" : 506, - "averagetransactiontoday" : 3.69 - } - ) - } - // Fake chart data to mimic public graph_data(data) { diff --git a/src/app/providers/org-snippets.service.ts b/src/app/providers/org-snippets.service.ts new file mode 100644 index 0000000..a3849ef --- /dev/null +++ b/src/app/providers/org-snippets.service.ts @@ -0,0 +1,14 @@ +import { Injectable } from '@angular/core'; +import { ApiService } from './api-service'; +import { Observable } from 'rxjs/Rx'; + +@Injectable() +export class OrgSnippetsService { + private orgSnippetsUrl = '/v1/organisation/snippets'; + + constructor(private api: ApiService) { } + + public getData(): Observable { + return this.api.post(this.orgSnippetsUrl); + } +} diff --git a/src/app/shared/data-types.enum.ts b/src/app/shared/data-types.enum.ts new file mode 100644 index 0000000..7cf23fa --- /dev/null +++ b/src/app/shared/data-types.enum.ts @@ -0,0 +1,4 @@ +export enum DataType { + number, + currency, +} diff --git a/src/app/snippets/org-snippet-bar.component.html b/src/app/snippets/org-snippet-bar.component.html new file mode 100644 index 0000000..e1e76ef --- /dev/null +++ b/src/app/snippets/org-snippet-bar.component.html @@ -0,0 +1,22 @@ +
+
+
    +
  • +
    Customers This Month
    + {{ thisMonthSalesCount }} +
    • +
  • +
    Money Spent This Month
    + {{ thisMonthPurchasesTotal | currency:'GBP':true:'1.2-2'}} +
    • +
  • +
    Customers Today
    + {{ todaySalesCount }} +
    • +
  • +
    Average Transaction Today
    + {{ ( todaySalesTotal / todaySalesCount ) || 0 | currency:'GBP':true:'1.2-2'}} +
    • +
+
+
diff --git a/src/app/snippets/org-snippet-bar.component.ts b/src/app/snippets/org-snippet-bar.component.ts new file mode 100644 index 0000000..76a47ab --- /dev/null +++ b/src/app/snippets/org-snippet-bar.component.ts @@ -0,0 +1,48 @@ +import { Component, OnInit } from '@angular/core'; +import { OrgSnippetsService } from '../providers/org-snippets.service'; + +@Component({ + selector: 'snippet-bar-org', + templateUrl: 'org-snippet-bar.component.html', +}) +export class OrgBarSnippetComponent implements OnInit { + + public thisMonthSalesCount = 0; + public thisMonthSalesTotal = 0; + public thisWeekSalesCount = 0; + public thisWeekSalesTotal = 0; + public todaySalesCount = 0; + public todaySalesTotal = 0; + + public thisMonthPurchasesCount = 0; + public thisMonthPurchasesTotal = 0; + public thisWeekPurchasesCount = 0; + public thisWeekPurchasesTotal = 0; + public todayPurchasesCount = 0; + public todayPurchasesTotal = 0; + + constructor( + private snippetsService: OrgSnippetsService, + ) { } + + public ngOnInit(): void { + this.snippetsService.getData() + .subscribe( + result => { + this.thisMonthSalesCount = result.snippets.this_month_sales_count; + this.thisMonthSalesTotal = result.snippets.this_month_sales_total; + this.thisWeekSalesCount = result.snippets.this_week_sales_count; + this.thisWeekSalesTotal = result.snippets.this_week_sales_total; + this.todaySalesCount = result.snippets.today_sales_count; + this.todaySalesTotal = result.snippets.today_sales_total; + + this.thisMonthPurchasesCount = result.snippets.this_week_purchases_count; + this.thisMonthPurchasesTotal = result.snippets.this_week_purchases_total; + this.thisWeekPurchasesCount = result.snippets.this_month_purchases_count; + this.thisWeekPurchasesTotal = result.snippets.this_month_purchases_total; + this.todayPurchasesCount = result.snippets.today_purchases_count; + this.todayPurchasesTotal = result.snippets.today_purchases_total; + } + ); + } +} 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'; + } } diff --git a/tslint.json b/tslint.json index b6363ed..ee44f97 100644 --- a/tslint.json +++ b/tslint.json @@ -99,7 +99,7 @@ ], "directive-selector": [true, "attribute", "app", "camelCase"], - "component-selector": [true, "element", ["app", "widget"], "kebab-case"], + "component-selector": [true, "element", ["app", "widget", "snippet"], "kebab-case"], "use-input-property-decorator": true, "use-output-property-decorator": true, "use-host-property-decorator": true,