First pass on factoring out graph widgets to seperate classes

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