From 6eb6425fb813c83c8450c788ca3e1d0afc757277 Mon Sep 17 00:00:00 2001 From: piratefinn Date: Tue, 12 Dec 2017 15:10:44 +0000 Subject: [PATCH 1/9] More placeholder code for customer dashboard --- src/app/app.module.ts | 4 + .../dashboard-customer.component.html | 134 ++---------------- .../dashboard/dashboard-customer.component.ts | 76 +++++++--- src/app/dashboard/dashboard.component.html | 3 +- src/app/dashboard/dashboard.module.ts | 2 + src/app/providers/cust-graphs.service.ts | 14 ++ src/app/providers/cust-snippets.service.ts | 15 ++ .../snippets/cust-snippet-bar.component.html | 27 ++++ .../snippets/cust-snippet-bar.component.ts | 48 +++++++ 9 files changed, 174 insertions(+), 149 deletions(-) create mode 100644 src/app/providers/cust-graphs.service.ts create mode 100644 src/app/providers/cust-snippets.service.ts create mode 100644 src/app/snippets/cust-snippet-bar.component.html create mode 100644 src/app/snippets/cust-snippet-bar.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 07d74ad..8821973 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -21,7 +21,9 @@ import { CustomerGuard } from './_guards/customer.guard'; import { ApiService } from './providers/api-service'; import { OrgGraphsService } from './providers/org-graphs.service'; +import { CustGraphsService } from './providers/cust-graphs.service'; import { OrgSnippetsService } from './providers/org-snippets.service'; +import { CustSnippetsService } from './providers/cust-snippets.service'; // Layouts import { FullLayoutComponent } from './layouts/full-layout.component'; @@ -65,6 +67,8 @@ import { DashboardModule } from './dashboard/dashboard.module'; ApiService, OrgGraphsService, OrgSnippetsService, + CustGraphsService, + CustSnippetsService, { provide: LocationStrategy, useClass: HashLocationStrategy diff --git a/src/app/dashboard/dashboard-customer.component.html b/src/app/dashboard/dashboard-customer.component.html index 6a7c209..494c09a 100644 --- a/src/app/dashboard/dashboard-customer.component.html +++ b/src/app/dashboard/dashboard-customer.component.html @@ -1,131 +1,13 @@
-
-
-
    -
  • -
    My Points
    - {{ basicStats.user_sum / 10 | number:'1.0-0' }} -
    • -
  • -
    My Rank
    -
    - Unranked -
    -
    - {{ basicStats.user_position }} -
    -
    • -
-
-
-
    -
  • -
    My Total Spend
    - {{ basicStats.user_sum | currency:'GBP':'symbol':'1.2-2' }} -
    • -
  • -
    Value to Local Economy
    - {{ basicStats.user_sum * 2.3 | currency:'GBP':'symbol':'1.2-2' }} -
    • -
