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; } ); }