From 44e6ba4c8be8c62abf4fa8f21a6fd716066ed437 Mon Sep 17 00:00:00 2001 From: Tom Bloor Date: Thu, 7 Sep 2017 13:32:06 +0100 Subject: [PATCH 01/11] Added data-type enum package --- src/app/shared/data-types.enum.ts | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 src/app/shared/data-types.enum.ts 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, +} From dd735e517e50cd6c6fffbe36270957c2ef8fd840 Mon Sep 17 00:00:00 2001 From: Tom Bloor Date: Thu, 7 Sep 2017 13:32:42 +0100 Subject: [PATCH 02/11] 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 @@ -

{{ 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'; + } } From 555675c31304699b45ee4d84144afb786c216224 Mon Sep 17 00:00:00 2001 From: Tom Bloor Date: Thu, 7 Sep 2017 13:32:59 +0100 Subject: [PATCH 03/11] Add update to dashboard for widget graph types --- src/app/dashboard/dashboard.component.html | 6 +++++- src/app/dashboard/dashboard.component.ts | 5 +++++ src/app/dashboard/dashboard.module.ts | 7 ++++++- 3 files changed, 16 insertions(+), 2 deletions(-) diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html index 324e795..3e2cc46 100644 --- a/src/app/dashboard/dashboard.component.html +++ b/src/app/dashboard/dashboard.component.html @@ -23,7 +23,11 @@
- +
diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts index 407d643..43ec8c1 100644 --- a/src/app/dashboard/dashboard.component.ts +++ b/src/app/dashboard/dashboard.component.ts @@ -3,6 +3,7 @@ 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 { DataType } from '../shared/data-types.enum'; @Component({ templateUrl: 'dashboard.component.html' @@ -44,22 +45,26 @@ 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, }, ]; diff --git a/src/app/dashboard/dashboard.module.ts b/src/app/dashboard/dashboard.module.ts index 117f427..005e72b 100644 --- a/src/app/dashboard/dashboard.module.ts +++ b/src/app/dashboard/dashboard.module.ts @@ -4,6 +4,8 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { ChartsModule } from 'ng2-charts/ng2-charts'; import { BsDropdownModule } from 'ngx-bootstrap/dropdown'; +import { CurrencyPipe } from '@angular/common'; + import { DashboardComponent } from './dashboard.component'; import { DashboardCustomerComponent } from './dashboard-customer.component'; import { AccountEditComponent } from './account-edit.component'; @@ -35,6 +37,9 @@ import { OrgTableComponent } from '../shared/org-table.component'; OrgTableComponent, FeedbackComponent, GraphWidget, - ] + ], + providers: [ + CurrencyPipe + ], }) export class DashboardModule { } From e19db92a2054054cc38fe8ae6d32b386b00598ab Mon Sep 17 00:00:00 2001 From: Tom Bloor Date: Thu, 7 Sep 2017 13:45:14 +0100 Subject: [PATCH 04/11] Removed unused graphs from display --- src/app/dashboard/dashboard.component.html | 199 --------------------- 1 file changed, 199 deletions(-) diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html index 3e2cc46..299e946 100644 --- a/src/app/dashboard/dashboard.component.html +++ b/src/app/dashboard/dashboard.component.html @@ -28,205 +28,6 @@ [graphTitle]="widget.title" [graphIcon]="widget.icon" [dataType]="widget.dataType"> -
-
-
-
-
{{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}}% -
    -
    -
    -
    -
    -
    • -
