Renamed customers widget to graph widget

src/app/widgets/customers.component.ts

@@ -1,90 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { OrgGraphsService } from '../providers/org-graphs.service';
-
-interface ChartData {
-  data: Array<number>;
-  label: string;
-}
-
-@Component({
-  selector: 'widget-customers-last-7-days',
-  templateUrl: 'customers.component.html',
-})
-export class Customer7DayWidget implements OnInit {
-
-  public lineChartData: Array<ChartData> = [
-    {
-      data: [],
-      label: 'Series A'
-    }
-  ];
-  public lineChartLabels: Array<string>;
-  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 graphService: OrgGraphsService) { }
-
-  ngOnInit(): void {
-    this.graphService.getGraph('customers_last_7_days')
-      .subscribe(
-        result => {
-          console.log(result);
-          this.lineChartData[0].data = result.graph.count;
-          this.lineChartLabels = result.graph.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/app/widgets/graph-widget.component.html

@@ -1,17 +1,10 @@
 <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 type="button" class="btn btn-transparent p-0 float-right">
+      <i [ngClass]="graphIcon"></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>
+    <h4 class="mb-0">{{ graphSum }}</h4>
+    <p>{{ graphTitle }}</p>
   </div>
   <div class="chart-wrapper px-3" style="height:70px;">
     <canvas baseChart

src/app/widgets/graph-widget.component.ts

@@ -0,0 +1,115 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { OrgGraphsService } from '../providers/org-graphs.service';
+
+interface ChartData {
+  data: Array<number>;
+  label: string;
+}
+
+@Component({
+  selector: 'widget-graph',
+  templateUrl: 'graph-widget.component.html',
+})
+export class GraphWidget implements OnInit {
+  @Input() public graphName: string;
+  @Input() public graphTitle = 'Graph';
+  @Input() public graphIcon = 'icon-graph';
+
+  @Output() public graphHover = new EventEmitter();
+  @Output() public graphClick = new EventEmitter();
+
+  public graphSum: Number = 0;
+
+  public lineChartData: Array<ChartData> = [
+    {
+      data: [],
+      label: 'Series A'
+    }
+  ];
+  public lineChartLabels: Array<string>;
+  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> = [
+    {
+      backgroundColor: '#20a8d8',
+      borderColor: 'rgba(255,255,255,.55)'
+    }
+  ];
+  public lineChartLegend = false;
+  public lineChartType = 'line';
+
+
+  constructor(private graphService: OrgGraphsService) { }
+
+  ngOnInit(): void {
+    if ( this.graphName == null ) {
+      throw new Error('Attribute \'graphName\' is required on component \'widget-graph\'');
+    }
+    this.graphService.getGraph(this.graphName)
+      .subscribe( result => this.setData(result.graph) );
+  }
+
+  private setData(data: any) {
+    this.setChartData(data.count);
+    this.setChartLabels(data.day);
+  }
+
+  private setChartData(data: Array<number>) {
+    this.lineChartData[0].data = data;
+    this.graphSum = data.reduce((a, b) => a + b, 0);
+    // Set point size based on data
+    if ( data.length < 15 ) {
+      this.lineChartOptions.elements.point.radius = 4;
+      this.lineChartOptions.elements.line.borderWidth = 1;
+    } else {
+      this.lineChartOptions.elements.point.radius = 2;
+      this.lineChartOptions.elements.line.borderWidth = 2;
+    }
+  }
+
+  private setChartLabels(data: Array<string>) {
+    this.lineChartLabels = data;
+  }
+
+  // events
+  public chartClicked(e: any): void {
+    console.log(e);
+  }
+
+  public chartHovered(e: any): void {
+    console.log(e);
+  }
+}