From cd0dd73c1ced6526e92feb19060f4caca3e1f3f3 Mon Sep 17 00:00:00 2001 From: Tom Bloor Date: Wed, 30 Aug 2017 12:35:43 +0100 Subject: [PATCH] Fixed dashboard to use new graph widget, and a widget list --- src/app/dashboard/dashboard.component.html | 50 +-------- src/app/dashboard/dashboard.component.ts | 119 +++------------------ src/app/dashboard/dashboard.module.ts | 4 +- 3 files changed, 21 insertions(+), 152 deletions(-) diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html index 5ef8899..5e37b19 100644 --- a/src/app/dashboard/dashboard.component.html +++ b/src/app/dashboard/dashboard.component.html @@ -36,6 +36,9 @@
+
+ +
@@ -60,53 +63,6 @@
-
- -
-
-
-
- -

9.823

-

Customers last week

-
-
- -
-
-
-
-
-
- -

9.823

-

Customers last month

-
-
- -
-
-
diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts index 2174eae..bb660ab 100644 --- a/src/app/dashboard/dashboard.component.ts +++ b/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 = [ - { - data: [], - label: 'Series B' - } - ]; - public lineChart2Labels: Array = []; - 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 = [ - { // grey - backgroundColor: this.brandInfo, - borderColor: 'rgba(255,255,255,.55)' - } - ]; - public lineChart2Legend = false; - public lineChart2Type = 'line'; - - // lineChart3 - public lineChart3Data: Array = [ - { - data: [], - label: 'Series B' - } - ]; - public lineChart3Labels: Array = []; - 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 = [ - { // grey - backgroundColor: this.brandInfo, - borderColor: 'rgba(255,255,255,.55)' - } - ]; - public lineChart3Legend = false; - public lineChart3Type = 'line'; - // lineChart4 public lineChart4Data: Array = [ { diff --git a/src/app/dashboard/dashboard.module.ts b/src/app/dashboard/dashboard.module.ts index fca2e05..fb8caa5 100644 --- a/src/app/dashboard/dashboard.module.ts +++ b/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 { }