-
-
+
-
-
-
-
{{ basicStats.today_sum | currency:'GBP':'symbol':'1.2-2' }}
-
Total Today
- -
-
-
-
-
-
-
{{ basicStats.today_sum / (basicStats.today_count ? basicStats.today_count : 1) | currency:'GBP':'symbol':'1.2-2' }}
-
Avg. Spend Today
- -
-
-
-
-
-
-
{{ basicStats.week_sum | currency:'GBP':'symbol':'1.2-2' }}
-
Last Week Total
- -
-
-
-
-
-
-
{{ basicStats.week_sum / (basicStats.week_count ? basicStats.week_count : 1) | currency:'GBP':'symbol':'1.2-2' }}
-
Last Week Avg. Spend
- -
-
-
-
-
-
-
{{ basicStats.month_sum | currency:'GBP':'symbol':'1.2-2' }}
-
Last Month Total
- -
-
-
-
-
-
-
{{ basicStats.month_sum / (basicStats.month_count ? basicStats.month_count : 1) | currency:'GBP':'symbol':'1.2-2' }}
-
Last Month Avg. Spend
- -
-
-
-
-
-
-
{{ basicStats.user_sum | currency:'GBP':'symbol':'1.2-2' }}
-
User Total
- -
-
-
-
-
-
-
{{ basicStats.user_sum / (basicStats.user_count ? basicStats.user_count : 1) | currency:'GBP':'symbol':'1.2-2' }}
-
User Avg. Spend
- -
-
+
+ +
diff --git a/src/app/dashboard/dashboard-customer.component.ts b/src/app/dashboard/dashboard-customer.component.ts index 39230e3..e80fb9f 100644 --- a/src/app/dashboard/dashboard-customer.component.ts +++ b/src/app/dashboard/dashboard-customer.component.ts @@ -2,6 +2,8 @@ import { Directive, Component, OnInit } from '@angular/core'; import { ApiService } from '../providers/api-service'; import { Router } from '@angular/router'; import { GraphWidget } from '../widgets/graph-widget.component'; +import { CustBarSnippetComponent } from '../snippets/cust-snippet-bar.component'; +import { DataType } from '../shared/data-types.enum'; @Component({ templateUrl: 'dashboard-customer.component.html' @@ -20,32 +22,62 @@ export class DashboardCustomerComponent implements OnInit { myRank: any; username: any; - basicStats = { - today_sum: 0, - today_count: 0, - week_sum: 0, - week_count: 0, - month_sum: 0, - month_count: 0, - user_sum: 0, - user_count: 0, - global_sum: 0, - global_count: 0, - user_position: 0, - }; + public widgetList = [ + { + type: 'graph', + name: 'total_today', + title: 'Total Today', + dataType: DataType.currency, + }, + { + type: 'graph', + name: 'avg_spend_today', + title: 'Avg. Spend Today', + dataType: DataType.currency, + }, + { + type: 'graph', + name: 'total_last_week', + icon: 'icon-diamond', + title: 'Last Week Total', + dataType: DataType.currency, + }, + { + type: 'graph', + name: 'avg_spend_last_week', + icon: 'icon-diamond', + title: 'Last Week Avg. Spend', + dataType: DataType.currency, + }, + { + type: 'graph', + name: 'total_last_month', + title: 'Last Month Total', + dataType: DataType.currency, + }, + { + type: 'graph', + name: 'avg_spend_last_month', + title: 'Last Month Avg. Spend', + dataType: DataType.currency, + }, + { + type: 'graph', + name: 'total_user', + title: 'User Total', + dataType: DataType.currency, + }, + { + type: 'graph', + name: 'avg_spend_user', + title: 'User Avg. Spend', + dataType: DataType.currency, + }, + ]; constructor( private api: ApiService, ) { - this.api.basicStats().subscribe( - result => { - this.basicStats = result; - }, - error => { - console.log('Retrieval Error'); - console.log( error._body ); - } - ); } ngOnInit(): void { diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html index 4ee858b..ff6f092 100644 --- a/src/app/dashboard/dashboard.component.html +++ b/src/app/dashboard/dashboard.component.html @@ -6,7 +6,8 @@ [graphName]="widget.name" [graphTitle]="widget.title" [graphIcon]="widget.icon" - [dataType]="widget.dataType"> + [dataType]="widget.dataType"> +
diff --git a/src/app/dashboard/dashboard.module.ts b/src/app/dashboard/dashboard.module.ts index 0e5302b..57f439f 100644 --- a/src/app/dashboard/dashboard.module.ts +++ b/src/app/dashboard/dashboard.module.ts @@ -23,6 +23,7 @@ import { TrailMapComponent } from './trail-map.component'; import { GraphWidget } from '../widgets/graph-widget.component'; import { OrgBarSnippetComponent } from '../snippets/org-snippet-bar.component'; +import { CustBarSnippetComponent } from '../snippets/cust-snippet-bar.component'; import { GraphPanel } from '../panels/graph-panel.component'; import { DashboardRoutingModule } from './dashboard.routing'; @@ -69,6 +70,7 @@ import { environment } from '../../environments/environment'; FeedbackComponent, GraphWidget, OrgBarSnippetComponent, + CustBarSnippetComponent, GraphPanel, ], providers: [ diff --git a/src/app/providers/cust-graphs.service.ts b/src/app/providers/cust-graphs.service.ts new file mode 100644 index 0000000..e03da37 --- /dev/null +++ b/src/app/providers/cust-graphs.service.ts @@ -0,0 +1,14 @@ +import { Injectable } from '@angular/core'; +import { ApiService } from './api-service'; + +@Injectable() +export class CustGraphsService { + private custGraphUrl = '/v1/customer/graphs'; + + constructor(private api: ApiService) { } + + public getGraph(name: string, data: any = {}) { + data.graph = name; + return this.api.post(this.custGraphUrl, data); + } +} diff --git a/src/app/providers/cust-snippets.service.ts b/src/app/providers/cust-snippets.service.ts new file mode 100644 index 0000000..b70ac36 --- /dev/null +++ b/src/app/providers/cust-snippets.service.ts @@ -0,0 +1,15 @@ +import { Injectable } from '@angular/core'; +import { ApiService } from './api-service'; +import { Observable } from 'rxjs/Rx'; + +@Injectable() +export class CustSnippetsService { + private orgSnippetsUrl = '/v1/organisation/snippets'; + + constructor(private api: ApiService) { } + + // This endpoint should mimic basicStats + public getData(): Observable { + return this.api.post(this.orgSnippetsUrl); + } +} diff --git a/src/app/snippets/cust-snippet-bar.component.html b/src/app/snippets/cust-snippet-bar.component.html new file mode 100644 index 0000000..6f7176d --- /dev/null +++ b/src/app/snippets/cust-snippet-bar.component.html @@ -0,0 +1,27 @@ +
+
+
    +
  • +
    My Points
    + {{ basicStats.user_sum / 10 | number:'1.0-0' }} +
    • +
  • +
    My Rank
    +
    + Unranked +
    +
    + {{ basicStats.user_position }} +
    +
    • +
  • +
    My Total Spend
    + {{ basicStats.user_sum | currency:'GBP':'symbol':'1.2-2' }} +
    • +
  • +
    Value to Local Economy
    + {{ basicStats.user_sum * 2.3 | currency:'GBP':'symbol':'1.2-2' }} +
    • +
+
+
diff --git a/src/app/snippets/cust-snippet-bar.component.ts b/src/app/snippets/cust-snippet-bar.component.ts new file mode 100644 index 0000000..c680ece --- /dev/null +++ b/src/app/snippets/cust-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-cust', + templateUrl: 'cust-snippet-bar.component.html', +}) +export class CustBarSnippetComponent 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; + } + ); + } +} From 32bebd7c24fc88428f51e6a847afe4fcd57b9ecf Mon Sep 17 00:00:00 2001 From: piratefinn Date: Wed, 13 Dec 2017 12:37:11 +0000 Subject: [PATCH 2/9] Added working snippets and placeholder pie chart --- .../dashboard-customer.component.html | 6 ++ .../dashboard/dashboard-customer.component.ts | 11 ++- src/app/dashboard/dashboard.module.ts | 2 + src/app/panels/pie-panel.component.html | 27 ++++++ src/app/panels/pie-panel.component.ts | 85 +++++++++++++++++++ src/app/providers/cust-snippets.service.ts | 4 +- src/app/providers/org-graphs.service.ts | 2 +- .../snippets/cust-snippet-bar.component.html | 12 +-- .../snippets/cust-snippet-bar.component.ts | 34 ++------ 9 files changed, 142 insertions(+), 41 deletions(-) create mode 100644 src/app/panels/pie-panel.component.html create mode 100644 src/app/panels/pie-panel.component.ts diff --git a/src/app/dashboard/dashboard-customer.component.html b/src/app/dashboard/dashboard-customer.component.html index 494c09a..c1fdcf6 100644 --- a/src/app/dashboard/dashboard-customer.component.html +++ b/src/app/dashboard/dashboard-customer.component.html @@ -10,4 +10,10 @@ + +
+
+ +
+
diff --git a/src/app/dashboard/dashboard-customer.component.ts b/src/app/dashboard/dashboard-customer.component.ts index e80fb9f..68c4913 100644 --- a/src/app/dashboard/dashboard-customer.component.ts +++ b/src/app/dashboard/dashboard-customer.component.ts @@ -3,16 +3,13 @@ import { ApiService } from '../providers/api-service'; import { Router } from '@angular/router'; import { GraphWidget } from '../widgets/graph-widget.component'; import { CustBarSnippetComponent } from '../snippets/cust-snippet-bar.component'; +import { PiePanel } from '../panels/pie-panel.component'; import { DataType } from '../shared/data-types.enum'; @Component({ templateUrl: 'dashboard-customer.component.html' }) export class DashboardCustomerComponent implements OnInit { - customersThisMonth: any; - moneySpentThisMonth: any; - pointsTotal: any; - averageTransactionToday: any; /* Setting up dashboard's main variables*/ name: any; @@ -22,6 +19,12 @@ export class DashboardCustomerComponent implements OnInit { myRank: any; username: any; + // PolarArea + public polarAreaChartLabels: string[] = ['Local', 'Not Local']; + public polarAreaChartData: number[] = [400, 100]; + public polarAreaLegend = true; + public polarAreaChartType = 'polarArea'; + public widgetList = [ { type: 'graph', diff --git a/src/app/dashboard/dashboard.module.ts b/src/app/dashboard/dashboard.module.ts index 57f439f..d6fcfca 100644 --- a/src/app/dashboard/dashboard.module.ts +++ b/src/app/dashboard/dashboard.module.ts @@ -25,6 +25,7 @@ import { GraphWidget } from '../widgets/graph-widget.component'; import { OrgBarSnippetComponent } from '../snippets/org-snippet-bar.component'; import { CustBarSnippetComponent } from '../snippets/cust-snippet-bar.component'; import { GraphPanel } from '../panels/graph-panel.component'; +import { PiePanel } from '../panels/pie-panel.component'; import { DashboardRoutingModule } from './dashboard.routing'; import { OrgResultComponent } from '../shared/org-result.component'; @@ -72,6 +73,7 @@ import { environment } from '../../environments/environment'; OrgBarSnippetComponent, CustBarSnippetComponent, GraphPanel, + PiePanel, ], providers: [ CurrencyPipe, diff --git a/src/app/panels/pie-panel.component.html b/src/app/panels/pie-panel.component.html new file mode 100644 index 0000000..291c778 --- /dev/null +++ b/src/app/panels/pie-panel.component.html @@ -0,0 +1,27 @@ +
+
+
+
+

Local Purchases

+
+
+ +
+
+
+ +
+
+
diff --git a/src/app/panels/pie-panel.component.ts b/src/app/panels/pie-panel.component.ts new file mode 100644 index 0000000..adfebc5 --- /dev/null +++ b/src/app/panels/pie-panel.component.ts @@ -0,0 +1,85 @@ +import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; +import { OrgGraphsService } from '../providers/org-graphs.service'; +import { DataType } from '../shared/data-types.enum'; +import { ChartData } from '../_interfaces/chart-data'; +import * as moment from 'moment'; + +@Component({ + selector: 'panel-pie', + templateUrl: 'pie-panel.component.html', +}) +export class PiePanel implements OnInit { + + // Placeholder + public placeholderChartLabels: string[] = ['Local to Me', 'Local Store', 'Not Local']; + public placeholderChartData: number[] = [400, 100, 100]; + + + public chartType = 'doughnut'; + public chartLegend = true; + + //Old + + public rawChartData: Array = []; + + public chartData: Array = [ + { + data: [], + label: 'This Week' + }, + { + data: [], + label: 'Last Week' + }, + { + data: [], + label: 'Week Before Last' + } + ]; + + public rawChartLabels: Array = []; + public chartLabels: Array = []; + + // public mainChartElements = 7; + + constructor( + private graphService: OrgGraphsService, + ) { } + + public ngOnInit(): void { + // const end = moment().startOf('day'); + // const start = end.clone().subtract(this.mainChartElements * 3, 'days'); + // this.graphService.getGraph('customers_range', { + // start: start.format('YYYY-MM-DD'), + // end: end.format('YYYY-MM-DD'), + // }).subscribe( result => this.setData(result.graph) ); + } + + // private setData(data: any) { + // this.chartLabels = data.labels.slice(this.mainChartElements * 2, this.mainChartElements * 3); + // this.chartData[2].data = data.data.slice(0, this.mainChartElements); + // this.chartData[1].data = data.data.slice(this.mainChartElements, this.mainChartElements * 2); + // this.chartData[0].data = data.data.slice(this.mainChartElements * 2, this.mainChartElements * 3); + // } + + // convert Hex to RGBA + public convertHex(hex: string, opacity: number) { + hex = hex.replace('#', ''); + const r = parseInt(hex.substring(0, 2), 16); + const g = parseInt(hex.substring(2, 4), 16); + const b = parseInt(hex.substring(4, 6), 16); + + const rgba = 'rgba(' + r + ', ' + g + ', ' + b + ', ' + opacity / 100 + ')'; + return rgba; + } + + // events + public chartClicked(e: any): void { + console.log(e); + } + + public chartHovered(e: any): void { + console.log(e); + } + +} diff --git a/src/app/providers/cust-snippets.service.ts b/src/app/providers/cust-snippets.service.ts index b70ac36..9c75c5e 100644 --- a/src/app/providers/cust-snippets.service.ts +++ b/src/app/providers/cust-snippets.service.ts @@ -4,12 +4,12 @@ import { Observable } from 'rxjs/Rx'; @Injectable() export class CustSnippetsService { - private orgSnippetsUrl = '/v1/organisation/snippets'; + private custSnippetsUrl = '/v1/customer/snippets'; constructor(private api: ApiService) { } // This endpoint should mimic basicStats public getData(): Observable { - return this.api.post(this.orgSnippetsUrl); + return this.api.post(this.custSnippetsUrl); } } diff --git a/src/app/providers/org-graphs.service.ts b/src/app/providers/org-graphs.service.ts index 859361c..d19a53b 100644 --- a/src/app/providers/org-graphs.service.ts +++ b/src/app/providers/org-graphs.service.ts @@ -3,7 +3,7 @@ import { ApiService } from './api-service'; @Injectable() export class OrgGraphsService { - private orgGraphUrl = '/v1/organisation/graphs'; + private orgGraphUrl = '/v1/customer/graphs'; constructor(private api: ApiService) { } diff --git a/src/app/snippets/cust-snippet-bar.component.html b/src/app/snippets/cust-snippet-bar.component.html index 6f7176d..80a44ef 100644 --- a/src/app/snippets/cust-snippet-bar.component.html +++ b/src/app/snippets/cust-snippet-bar.component.html @@ -3,24 +3,24 @@
  • My Points
    - {{ basicStats.user_sum / 10 | number:'1.0-0' }} + {{ userSum / 10 | number:'1.0-0' }}
  • My Rank
    -
    +
    Unranked
    -
    - {{ basicStats.user_position }} +
    + {{ userPosition }}
  • My Total Spend
    - {{ basicStats.user_sum | currency:'GBP':'symbol':'1.2-2' }} + {{ userSum | currency:'GBP':'symbol':'1.2-2' }}
  • Value to Local Economy
    - {{ basicStats.user_sum * 2.3 | currency:'GBP':'symbol':'1.2-2' }} + {{ userSum * 2.3 | currency:'GBP':'symbol':'1.2-2' }}
diff --git a/src/app/snippets/cust-snippet-bar.component.ts b/src/app/snippets/cust-snippet-bar.component.ts index c680ece..93ac86d 100644 --- a/src/app/snippets/cust-snippet-bar.component.ts +++ b/src/app/snippets/cust-snippet-bar.component.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core'; -import { OrgSnippetsService } from '../providers/org-snippets.service'; +import { CustSnippetsService } from '../providers/cust-snippets.service'; @Component({ selector: 'snippet-bar-cust', @@ -7,41 +7,19 @@ import { OrgSnippetsService } from '../providers/org-snippets.service'; }) export class CustBarSnippetComponent 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; + public userSum = 0; + public userPosition = 0; constructor( - private snippetsService: OrgSnippetsService, + private snippetsService: CustSnippetsService, ) { } 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; + this.userSum = result.snippets.user_sum; + this.userPosition = result.snippets.user_position; } ); } From 9545601d01838fc2185e1e313d1a5c545b0aa857 Mon Sep 17 00:00:00 2001 From: piratefinn Date: Thu, 14 Dec 2017 16:44:23 +0000 Subject: [PATCH 3/9] working graph widgets and local doughnut chart --- src/app/app.module.ts | 2 + .../dashboard-customer.component.html | 151 +++++++++++++++++- .../dashboard/dashboard-customer.component.ts | 24 --- src/app/panels/pie-panel.component.html | 4 +- src/app/panels/pie-panel.component.ts | 54 ++----- src/app/providers/cust-pies.service.ts | 14 ++ src/app/widgets/graph-widget.component.ts | 15 ++ 7 files changed, 194 insertions(+), 70 deletions(-) create mode 100644 src/app/providers/cust-pies.service.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 8821973..0f257e7 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -24,6 +24,7 @@ import { OrgGraphsService } from './providers/org-graphs.service'; import { CustGraphsService } from './providers/cust-graphs.service'; import { OrgSnippetsService } from './providers/org-snippets.service'; import { CustSnippetsService } from './providers/cust-snippets.service'; +import { CustPiesService } from './providers/cust-pies.service'; // Layouts import { FullLayoutComponent } from './layouts/full-layout.component'; @@ -69,6 +70,7 @@ import { DashboardModule } from './dashboard/dashboard.module'; OrgSnippetsService, CustGraphsService, CustSnippetsService, + CustPiesService, { provide: LocationStrategy, useClass: HashLocationStrategy diff --git a/src/app/dashboard/dashboard-customer.component.html b/src/app/dashboard/dashboard-customer.component.html index c1fdcf6..3b9f793 100644 --- a/src/app/dashboard/dashboard-customer.component.html +++ b/src/app/dashboard/dashboard-customer.component.html @@ -12,8 +12,151 @@
-
- -
-
+
+ +
+
+
+
+
+
+

Purchases Per Week

+
+
+
+
    +
  • + This Week + 191,235 (56%) +
    +
    +
    +
    +
    +
    • +
  • + Last Week + 51,223 (15%) +
    +
    +
    +
    +
    +
    • +
  • + 2 Weeks Ago + 37,564 (11%) +
    +
    +
    +
    +
    +
    • +
  • + 3 Weeks Ago + 27,319 (8%) +
    +
    +
    +
    +
    +
    • +
+
+
+
+
+
+
+
+
+
+

Sector Purchase Amounts

+
+
+
+
    +
  • + +
    +
    Sector A
    + Lorem ipsum dolor sit amet +
    +
    +
    Bought this week
    + 1.924 +
    +
    • +
  • + +
    +
    Sector B
    + Lorem ipsum dolor sit amet +
    +
    +
    Bought this week
    + 1.224 +
    +
    • +
  • + +
    +
    Sector C
    + Lorem ipsum dolor sit amet +
    +
    +
    Bought this week
    + 1.163 +
    +
    • +
  • + +
    +
    Sector D
    + Lorem ipsum dolor sit amet +
    +
    +
    Bought this week
    + 928 +
    +
    • +
  • + +
    +
    Sector E
    + Lorem ipsum dolor sit amet +
    +
    +
    Bought this week
    + 893 +
    +
    • +
  • + +
    +
    Sector F
    + Lorem ipsum dolor sit amet +
    +
    +
    Bought this week
    + 121.924 +
    +
    • +
  • + +
    +
    Sector G
    + Lorem ipsum dolor sit amet +
    +
    +
    Bought this week
    + 12.125 +
    +
    • +
+
+
+
+
+ diff --git a/src/app/dashboard/dashboard-customer.component.ts b/src/app/dashboard/dashboard-customer.component.ts index 68c4913..87b5419 100644 --- a/src/app/dashboard/dashboard-customer.component.ts +++ b/src/app/dashboard/dashboard-customer.component.ts @@ -26,18 +26,6 @@ export class DashboardCustomerComponent implements OnInit { public polarAreaChartType = 'polarArea'; public widgetList = [ - { - type: 'graph', - name: 'total_today', - title: 'Total Today', - dataType: DataType.currency, - }, - { - type: 'graph', - name: 'avg_spend_today', - title: 'Avg. Spend Today', - dataType: DataType.currency, - }, { type: 'graph', name: 'total_last_week', @@ -64,18 +52,6 @@ export class DashboardCustomerComponent implements OnInit { title: 'Last Month Avg. Spend', dataType: DataType.currency, }, - { - type: 'graph', - name: 'total_user', - title: 'User Total', - dataType: DataType.currency, - }, - { - type: 'graph', - name: 'avg_spend_user', - title: 'User Avg. Spend', - dataType: DataType.currency, - }, ]; constructor( diff --git a/src/app/panels/pie-panel.component.html b/src/app/panels/pie-panel.component.html index 291c778..bb90dff 100644 --- a/src/app/panels/pie-panel.component.html +++ b/src/app/panels/pie-panel.component.html @@ -16,8 +16,8 @@
= []; - - public chartData: Array = [ - { - data: [], - label: 'This Week' - }, - { - data: [], - label: 'Last Week' - }, - { - data: [], - label: 'Week Before Last' - } - ]; - - public rawChartLabels: Array = []; - public chartLabels: Array = []; - // public mainChartElements = 7; constructor( - private graphService: OrgGraphsService, + private pieService: CustPiesService, ) { } public ngOnInit(): void { - // const end = moment().startOf('day'); - // const start = end.clone().subtract(this.mainChartElements * 3, 'days'); - // this.graphService.getGraph('customers_range', { - // start: start.format('YYYY-MM-DD'), - // end: end.format('YYYY-MM-DD'), - // }).subscribe( result => this.setData(result.graph) ); + this.pieService.getPie() + .subscribe( result => this.setData(result.pie) ); } - // private setData(data: any) { - // this.chartLabels = data.labels.slice(this.mainChartElements * 2, this.mainChartElements * 3); - // this.chartData[2].data = data.data.slice(0, this.mainChartElements); - // this.chartData[1].data = data.data.slice(this.mainChartElements, this.mainChartElements * 2); - // this.chartData[0].data = data.data.slice(this.mainChartElements * 2, this.mainChartElements * 3); - // } + private setData(data: any) { + this.doughnutChartData = Object.values(data); + console.log(this.chartData); + // setTimeout is currently a workaround for ng2-charts labels + setTimeout(() => this.doughnutChartLabels = Object.keys(data), 0); + console.log(this.chartLabels); + } // convert Hex to RGBA public convertHex(hex: string, opacity: number) { diff --git a/src/app/providers/cust-pies.service.ts b/src/app/providers/cust-pies.service.ts new file mode 100644 index 0000000..4608369 --- /dev/null +++ b/src/app/providers/cust-pies.service.ts @@ -0,0 +1,14 @@ +import { Injectable } from '@angular/core'; +import { ApiService } from './api-service'; +import { Observable } from 'rxjs/Rx'; + +@Injectable() +export class CustPiesService { + private custPieUrl = '/v1/customer/pies'; + + constructor(private api: ApiService) { } + + public getPie(): Observable { + return this.api.post(this.custPieUrl); + } +} diff --git a/src/app/widgets/graph-widget.component.ts b/src/app/widgets/graph-widget.component.ts index 3d99096..8c5b55d 100644 --- a/src/app/widgets/graph-widget.component.ts +++ b/src/app/widgets/graph-widget.component.ts @@ -35,12 +35,21 @@ export class GraphWidget implements OnInit { maintainAspectRatio: false, scales: { xAxes: [{ + type: 'time', + time: { + unit: 'day', + displayFormats: { + day: 'MMM D', + }, + tooltipFormat: 'MMM D', + }, gridLines: { color: 'transparent', zeroLineColor: 'transparent' }, ticks: { fontSize: 2, + source: 'data', fontColor: 'transparent', } @@ -106,6 +115,12 @@ export class GraphWidget implements OnInit { private setData(data: any) { this.setChartData(data.data); this.setChartLabels(data.labels); + this.setChartBounds(data.bounds); + } + + private setChartBounds(data) { + this.lineChartOptions.scales.xAxes[0].time.max = data.max; + this.lineChartOptions.scales.xAxes[0].time.min = data.min; } private setChartData(data: Array) { From 93f15ae6de46a8a25246f858ceaebc9aa9f3cca9 Mon Sep 17 00:00:00 2001 From: piratefinn Date: Thu, 14 Dec 2017 17:51:00 +0000 Subject: [PATCH 4/9] improved doughnut header layout --- src/app/panels/pie-panel.component.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/panels/pie-panel.component.html b/src/app/panels/pie-panel.component.html index bb90dff..eb0c194 100644 --- a/src/app/panels/pie-panel.component.html +++ b/src/app/panels/pie-panel.component.html @@ -1,10 +1,10 @@
-
+

Local Purchases

-
+
-
-
+
-
+
@@ -27,37 +26,78 @@
  • This Week - 191,235 (56%) + {{ (weekPurchaseList.week_0 || 0 ) }} ({{ (weekPurchaseList.week_0 || 0 ) / maxPurchase | percent:'1.0-0' }})
    -
    -
    +
    +
  • Last Week - 51,223 (15%) + {{ weekPurchaseList.week_1 || 0 }} ({{ (weekPurchaseList.week_1 || 0 ) / maxPurchase | percent:'1.0-0' }})
    -
    -
    +
    +
  • 2 Weeks Ago - 37,564 (11%) + {{ weekPurchaseList.week_2 || 0 }} ({{ (weekPurchaseList.week_2 || 0 ) / maxPurchase | percent:'1.0-0' }})
    -
    -
    +
    +
  • 3 Weeks Ago - 27,319 (8%) + {{ weekPurchaseList.week_3 || 0 }} ({{ (weekPurchaseList.week_3 || 0 ) / maxPurchase | percent:'1.0-0' }})
    -
    -
    +
    +
    +
    +
    +
    • +
  • + 4 Weeks Ago + {{ weekPurchaseList.week_4 || 0 }} ({{ (weekPurchaseList.week_4 || 0 ) / maxPurchase | percent:'1.0-0' }}) +
    +
    +
    +
    +
    +
    • +
  • + 5 Weeks Ago + {{ weekPurchaseList.week_5 || 0 }} ({{ (weekPurchaseList.week_5 || 0 ) / maxPurchase | percent:'1.0-0' }}) +
    +
    +
    +
    +
    +
    • +
  • + 6 Weeks Ago + {{ weekPurchaseList.week_6 || 0 }} ({{ (weekPurchaseList.week_6 || 0 ) / maxPurchase | percent:'1.0-0' }}) +
    +
    +
    • @@ -66,7 +106,7 @@
-
+
@@ -83,7 +123,7 @@ Lorem ipsum dolor sit amet
-
Bought this week
+
Bought from Sector
1.924
@@ -94,7 +134,7 @@ Lorem ipsum dolor sit amet
-
Bought this week
+
Bought from Sector
1.224
@@ -105,7 +145,7 @@ Lorem ipsum dolor sit amet
-
Bought this week
+
Bought from Sector
1.163
@@ -116,7 +156,7 @@ Lorem ipsum dolor sit amet
-
Bought this week
+
Bought from Sector
928
@@ -127,7 +167,7 @@ Lorem ipsum dolor sit amet
-
Bought this week
+
Bought from Sector
893
@@ -138,7 +178,7 @@ Lorem ipsum dolor sit amet
-
Bought this week
+
Bought from Sector
121.924
@@ -149,7 +189,7 @@ Lorem ipsum dolor sit amet
-
Bought this week
+
Bought from Sector
12.125
diff --git a/src/app/dashboard/dashboard-customer.component.ts b/src/app/dashboard/dashboard-customer.component.ts index 87b5419..f404496 100644 --- a/src/app/dashboard/dashboard-customer.component.ts +++ b/src/app/dashboard/dashboard-customer.component.ts @@ -19,12 +19,19 @@ export class DashboardCustomerComponent implements OnInit { myRank: any; username: any; - // PolarArea - public polarAreaChartLabels: string[] = ['Local', 'Not Local']; - public polarAreaChartData: number[] = [400, 100]; - public polarAreaLegend = true; - public polarAreaChartType = 'polarArea'; + weekPurchaseList = { + week_0: 0, + week_1: 0, + week_2: 0, + week_3: 0, + week_4: 0, + week_5: 0, + week_6: 0, + }; + sectorList: any; + + // Graph widgets public widgetList = [ { type: 'graph', @@ -57,6 +64,35 @@ export class DashboardCustomerComponent implements OnInit { constructor( private api: ApiService, ) { + this.api.basicStats().subscribe( + result => { + this.setWeekPurchaseList(result.data); + + }, + error => { + console.log('Retrieval Error'); + console.log( error._body ); + } + ); + } + + public setWeekPurchaseList (data: any) { + this.weekPurchaseList = { + week_0: data.purchases[0], + week_1: data.purchases[1], + week_2: data.purchases[2], + week_3: data.purchases[3], + week_4: data.purchases[4], + week_5: data.purchases[5], + week_6: data.purchases[6], + }; + //this.maxPurchase = Math.max(...this.weekPurchaseList); + this.maxPurchase = Object.values(this.weekPurchaseList).reduce((a,b) => { + if (! a) { a = 0 } + if (! b) { b = 0 } + return Math.max(a,b); + }); + console.log(this.maxPurchase); } ngOnInit(): void { diff --git a/src/app/panels/pie-panel.component.ts b/src/app/panels/pie-panel.component.ts index e102b33..3e8d2ac 100644 --- a/src/app/panels/pie-panel.component.ts +++ b/src/app/panels/pie-panel.component.ts @@ -30,10 +30,8 @@ export class PiePanel implements OnInit { private setData(data: any) { this.doughnutChartData = Object.values(data); - console.log(this.chartData); // setTimeout is currently a workaround for ng2-charts labels setTimeout(() => this.doughnutChartLabels = Object.keys(data), 0); - console.log(this.chartLabels); } // convert Hex to RGBA From e16cf3e801fba5150c5af811b3c96f60de3dda8d Mon Sep 17 00:00:00 2001 From: piratefinn Date: Fri, 15 Dec 2017 17:20:18 +0000 Subject: [PATCH 6/9] sector list code fully working --- .../dashboard-customer.component.html | 56 +++++++++--------- .../dashboard/dashboard-customer.component.ts | 59 ++++++++++++++++++- 2 files changed, 84 insertions(+), 31 deletions(-) diff --git a/src/app/dashboard/dashboard-customer.component.html b/src/app/dashboard/dashboard-customer.component.html index 1278c05..5be3628 100644 --- a/src/app/dashboard/dashboard-customer.component.html +++ b/src/app/dashboard/dashboard-customer.component.html @@ -117,80 +117,80 @@
  • - +
    -
    Sector A
    - Lorem ipsum dolor sit amet +
    Sector {{ sectorLetters[0] || 'N/A' }}
    +
    {{ sectorNames [sectorLetters[0]] }}
    Bought from Sector
    - 1.924 + {{ sectorPurchases[0] || 'N/A' }}
  • - +
    -
    Sector B
    - Lorem ipsum dolor sit amet +
    Sector {{ sectorLetters[1] || 'N/A' }}
    + {{ sectorNames [sectorLetters[1]] || 'N/A' }}
    Bought from Sector
    - 1.224 + {{ sectorPurchases[1] || 'N/A' }}
  • - +
    -
    Sector C
    - Lorem ipsum dolor sit amet +
    Sector {{ sectorLetters[2] || 'N/A' }}
    + {{ sectorNames [sectorLetters[2]] || 'N/A' }}
    Bought from Sector
    - 1.163 + {{ sectorPurchases[2] || 'N/A' }}
  • - +
    -
    Sector D
    - Lorem ipsum dolor sit amet +
    Sector {{ sectorLetters[3] || 'N/A' }}
    + {{ sectorNames [sectorLetters[3]] || 'N/A' }}
    Bought from Sector
    - 928 + {{ sectorPurchases[3] || 'N/A' }}
  • - +
    -
    Sector E
    - Lorem ipsum dolor sit amet +
    Sector {{ sectorLetters[4] || 'N/A' }}
    + {{ sectorNames [sectorLetters[4]] || 'N/A' }}
    Bought from Sector
    - 893 + {{ sectorPurchases[4] || 'N/A' }}
  • - +
    -
    Sector F
    - Lorem ipsum dolor sit amet +
    Sector {{ sectorLetters[5] || 'N/A' }}
    + {{ sectorNames [sectorLetters[5]] || 'N/A' }}
    Bought from Sector
    - 121.924 + {{ sectorPurchases[5] || 'N/A' }}
  • - +
    -
    Sector G
    - Lorem ipsum dolor sit amet +
    Sector {{ sectorLetters[6] || 'N/A' }}
    + {{ sectorNames [sectorLetters[6]] || 'N/A' }}
    Bought from Sector
    - 12.125 + {{ sectorPurchases[6] || 'N/A' }}
diff --git a/src/app/dashboard/dashboard-customer.component.ts b/src/app/dashboard/dashboard-customer.component.ts index f404496..5b84574 100644 --- a/src/app/dashboard/dashboard-customer.component.ts +++ b/src/app/dashboard/dashboard-customer.component.ts @@ -29,6 +29,55 @@ export class DashboardCustomerComponent implements OnInit { week_6: 0, }; + sectorNames = { + A: 'Agriculture, Forestry & Fishing', + B: 'Mining & Quarrying', + C: 'Manufacturing', + D: 'Electricity, Gas, Steam & Air Conditioning', + E: 'Water & Waste Management', + F: 'Construction', + G: 'Wholesale & Retail Trade', + H: 'Transportation & Storage', + I: 'Accomodation & Food Services', + J: 'Information & Communication', + K: 'Financial & Insurance Activities', + L: 'Real Estate', + M: 'Professional, Scientfic & Technical', + N: 'Administrative & Support Services', + O: 'Public Administration, Defence & Social Security', + P: 'Education', + Q: 'Human Health & Social Work', + R: 'Arts, Entertainment & Recreation', + S: 'Other Service Activities', + T: 'Household Domestic Business', + } + + sectorIcons = { + A: 'icon-drop', + B: 'icon-diamond', + C: 'icon-settings', + D: 'icon-energy', + E: 'icon-trash', + F: 'icon-wrench', + G: 'icon-tag', + H: 'icon-speedometer', + I: 'icon-cup', + J: 'icon-globe', + K: 'icon-credit-card', + L: 'icon-graph', + M: 'icon-chemistry', + N: 'icon-drawer', + O: 'icon-pie-chart', + P: 'icon-graduation', + Q: 'icon-support', + R: 'icon-film', + S: 'icon-calendar', + T: 'icon-home', + } + + sectorLetters: string[] = []; + sectorPurchases: number[] = []; + sectorList: any; // Graph widgets @@ -66,8 +115,8 @@ export class DashboardCustomerComponent implements OnInit { ) { this.api.basicStats().subscribe( result => { - this.setWeekPurchaseList(result.data); - + this.setWeekPurchaseList(result.weeks); + this.setSectorList(result.sectors); }, error => { console.log('Retrieval Error'); @@ -92,7 +141,11 @@ export class DashboardCustomerComponent implements OnInit { if (! b) { b = 0 } return Math.max(a,b); }); - console.log(this.maxPurchase); + } + + public setSectorList (data: any) { + this.sectorLetters = Object.values(data.sectors); + this.sectorPurchases = Object.values(data.purchases); } ngOnInit(): void { From 728f9e3d47a22012b67a7847710315f9d34bfb53 Mon Sep 17 00:00:00 2001 From: piratefinn Date: Fri, 15 Dec 2017 17:38:59 +0000 Subject: [PATCH 7/9] fixed es5 compatibility --- src/app/dashboard/dashboard-customer.component.ts | 7 +++---- src/app/panels/pie-panel.component.ts | 2 +- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/src/app/dashboard/dashboard-customer.component.ts b/src/app/dashboard/dashboard-customer.component.ts index 5b84574..706db64 100644 --- a/src/app/dashboard/dashboard-customer.component.ts +++ b/src/app/dashboard/dashboard-customer.component.ts @@ -135,8 +135,7 @@ export class DashboardCustomerComponent implements OnInit { week_5: data.purchases[5], week_6: data.purchases[6], }; - //this.maxPurchase = Math.max(...this.weekPurchaseList); - this.maxPurchase = Object.values(this.weekPurchaseList).reduce((a,b) => { + this.maxPurchase = Object.keys(this.weekPurchaseList).map(key => this.weekPurchaseList[key]).reduce((a,b) => { if (! a) { a = 0 } if (! b) { b = 0 } return Math.max(a,b); @@ -144,8 +143,8 @@ export class DashboardCustomerComponent implements OnInit { } public setSectorList (data: any) { - this.sectorLetters = Object.values(data.sectors); - this.sectorPurchases = Object.values(data.purchases); + this.sectorLetters = Object.keys(data.sectors).map(key => data.sectors[key]); + this.sectorPurchases = Object.keys(data.purchases).map(key => data.purchases[key]); } ngOnInit(): void { diff --git a/src/app/panels/pie-panel.component.ts b/src/app/panels/pie-panel.component.ts index 3e8d2ac..bae839f 100644 --- a/src/app/panels/pie-panel.component.ts +++ b/src/app/panels/pie-panel.component.ts @@ -29,7 +29,7 @@ export class PiePanel implements OnInit { } private setData(data: any) { - this.doughnutChartData = Object.values(data); + this.doughnutChartData = Object.keys(data).map(key => data[key]); // setTimeout is currently a workaround for ng2-charts labels setTimeout(() => this.doughnutChartLabels = Object.keys(data), 0); } From 46d99d11f97616f90fb14e2c1a5e1a38f48f5a13 Mon Sep 17 00:00:00 2001 From: piratefinn Date: Fri, 15 Dec 2017 17:44:50 +0000 Subject: [PATCH 8/9] fixed variable definition --- src/app/dashboard/dashboard-customer.component.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/app/dashboard/dashboard-customer.component.ts b/src/app/dashboard/dashboard-customer.component.ts index 706db64..e781f78 100644 --- a/src/app/dashboard/dashboard-customer.component.ts +++ b/src/app/dashboard/dashboard-customer.component.ts @@ -18,6 +18,7 @@ export class DashboardCustomerComponent implements OnInit { trends: any; myRank: any; username: any; + maxPurchase: number = 0; weekPurchaseList = { week_0: 0, From b50c65ba3dbdb414edf8cd3a012a8e17a2b8ed27 Mon Sep 17 00:00:00 2001 From: piratefinn Date: Fri, 15 Dec 2017 17:59:09 +0000 Subject: [PATCH 9/9] Changelog updated --- CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index a5859ba..35748e4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,10 @@ # Next Release * Changed Story Trail choosing to modals +* Revamped snippets and graph widgets on customer dashboard +* Added local purchase pie chart for customer dashboard +* Added week by week purchase list for customer dashboard +* Added sector purchase amount list for customer dashboard # v0.0.7