From dd0151e18ce4950bf342adbffaaac42d751a1d43 Mon Sep 17 00:00:00 2001 From: Tom Bloor Date: Fri, 25 Aug 2017 14:00:29 +0100 Subject: [PATCH 1/8] Added roboto font --- src/index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/src/index.html b/src/index.html index ecc45ed..66b3a33 100644 --- a/src/index.html +++ b/src/index.html @@ -15,6 +15,7 @@ + From dfff1695bafed84b4202ba866944c0930a5da2f9 Mon Sep 17 00:00:00 2001 From: Tom Bloor Date: Fri, 25 Aug 2017 14:00:39 +0100 Subject: [PATCH 2/8] Removed uneccessary components from dashboard --- src/app/dashboard/dashboard.component.html | 751 --------------------- 1 file changed, 751 deletions(-) diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html index 31f0944..6c784ce 100644 --- a/src/app/dashboard/dashboard.component.html +++ b/src/app/dashboard/dashboard.component.html @@ -378,755 +378,4 @@ - -
-
- - -
-
- - -
-
- - -
-
- - -
-
-
-
-
-
- Traffic & Sales -
-
-
-
-
-
-
- New Clients -
- 9,123 -
- -
-
-
-
-
- Recuring Clients -
- 22,643 -
- -
-
-
-
-
-
    -
  • -
    - Monday -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    • -
  • -
    - Tuesday -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    • -
  • -
    - Wednesday -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    • -
  • -
    - Thursday -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    • -
  • -
    - Friday -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    • -
  • -
    - Saturday -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    • -
  • -
    - Sunday -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    • -
  • - New clients   Recurring clients -
    • -
-
-
-
-
-
- Pageviews -
- 78,623 -
- -
-
-
-
-
- Organic -
- 49,123 -
- -
-
-
-
-
-
    -
  • - - Male - 43% -
    -
    -
    -
    -
    -
    • -
  • - - Female - 37% -
    -
    -
    -
    -
    -
    • -
  • -
  • - - Organic Search - 191,235 (56%) -
    -
    -
    -
    -
    -
    • -
  • - - Facebook - 51,223 (15%) -
    -
    -
    -
    -
    -
    • -
  • - - Twitter - 37,564 (11%) -
    -
    -
    -
    -
    -
    • -
  • - - LinkedIn - 27,319 (8%) -
    -
    -
    -
    -
    -
    • -
  • - -
    • -