-
-
From 9bc9e34c510e837ad5d05f0d1fd8cc02ab25ccc4 Mon Sep 17 00:00:00 2001 From: Tom Bloor Date: Thu, 7 Sep 2017 13:58:25 +0100 Subject: [PATCH 05/11] Remove if blocks from snippets --- src/app/dashboard/dashboard.component.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html index 299e946..3e10bbc 100644 --- a/src/app/dashboard/dashboard.component.html +++ b/src/app/dashboard/dashboard.component.html @@ -2,19 +2,19 @@
    -
  • +
  • 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'}}
    • From e301a063ed4f7082b1860d782a23e4842e6cbed7 Mon Sep 17 00:00:00 2001 From: Tom Bloor Date: Thu, 7 Sep 2017 13:58:51 +0100 Subject: [PATCH 06/11] Remove unneeded code from dashboard ts --- src/app/dashboard/dashboard.component.ts | 550 +---------------------- 1 file changed, 7 insertions(+), 543 deletions(-) diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts index 43ec8c1..f77ab3d 100644 --- a/src/app/dashboard/dashboard.component.ts +++ b/src/app/dashboard/dashboard.component.ts @@ -9,23 +9,14 @@ import { DataType } from '../shared/data-types.enum'; templateUrl: 'dashboard.component.html' }) export class DashboardComponent implements OnInit { + + // Snippet data + public customersThisMonth: number; + public moneySpentThisMonth: number; + public pointsTotal: number; + public averageTransactionToday: number; + 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 = [ { @@ -73,49 +64,6 @@ export class DashboardComponent implements OnInit { 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 => { @@ -152,20 +100,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('#', ''); @@ -186,332 +124,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) { @@ -600,154 +212,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++) { From 1774f2f0d55e4a800eca4d02c9e9eae5a9c5427c Mon Sep 17 00:00:00 2001 From: Tom Bloor Date: Thu, 7 Sep 2017 15:11:36 +0100 Subject: [PATCH 07/11] Allow snippet html prefix --- tslint.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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, From cfb131b800436da99d3cbb4a64eef24debd134e9 Mon Sep 17 00:00:00 2001 From: Tom Bloor Date: Thu, 7 Sep 2017 15:12:49 +0100 Subject: [PATCH 08/11] Refactored snippet bar into seperate component --- src/app/app.module.ts | 2 ++ src/app/dashboard/dashboard.component.html | 23 +------------- src/app/dashboard/dashboard.component.ts | 23 ++------------ src/app/dashboard/dashboard.module.ts | 2 ++ src/app/providers/api-service.ts | 13 -------- src/app/providers/org-snippets.service.ts | 21 +++++++++++++ .../snippets/org-snippet-bar.component.html | 22 ++++++++++++++ src/app/snippets/org-snippet-bar.component.ts | 30 +++++++++++++++++++ 8 files changed, 80 insertions(+), 56 deletions(-) create mode 100644 src/app/providers/org-snippets.service.ts create mode 100644 src/app/snippets/org-snippet-bar.component.html create mode 100644 src/app/snippets/org-snippet-bar.component.ts 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 3e10bbc..c85910e 100644 --- a/src/app/dashboard/dashboard.component.html +++ b/src/app/dashboard/dashboard.component.html @@ -1,26 +1,5 @@
    -
    -
    -
      -
    • -
      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'}} -
      • -
    -
    -
    +
    { - 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 diff --git a/src/app/dashboard/dashboard.module.ts b/src/app/dashboard/dashboard.module.ts index 9ddfae6..0427e81 100644 --- a/src/app/dashboard/dashboard.module.ts +++ b/src/app/dashboard/dashboard.module.ts @@ -15,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'; @@ -43,6 +44,7 @@ import { TransactionResultComponent } from '../shared/transaction-result.compone TransactionResultComponent, FeedbackComponent, GraphWidget, + OrgBarSnippetComponent, ], providers: [ CurrencyPipe diff --git a/src/app/providers/api-service.ts b/src/app/providers/api-service.ts index 1be481f..3ece8ec 100644 --- a/src/app/providers/api-service.ts +++ b/src/app/providers/api-service.ts @@ -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..310143d --- /dev/null +++ b/src/app/providers/org-snippets.service.ts @@ -0,0 +1,21 @@ +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 Observable.of( + { + 'customersthismonth' : 196, + 'moneyspentthismonth' : 156.02, + 'pointstotal' : 506, + 'averagetransactiontoday' : 3.69 + } + ); + } +} 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..92c6f9a --- /dev/null +++ b/src/app/snippets/org-snippet-bar.component.html @@ -0,0 +1,22 @@ +
    +
    +
      +
    • +
      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'}} +
      • +
    +
    +
    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..eed36b8 --- /dev/null +++ b/src/app/snippets/org-snippet-bar.component.ts @@ -0,0 +1,30 @@ +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 customersThisMonth: number; + public moneySpentThisMonth: number; + public pointsTotal: number; + public averageTransactionToday: number; + + constructor( + private snippetsService: OrgSnippetsService, + ) { } + + public ngOnInit(): void { + this.snippetsService.getData() + .subscribe( + result => { + this.customersThisMonth = result.customersthismonth; + this.moneySpentThisMonth = result.moneyspentthismonth; + this.pointsTotal = result.pointstotal; + this.averageTransactionToday = result.averagetransactiontoday; + } + ); + } +} From 20da5f1e92e77de5cb39f1d603c08f6d964c870e Mon Sep 17 00:00:00 2001 From: Tom Bloor Date: Thu, 7 Sep 2017 15:35:55 +0100 Subject: [PATCH 09/11] Made data optional on api post --- src/app/providers/api-service.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/providers/api-service.ts b/src/app/providers/api-service.ts index 3ece8ec..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; } From a0e077852ddb067f7a8ef40dba90690bfc5b3d94 Mon Sep 17 00:00:00 2001 From: Tom Bloor Date: Thu, 7 Sep 2017 15:36:19 +0100 Subject: [PATCH 10/11] Change to using new api for snippets --- src/app/providers/org-snippets.service.ts | 9 +-------- src/app/snippets/org-snippet-bar.component.ts | 16 ++++++++-------- 2 files changed, 9 insertions(+), 16 deletions(-) diff --git a/src/app/providers/org-snippets.service.ts b/src/app/providers/org-snippets.service.ts index 310143d..a3849ef 100644 --- a/src/app/providers/org-snippets.service.ts +++ b/src/app/providers/org-snippets.service.ts @@ -9,13 +9,6 @@ export class OrgSnippetsService { constructor(private api: ApiService) { } public getData(): Observable { - return Observable.of( - { - 'customersthismonth' : 196, - 'moneyspentthismonth' : 156.02, - 'pointstotal' : 506, - 'averagetransactiontoday' : 3.69 - } - ); + return this.api.post(this.orgSnippetsUrl); } } diff --git a/src/app/snippets/org-snippet-bar.component.ts b/src/app/snippets/org-snippet-bar.component.ts index eed36b8..a545202 100644 --- a/src/app/snippets/org-snippet-bar.component.ts +++ b/src/app/snippets/org-snippet-bar.component.ts @@ -7,10 +7,10 @@ import { OrgSnippetsService } from '../providers/org-snippets.service'; }) export class OrgBarSnippetComponent implements OnInit { - public customersThisMonth: number; - public moneySpentThisMonth: number; - public pointsTotal: number; - public averageTransactionToday: number; + public customersThisMonth = 0; + public moneySpentThisMonth = 0; + public pointsTotal = 0; + public averageTransactionToday = 0; constructor( private snippetsService: OrgSnippetsService, @@ -20,10 +20,10 @@ export class OrgBarSnippetComponent implements OnInit { this.snippetsService.getData() .subscribe( result => { - this.customersThisMonth = result.customersthismonth; - this.moneySpentThisMonth = result.moneyspentthismonth; - this.pointsTotal = result.pointstotal; - this.averageTransactionToday = result.averagetransactiontoday; + this.customersThisMonth = result.snippets.this_month_customer_count; + this.moneySpentThisMonth = result.snippets.this_month_customer_spend; + this.pointsTotal = result.snippets.pear_points_total; + this.averageTransactionToday = result.snippets.today_sales_average; } ); } From f0ed1e9369a2ef464bcc08cbc2b59918dff68910 Mon Sep 17 00:00:00 2001 From: Tom Bloor Date: Thu, 7 Sep 2017 16:02:29 +0100 Subject: [PATCH 11/11] Update snippets to use new snippets api and dataset --- .../snippets/org-snippet-bar.component.html | 10 +++--- src/app/snippets/org-snippet-bar.component.ts | 34 ++++++++++++++----- 2 files changed, 31 insertions(+), 13 deletions(-) diff --git a/src/app/snippets/org-snippet-bar.component.html b/src/app/snippets/org-snippet-bar.component.html index 92c6f9a..e1e76ef 100644 --- a/src/app/snippets/org-snippet-bar.component.html +++ b/src/app/snippets/org-snippet-bar.component.html @@ -3,19 +3,19 @@
    • Customers This Month
      - {{customersThisMonth}} + {{ thisMonthSalesCount }}
    • Money Spent This Month
      - {{moneySpentThisMonth | currency:'GBP':true:'1.2-2'}} + {{ thisMonthPurchasesTotal | currency:'GBP':true:'1.2-2'}}
    • -
      Points Total
      - {{pointsTotal}} +
      Customers Today
      + {{ todaySalesCount }}
    • Average Transaction Today
      - {{averageTransactionToday | currency:'GBP':true:'1.2-2'}} + {{ ( 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 index a545202..76a47ab 100644 --- a/src/app/snippets/org-snippet-bar.component.ts +++ b/src/app/snippets/org-snippet-bar.component.ts @@ -7,10 +7,19 @@ import { OrgSnippetsService } from '../providers/org-snippets.service'; }) export class OrgBarSnippetComponent implements OnInit { - public customersThisMonth = 0; - public moneySpentThisMonth = 0; - public pointsTotal = 0; - public averageTransactionToday = 0; + 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, @@ -20,10 +29,19 @@ export class OrgBarSnippetComponent implements OnInit { this.snippetsService.getData() .subscribe( result => { - this.customersThisMonth = result.snippets.this_month_customer_count; - this.moneySpentThisMonth = result.snippets.this_month_customer_spend; - this.pointsTotal = result.snippets.pear_points_total; - this.averageTransactionToday = result.snippets.today_sales_average; + 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; } ); }