Fixed dashboard to use new graph widget, and a widget list

src/app/dashboard/dashboard.component.html

@@ -36,6 +36,9 @@
     </div>
   </div>
   <div class="row">
+    <div *ngFor="let widget of widgetList" class="col-sm-6 col-lg-3">
+      <widget-graph *ngIf="widget.type == 'graph'" [graphName]="widget.name" [graphTitle]="widget.title" [graphIcon]="widget.icon"></widget-graph>
+    </div>
     <div *ngIf="showGraph.noofcustomerssector" class="col-sm-6 col-lg-3">
       <div class="card card-inverse card-primary">
         <div class="card-block">
@@ -60,53 +63,6 @@
         </div>
       </div>
     </div><!--/.col-->
-    <div *ngIf="showGraph.customersthisweek" class="col-sm-6 col-lg-3">
-      <widget-customers-last-7-days></widget-customers-last-7-days>
-    </div><!--/.col-->
-    <div *ngIf="showGraph.customerslastweek" class="col-sm-6 col-lg-3">
-      <div class="card card-inverse card-info">
-        <div class="card-block pb-0">
-          <button type="button" class="btn btn-transparent p-0 float-right">
-            <i class="icon-location-pin"></i>
-          </button>
-          <h4 class="mb-0">9.823</h4>
-          <p>Customers last week</p>
-        </div>
-        <div class="chart-wrapper px-3" style="height:70px;">
-          <canvas baseChart class="chart"
-          [datasets]="lineChart2Data"
-          [labels]="lineChart2Labels"
-          [options]="lineChart2Options"
-          [colors]="lineChart2Colours"
-          [legend]="lineChart2Legend"
-          [chartType]="lineChart2Type"
-          (chartHover)="chartHovered($event)"
-          (chartClick)="chartClicked($event)"></canvas>
-        </div>
-      </div>
-    </div><!--/.col-->
-    <div *ngIf="showGraph.customerslastmonth" class="col-sm-6 col-lg-3">
-      <div class="card card-inverse card-info">
-        <div class="card-block pb-0">
-          <button type="button" class="btn btn-transparent p-0 float-right">
-            <i class="icon-location-pin"></i>
-          </button>
-          <h4 class="mb-0">9.823</h4>
-          <p>Customers last month</p>
-        </div>
-        <div class="chart-wrapper px-3" style="height:70px;">
-          <canvas baseChart class="chart"
-          [datasets]="lineChart3Data"
-          [labels]="lineChart3Labels"
-          [options]="lineChart3Options"
-          [colors]="lineChart3Colours"
-          [legend]="lineChart3Legend"
-          [chartType]="lineChart3Type"
-          (chartHover)="chartHovered($event)"
-          (chartClick)="chartClicked($event)"></canvas>
-        </div>
-      </div>
-    </div><!--/.col-->
     <div *ngIf="showGraph.customerslastyear" class="col-sm-6 col-lg-3">
       <div class="card card-inverse card-info">
         <div class="card-block pb-0">

src/app/dashboard/dashboard.component.ts

@@ -2,7 +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';
+import { GraphWidget } from '../widgets/graph-widget.component';
 
 @Component({
   templateUrl: 'dashboard.component.html'
@@ -26,6 +26,21 @@ export class DashboardComponent implements OnInit {
   percentOfLocalSuppliers: any;
   percentOfSingleCompetitorLocalSuppliers: any;
 
+  public widgetList = [
+    {
+      type: 'graph',
+      name: 'customers_last_7_days',
+      icon: 'icon-people',
+      title: 'Customers Last 7 Days',
+    },
+    {
+      type: 'graph',
+      name: 'customers_last_30_days',
+      icon: 'icon-people',
+      title: 'Customers Last 30 Days',
+    },
+  ];
+
   constructor(
   private http: Http,
   private api: ApiService,
@@ -48,14 +63,6 @@ export class DashboardComponent implements OnInit {
         this.customersThisWeek = result.data.customersthisweek;
         this.lineChart1Data[0].data = this.customersThisWeek.customerno;
         this.lineChart1Labels = this.customersThisWeek.day;
-        // Chart 2
-        this.customersLastWeek = result.data.customerslastweek;
-        this.lineChart2Data[0].data = this.customersLastWeek.customerno;
-        this.lineChart2Labels = this.customersLastWeek.day;
-        // Chart 3
-        this.customersLastMonth = result.data.customerslastmonth;
-        this.lineChart3Data[0].data = this.customersLastMonth.customerno;
-        this.lineChart3Labels = this.customersLastMonth.day;
         // Chart 4
         this.customersLastYear = result.data.customerslastyear;
         this.lineChart4Data[0].data = this.customersLastYear.customerno;
@@ -204,100 +211,6 @@ export class DashboardComponent implements OnInit {
   public lineChart1Legend = false;
   public lineChart1Type = 'line';
 
-  // lineChart2
-  public lineChart2Data: Array<any> = [
-    {
-      data: [],
-      label: 'Series B'
-    }
-  ];
-  public lineChart2Labels: Array<any> = [];
-  public lineChart2Options: any = {
-    maintainAspectRatio: false,
-    scales: {
-      xAxes: [{
-        gridLines: {
-          color: 'transparent',
-          zeroLineColor: 'transparent'
-        },
-        ticks: {
-          fontSize: 2,
-          fontColor: 'transparent',
-        }
-
-      }],
-      yAxes: [{
-        display: false,
-        ticks: {
-          display: false,
-        }
-      }],
-    },
-    elements: {
-      line: {
-        tension: 0.00001,
-        borderWidth: 1
-      },
-      point: {
-        radius: 4,
-        hitRadius: 10,
-        hoverRadius: 4,
-      },
-    },
-    legend: {
-      display: false
-    }
-  };
-  public lineChart2Colours: Array<any> = [
-    { // grey
-      backgroundColor: this.brandInfo,
-      borderColor: 'rgba(255,255,255,.55)'
-    }
-  ];
-  public lineChart2Legend = false;
-  public lineChart2Type = 'line';
-  
-  // lineChart3
-  public lineChart3Data: Array<any> = [
-    {
-      data: [],
-      label: 'Series B'
-    }
-  ];
-  public lineChart3Labels: Array<any> = [];
-  public lineChart3Options: any = {
-    maintainAspectRatio: false,
-    scales: {
-      xAxes: [{
-        display: false
-      }],
-      yAxes: [{
-        display: false
-      }]
-    },
-    elements: {
-      line: {
-        borderWidth: 2
-      },
-      point: {
-        radius: 2,
-        hitRadius: 10,
-        hoverRadius: 4,
-      },
-    },
-    legend: {
-      display: false
-    }
-  };
-  public lineChart3Colours: Array<any> = [
-    { // grey
-      backgroundColor: this.brandInfo,
-      borderColor: 'rgba(255,255,255,.55)'
-    }
-  ];
-  public lineChart3Legend = false;
-  public lineChart3Type = 'line';
-  
   // lineChart4
   public lineChart4Data: Array<any> = [
     {

src/app/dashboard/dashboard.module.ts

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