-
-
-
-
-
- CTR -
- 23% -
- -
-
-
-
-
- Bounce Rate -
- 5% -
- -
-
-
-
-
-
    -
  • - -
    -
    iMac 4k
    - Lorem ipsum dolor sit amet -
    -
    -
    Sold this week
    - 1.924 -
    -
    - -
    -
    • -
  • - -
    -
    Samsung Galaxy Edge
    - Lorem ipsum dolor sit amet -
    -
    -
    Sold this week
    - 1.224 -
    -
    - -
    -
    • -
  • - -
    -
    iPhone 6S
    - Lorem ipsum dolor sit amet -
    -
    -
    Sold this week
    - 1.163 -
    -
    - -
    -
    • -
  • - -
    -
    Premium accounts
    - Lorem ipsum dolor sit amet -
    -
    -
    Sold this week
    - 928 -
    -
    - -
    -
    • -
  • - -
    -
    Spotify Subscriptions
    - Lorem ipsum dolor sit amet -
    -
    -
    Sold this week
    - 893 -
    -
    - -
    -
    • -
  • - -
    -
    Ebook
    - Lorem ipsum dolor sit amet -
    -
    -
    Downloads
    - 121.924 -
    -
    - -
    -
    • -
  • - -
    -
    Photos
    - Lorem ipsum dolor sit amet -
    -
    -
    Uploaded
    - 12.125 -
    -
    - -
    -
    • -
  • - -
    • -
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
UserCountryUsagePayment MethodActivity
-
- admin@bootstrapmaster.com - -
- 		-
Yiorgos Avraamu
-
- New | Registered: Jan 1, 2015 -
- 		- USA - -
-
- 50% -
-
- Jun 11, 2015 - Jul 10, 2015 -
-
-
-
-
- 		- - -
Last login
- 10 sec ago -
-
- admin@bootstrapmaster.com - -
- 		-
Avram Tarasios
-
- - Recurring | Registered: Jan 1, 2015 -
- 		- Brazil - -
-
- 10% -
-
- Jun 11, 2015 - Jul 10, 2015 -
-
-
-
-
- 		- - -
Last login
- 5 minutes ago -
-
- admin@bootstrapmaster.com - -
- 		-
Quintin Ed
-
- New | Registered: Jan 1, 2015 -
- 		- India - -
-
- 74% -
-
- Jun 11, 2015 - Jul 10, 2015 -
-
-
-
-
- 		- - -
Last login
- 1 hour ago -
-
- admin@bootstrapmaster.com - -
- 		-
Enéas Kwadwo
-
- New | Registered: Jan 1, 2015 -
- 		- France - -
-
- 98% -
-
- Jun 11, 2015 - Jul 10, 2015 -
-
-
-
-
- 		- - -
Last login
- Last month -
-
- admin@bootstrapmaster.com - -
- 		-
Agapetus Tadeáš
-
- New | Registered: Jan 1, 2015 -
- 		- Spain - -
-
- 22% -
-
- Jun 11, 2015 - Jul 10, 2015 -
-
-
-
-
- 		- - -
Last login
- Last week -
-
- admin@bootstrapmaster.com - -
- 		-
Friderik Dávid
-
- New | Registered: Jan 1, 2015 -
- 		- Poland - -
-
- 43% -
-
- Jun 11, 2015 - Jul 10, 2015 -
-
-
-
-
- 		- - -
Last login
- Yesterday -
-
-
-
-
From 70a37dbba69f2fbb6e1b6fa05c7d1b7bbf83e7ff Mon Sep 17 00:00:00 2001 From: Tom Bloor Date: Tue, 29 Aug 2017 16:03:33 +0100 Subject: [PATCH 3/8] Allow for widget selector prefix and Widget class suffix --- tslint.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/tslint.json b/tslint.json index 9113f13..b6363ed 100644 --- a/tslint.json +++ b/tslint.json @@ -99,7 +99,7 @@ ], "directive-selector": [true, "attribute", "app", "camelCase"], - "component-selector": [true, "element", "app", "kebab-case"], + "component-selector": [true, "element", ["app", "widget"], "kebab-case"], "use-input-property-decorator": true, "use-output-property-decorator": true, "use-host-property-decorator": true, @@ -107,7 +107,7 @@ "no-output-rename": true, "use-life-cycle-interface": true, "use-pipe-transform-interface": true, - "component-class-suffix": true, + "component-class-suffix": [true, "Component", "Widget"], "directive-class-suffix": true, "no-access-missing-member": true, "templates-use-public": true, From 7342db0713245514812b06800cf90639ab52e746 Mon Sep 17 00:00:00 2001 From: Tom Bloor Date: Tue, 29 Aug 2017 16:42:32 +0100 Subject: [PATCH 4/8] First pass on factoring out graph widgets to seperate classes --- src/app/dashboard/dashboard.component.html | 28 +------ src/app/dashboard/dashboard.component.ts | 1 + src/app/dashboard/dashboard.module.ts | 3 + src/app/widgets/customers.component.html | 28 +++++++ src/app/widgets/customers.component.ts | 85 ++++++++++++++++++++++ src/scss/_custom.scss | 2 +- 6 files changed, 119 insertions(+), 28 deletions(-) create mode 100644 src/app/widgets/customers.component.html create mode 100644 src/app/widgets/customers.component.ts diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html index 6c784ce..4ffd263 100644 --- a/src/app/dashboard/dashboard.component.html +++ b/src/app/dashboard/dashboard.component.html @@ -61,33 +61,7 @@
-
-
-
- -
- Action - Another action - Something else here -
-
-

138

-

Customers this week

-
-
- -
-
+
diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts index 93489c6..2174eae 100644 --- a/src/app/dashboard/dashboard.component.ts +++ b/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' diff --git a/src/app/dashboard/dashboard.module.ts b/src/app/dashboard/dashboard.module.ts index a365b86..fca2e05 100644 --- a/src/app/dashboard/dashboard.module.ts +++ b/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 { } diff --git a/src/app/widgets/customers.component.html b/src/app/widgets/customers.component.html new file mode 100644 index 0000000..2eb47af --- /dev/null +++ b/src/app/widgets/customers.component.html @@ -0,0 +1,28 @@ +
+
+
+ +
+ Action + Another action + Something else here +
+
+

{{ customerSum }}

+

Customers this week

