First pass on factoring out graph widgets to seperate classes

src/app/dashboard/dashboard.component.html

@@ -61,33 +61,7 @@
       </div>
     </div><!--/.col-->
     <div *ngIf="showGraph.customersthisweek" class="col-sm-6 col-lg-3">
-      <div class="card card-inverse card-primary">
-        <div class="card-block pb-0">
-          <div class="btn-group float-right" dropdown>
-            <button type="button" class="btn btn-transparent dropdown-toggle p-0" dropdownToggle>
-              <i class="icon-settings"></i>
-            </button>
-            <div class="dropdown-menu dropdown-menu-right" *dropdownMenu>
-              <a class="dropdown-item" href="#">Action</a>
-              <a class="dropdown-item" href="#">Another action</a>
-              <a class="dropdown-item" href="#">Something else here</a>
-            </div>
-          </div>
-          <h4 class="mb-0">138</h4>
-          <p>Customers this week</p>
-        </div>
-        <div class="chart-wrapper px-3" style="height:70px;">
-          <canvas baseChart class="chart"
-          [datasets]="lineChart1Data"
-          [labels]="lineChart1Labels"
-          [options]="lineChart1Options"
-          [colors]="lineChart1Colours"
-          [legend]="lineChart1Legend"
-          [chartType]="lineChart1Type"
-          (chartHover)="chartHovered($event)"
-          (chartClick)="chartClicked($event)"></canvas>
-        </div>
-      </div>
+      <widget-customer-7-days></widget-customer-7-days>
     </div><!--/.col-->
     <div *ngIf="showGraph.customerslastweek" class="col-sm-6 col-lg-3">
       <div class="card card-inverse card-info">

src/app/dashboard/dashboard.component.ts

@@ -2,6 +2,7 @@ import { Directive, Component, OnInit } from '@angular/core';
 import { Http, Response } from '@angular/http';
 import { ApiService } from '../providers/api-service';
 import { Router } from '@angular/router';
+import { Customer7DayWidget } from '../widgets/customers.component';
 
 @Component({
   templateUrl: 'dashboard.component.html'

src/app/dashboard/dashboard.module.ts

@@ -9,6 +9,8 @@ import { LeaderboardsComponent } from './leaderboards.component';
 import { AccountEditComponent } from './account-edit.component';
 import { AddDataComponent } from './add-data.component';
 
+import { Customer7DayWidget } from '../widgets/customers.component';
+
 import { DashboardRoutingModule } from './dashboard.routing';
 
 @NgModule({
@@ -26,6 +28,7 @@ import { DashboardRoutingModule } from './dashboard.routing';
     LeaderboardsComponent,
     AccountEditComponent,
     AddDataComponent,
+    Customer7DayWidget,
   ]
 })
 export class DashboardModule { }

src/app/widgets/customers.component.html

@@ -0,0 +1,28 @@
+<div class="card card-inverse card-primary">
+  <div class="card-block pb-0">
+    <div class="btn-group float-right" dropdown>
+      <button type="button" class="btn btn-transparent dropdown-toggle p-0" dropdownToggle>
+        <i class="icon-settings"></i>
+      </button>
+      <div class="dropdown-menu dropdown-menu-right" *dropdownMenu>
+        <a class="dropdown-item" href="#">Action</a>
+        <a class="dropdown-item" href="#">Another action</a>
+        <a class="dropdown-item" href="#">Something else here</a>
+      </div>
+    </div>
+    <h4 class="mb-0">{{ customerSum }}</h4>
+    <p>Customers this week</p>
+  </div>
+  <div class="chart-wrapper px-3" style="height:70px;">
+    <canvas baseChart
+            class="chart"
+            [datasets]="lineChartData"
+            [labels]="lineChartLabels"
+            [options]="lineChartOptions"
+            [colors]="lineChartColours"
+            [legend]="lineChartLegend"
+            [chartType]="lineChartType"
+            (chartHover)="chartHovered($event)"
+            (chartClick)="chartClicked($event)"></canvas>
+  </div>
+</div>

src/app/widgets/customers.component.ts

@@ -0,0 +1,85 @@
+import { Component, OnInit } from '@angular/core';
+import { ApiService } from '../providers/api-service';
+
+@Component({
+  selector: 'widget-customer-7-days',
+  templateUrl: 'customers.component.html',
+})
+export class Customer7DayWidget implements OnInit {
+  public lineChartData: Array<any> = [
+    {
+      data: [],
+      label: 'Series A'
+    }
+  ];
+  public lineChartLabels: Array<any> = [];
+  public lineChartOptions: 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 lineChartColours: Array<any> = [
+    { // grey
+      backgroundColor: '#20a8d8',
+      borderColor: 'rgba(255,255,255,.55)'
+    }
+  ];
+  public lineChartLegend = false;
+  public lineChartType = 'line';
+
+  public customerSum: Number = 0;
+
+  constructor(private api: ApiService) { }
+
+  ngOnInit(): void {
+    this.api.graph_data(undefined)
+      .subscribe(
+        result => {
+          console.log(result);
+          const customersThisWeek = result.data.customersthisweek;
+          this.lineChartData[0].data = customersThisWeek.customerno;
+          this.lineChartLabels = customersThisWeek.day;
+          this.customerSum = this.lineChartData[0].data.reduce((a, b) => a + b, 0);
+        }
+      );
+  }
+
+  // events
+  public chartClicked(e: any): void {
+    console.log(e);
+  }
+
+  public chartHovered(e: any): void {
+    console.log(e);
+  }
+}

src/scss/_custom.scss

@@ -87,4 +87,4 @@
       }
     }
   }
-}
+}