Added working snippets and placeholder pie chart

src/app/dashboard/dashboard-customer.component.html

@@ -10,4 +10,10 @@
       </widget-graph>
     </div><!--/.col-->
   </div><!--/.row-->
+  <!-- http://www.chartjs.org/docs/latest/charts/polar.html?h=polar -->
+  <div class=row>
+  <div class="col-12 col-md-4 no-gutters">
+    <panel-pie></panel-pie>
+  </div>
+</div>
 </div>

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',

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,

src/app/panels/pie-panel.component.html

@@ -0,0 +1,27 @@
+  <div class="card">
+    <div class="card-block">
+      <div class="row">
+        <div class="col-sm-5">
+          <h4 class="card-title mb-0">Local Purchases</h4>
+        </div><!--/.col-->
+        <div class="col-sm-7 hidden-sm-down">
+          <div class="btn-toolbar float-right" role="toolbar" aria-label="Toolbar with button groups">
+            <div class="btn-group mr-3" data-toggle="buttons" aria-label="First group">
+              <label class="btn btn-outline-secondary active">
+                <input type="radio" name="options" id="option2" checked> Week
+              </label>
+            </div>
+          </div>
+        </div><!--/.col-->
+      </div><!--/.row-->
+      <div class="chart-wrapper">
+        <canvas baseChart class="chart"
+        [data]="placeholderChartData"
+        [labels]="placeholderChartLabels"
+        [legend]="chartLegend"
+        [chartType]="chartType"
+        (chartHover)="chartHovered($event)"
+        (chartClick)="chartClicked($event)"></canvas>
+      </div>
+    </div>
+  </div>

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<number> = [];
+
+  public chartData: Array<ChartData> = [
+    {
+      data: [],
+      label: 'This Week'
+    },
+    {
+      data: [],
+      label: 'Last Week'
+    },
+    {
+      data: [],
+      label: 'Week Before Last'
+    }
+  ];
+
+  public rawChartLabels: Array<string> = [];
+  public chartLabels: Array<string> = [];
+
+  // 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);
+  }
+
+}

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<any> {
-    return this.api.post(this.orgSnippetsUrl);
+    return this.api.post(this.custSnippetsUrl);
   }
 }

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

src/app/snippets/cust-snippet-bar.component.html

@@ -3,24 +3,24 @@
     <ul>
       <li class="hidden-sm-down">
         <div class="text-muted">My Points</div>
-        <strong>{{ basicStats.user_sum / 10 | number:'1.0-0' }}</strong>
+        <strong>{{ userSum / 10 | number:'1.0-0' }}</strong>
       </li>
       <li class="hidden-sm-down">
         <div class="text-muted">My Rank</div>
-        <div *ngIf="basicStats.user_position == 0" class="statuscontent">
+        <div *ngIf="userPosition == 0" class="statuscontent">
           <strong>Unranked</strong>
         </div>
-        <div *ngIf="basicStats.user_position != 0" class="statuscontent">
+        <div *ngIf="userPosition != 0" class="statuscontent">
-          <strong>{{ basicStats.user_position }}</strong>
+          <strong>{{ userPosition }}</strong>
         </div>
       </li>
       <li class="hidden-sm-down">
         <div class="text-muted">My Total Spend</div>
-        <strong>{{ basicStats.user_sum | currency:'GBP':'symbol':'1.2-2' }}</strong>
+        <strong>{{ userSum | currency:'GBP':'symbol':'1.2-2' }}</strong>
       </li>
       <li class="hidden-sm-down">
         <div class="text-muted">Value to Local Economy</div>
-        <strong>{{ basicStats.user_sum * 2.3 | currency:'GBP':'symbol':'1.2-2' }}</strong>
+        <strong>{{ userSum * 2.3 | currency:'GBP':'symbol':'1.2-2' }}</strong>
       </li>
     </ul>
   </div>

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 userSum = 0;
-  public thisMonthSalesTotal = 0;
+  public userPosition = 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,
+    private snippetsService: CustSnippetsService,
   ) { }
 
   public ngOnInit(): void {
     this.snippetsService.getData()
       .subscribe(
         result => {
-          this.thisMonthSalesCount = result.snippets.this_month_sales_count;
+          this.userSum = result.snippets.user_sum;
-          this.thisMonthSalesTotal = result.snippets.this_month_sales_total;
+          this.userPosition = result.snippets.user_position;
-          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;
         }
       );
   }