+
+
+ +
+
diff --git a/src/app/widgets/customers.component.ts b/src/app/widgets/customers.component.ts new file mode 100644 index 0000000..f9bebe4 --- /dev/null +++ b/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 = [ + { + data: [], + label: 'Series A' + } + ]; + public lineChartLabels: Array = []; + 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 = [ + { // 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); + } +} diff --git a/src/scss/_custom.scss b/src/scss/_custom.scss index 4832c87..4ff87f5 100644 --- a/src/scss/_custom.scss +++ b/src/scss/_custom.scss @@ -87,4 +87,4 @@ } } } -} \ No newline at end of file +} From 5e2471aebfb01a6e79c7855ddd0263a8e9bbfa86 Mon Sep 17 00:00:00 2001 From: Tom Bloor Date: Tue, 29 Aug 2017 17:39:27 +0100 Subject: [PATCH 5/8] Refactor customer graph to use new service for org graphs --- src/app/app.module.ts | 3 +++ src/app/dashboard/dashboard.component.html | 2 +- src/app/providers/api-service.ts | 10 ++++++++++ src/app/providers/org-graphs.service.ts | 13 ++++++++++++ src/app/widgets/customers.component.ts | 23 +++++++++++++--------- 5 files changed, 41 insertions(+), 10 deletions(-) create mode 100644 src/app/providers/org-graphs.service.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index d51ba98..3c28ebd 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -17,6 +17,8 @@ import { AppRoutingModule } from './app.routing'; import { AuthGuard } from './_guards/auth.guard'; import { ApiService } from './providers/api-service'; +import { OrgGraphsService } from './providers/org-graphs.service'; + // Layouts import { FullLayoutComponent } from './layouts/full-layout.component'; import { SimpleLayoutComponent } from './layouts/simple-layout.component'; @@ -54,6 +56,7 @@ import { DashboardModule } from './dashboard/dashboard.module'; providers: [ AuthGuard, ApiService, + OrgGraphsService, { provide: LocationStrategy, useClass: HashLocationStrategy diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html index 4ffd263..5ef8899 100644 --- a/src/app/dashboard/dashboard.component.html +++ b/src/app/dashboard/dashboard.component.html @@ -61,7 +61,7 @@
- +
diff --git a/src/app/providers/api-service.ts b/src/app/providers/api-service.ts index 73bb013..7aa4ffa 100644 --- a/src/app/providers/api-service.ts +++ b/src/app/providers/api-service.ts @@ -18,6 +18,16 @@ export class ApiService { } } + public post(url, data) { + if ( this.sessionKey != null ) { + data.session_key = this.sessionKey; + } + return this.http.post( + this.apiUrl + url, + data + ).map( response => response.json() ); + } + // Login API private getSessionKey() { diff --git a/src/app/providers/org-graphs.service.ts b/src/app/providers/org-graphs.service.ts new file mode 100644 index 0000000..aeea889 --- /dev/null +++ b/src/app/providers/org-graphs.service.ts @@ -0,0 +1,13 @@ +import { Injectable } from '@angular/core'; +import { ApiService } from './api-service'; + +@Injectable() +export class OrgGraphsService { + private orgGraphUrl = '/v1/organisation/graphs'; + + constructor(private api: ApiService) { } + + public getGraph(name: string) { + return this.api.post(this.orgGraphUrl, { graph: name }); + } +} diff --git a/src/app/widgets/customers.component.ts b/src/app/widgets/customers.component.ts index f9bebe4..7ccc692 100644 --- a/src/app/widgets/customers.component.ts +++ b/src/app/widgets/customers.component.ts @@ -1,18 +1,24 @@ import { Component, OnInit } from '@angular/core'; -import { ApiService } from '../providers/api-service'; +import { OrgGraphsService } from '../providers/org-graphs.service'; + +interface ChartData { + data: Array; + label: string; +} @Component({ - selector: 'widget-customer-7-days', + selector: 'widget-customers-last-7-days', templateUrl: 'customers.component.html', }) export class Customer7DayWidget implements OnInit { - public lineChartData: Array = [ + + public lineChartData: Array = [ { data: [], label: 'Series A' } ]; - public lineChartLabels: Array = []; + public lineChartLabels: Array; public lineChartOptions: any = { maintainAspectRatio: false, scales: { @@ -59,16 +65,15 @@ export class Customer7DayWidget implements OnInit { public customerSum: Number = 0; - constructor(private api: ApiService) { } + constructor(private graphService: OrgGraphsService) { } ngOnInit(): void { - this.api.graph_data(undefined) + this.graphService.getGraph('customers_last_7_days') .subscribe( result => { console.log(result); - const customersThisWeek = result.data.customersthisweek; - this.lineChartData[0].data = customersThisWeek.customerno; - this.lineChartLabels = customersThisWeek.day; + this.lineChartData[0].data = result.graph.count; + this.lineChartLabels = result.graph.day; this.customerSum = this.lineChartData[0].data.reduce((a, b) => a + b, 0); } ); From 8a509e5051288284caa34efeb4e00c76ca230a56 Mon Sep 17 00:00:00 2001 From: Tom Bloor Date: Wed, 30 Aug 2017 12:35:25 +0100 Subject: [PATCH 6/8] Renamed customers widget to graph widget --- src/app/widgets/customers.component.ts | 90 -------------- ...onent.html => graph-widget.component.html} | 17 +-- src/app/widgets/graph-widget.component.ts | 115 ++++++++++++++++++ 3 files changed, 120 insertions(+), 102 deletions(-) delete mode 100644 src/app/widgets/customers.component.ts rename src/app/widgets/{customers.component.html => graph-widget.component.html} (50%) create mode 100644 src/app/widgets/graph-widget.component.ts diff --git a/src/app/widgets/customers.component.ts b/src/app/widgets/customers.component.ts deleted file mode 100644 index 7ccc692..0000000 --- a/src/app/widgets/customers.component.ts +++ /dev/null @@ -1,90 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import { OrgGraphsService } from '../providers/org-graphs.service'; - -interface ChartData { - data: Array; - label: string; -} - -@Component({ - selector: 'widget-customers-last-7-days', - templateUrl: 'customers.component.html', -}) -export class Customer7DayWidget implements OnInit { - - public lineChartData: Array = [ - { - data: [], - label: 'Series A' - } - ]; - public lineChartLabels: Array; - 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 = [ - { // 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); - } -} diff --git a/src/app/widgets/customers.component.html b/src/app/widgets/graph-widget.component.html similarity index 50% rename from src/app/widgets/customers.component.html rename to src/app/widgets/graph-widget.component.html index 2eb47af..9c008e3 100644 --- a/src/app/widgets/customers.component.html +++ b/src/app/widgets/graph-widget.component.html @@ -1,17 +1,10 @@
-
- -
- Action - Another action - Something else here -
-
-

{{ customerSum }}

-

Customers this week

+ +

{{ graphSum }}

+

{{ graphTitle }}

; + 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 = [ + { + data: [], + label: 'Series A' + } + ]; + public lineChartLabels: Array; + 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 = [ + { + 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) { + 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) { + this.lineChartLabels = data; + } + + // events + public chartClicked(e: any): void { + console.log(e); + } + + public chartHovered(e: any): void { + console.log(e); + } +} From cd0dd73c1ced6526e92feb19060f4caca3e1f3f3 Mon Sep 17 00:00:00 2001 From: Tom Bloor Date: Wed, 30 Aug 2017 12:35:43 +0100 Subject: [PATCH 7/8] 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 { } From 4731ed9a22bce82d7007823c2c29e7a4aea25e5e Mon Sep 17 00:00:00 2001 From: Tom Bloor Date: Wed, 30 Aug 2017 12:41:28 +0100 Subject: [PATCH 8/8] Fix various linter errors in dashboard --- src/app/dashboard/dashboard.component.ts | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts index bb660ab..47da3e5 100644 --- a/src/app/dashboard/dashboard.component.ts +++ b/src/app/dashboard/dashboard.component.ts @@ -44,11 +44,11 @@ export class DashboardComponent implements OnInit { constructor( private http: Http, private api: ApiService, - ) { + ) { this.shuffle = this.shuffledArray; this.api.graph_data(undefined) .subscribe( - result => { + result => { console.log(result); // Return what data to show 4 of this.showGraph = result.elementstoshow.graphs; @@ -91,16 +91,16 @@ export class DashboardComponent implements OnInit { ), this.api.breadcrumb_data(undefined) .subscribe( - result => { + result => { console.log(result); this.customersThisMonth = result.customersthismonth; this.moneySpentThisMonth = result.moneyspentthismonth; this.pointsTotal = result.pointstotal; this.averageTransactionToday = result.averagetransactiontoday; } - ) + ); } - + // Fisher-Yates shuffle function public shuffle(array) { return new Promise(resolve => { @@ -109,13 +109,13 @@ export class DashboardComponent implements OnInit { // While there are elements in the array while (counter > 0) { // Pick a random index - let index = Math.floor(Math.random() * counter); + const index = Math.floor(Math.random() * counter); // Decrease counter by 1 counter--; // And swap the last element with it - let temp = array[counter]; + const temp = array[counter]; array[counter] = array[index]; array[index] = temp; } @@ -124,7 +124,7 @@ export class DashboardComponent implements OnInit { resolve(true); }); } - + public brandPrimary = '#20a8d8'; public brandSuccess = '#4dbd74'; public brandInfo = '#63c2de'; @@ -263,7 +263,7 @@ export class DashboardComponent implements OnInit { ]; public lineChart4Legend = false; public lineChart4Type = 'line'; - + // lineChart6 public lineChart6Data: Array = [ { @@ -316,7 +316,7 @@ export class DashboardComponent implements OnInit { ]; public lineChart6Legend = false; public lineChart6Type = 'line'; - + // lineChart7 public lineChart7Data: Array = [ { @@ -357,7 +357,7 @@ export class DashboardComponent implements OnInit { ]; public lineChart7Legend = false; public lineChart7Type = 'line'; - + // lineChart8 public lineChart8Data: Array = [ { @@ -410,7 +410,7 @@ export class DashboardComponent implements OnInit { ]; public lineChart8Legend = false; public lineChart8Type = 'line'; - + // lineChart5 public lineChart5Data: Array = [ {