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 31f0944..5e37b19 100644 --- a/src/app/dashboard/dashboard.component.html +++ b/src/app/dashboard/dashboard.component.html @@ -36,6 +36,9 @@
+
+ +
@@ -60,79 +63,6 @@
-
-
-
-
- -
- Action - Another action - Something else here -
-
-

138

-

Customers this week

-
-
- -
-
-
-
-
-
- -

9.823

-

Customers last week

-
-
- -
-
-
-
-
-
- -

9.823

-

Customers last month

-
-
- -
-
-
@@ -378,755 +308,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 -
-
-
-
-
diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts index 93489c6..47da3e5 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 { GraphWidget } from '../widgets/graph-widget.component'; @Component({ templateUrl: 'dashboard.component.html' @@ -25,14 +26,29 @@ 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, - ) { + ) { 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; @@ -47,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; @@ -83,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 => { @@ -101,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; } @@ -116,7 +124,7 @@ export class DashboardComponent implements OnInit { resolve(true); }); } - + public brandPrimary = '#20a8d8'; public brandSuccess = '#4dbd74'; public brandInfo = '#63c2de'; @@ -203,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 = [ { @@ -349,7 +263,7 @@ export class DashboardComponent implements OnInit { ]; public lineChart4Legend = false; public lineChart4Type = 'line'; - + // lineChart6 public lineChart6Data: Array = [ { @@ -402,7 +316,7 @@ export class DashboardComponent implements OnInit { ]; public lineChart6Legend = false; public lineChart6Type = 'line'; - + // lineChart7 public lineChart7Data: Array = [ { @@ -443,7 +357,7 @@ export class DashboardComponent implements OnInit { ]; public lineChart7Legend = false; public lineChart7Type = 'line'; - + // lineChart8 public lineChart8Data: Array = [ { @@ -496,7 +410,7 @@ export class DashboardComponent implements OnInit { ]; public lineChart8Legend = false; public lineChart8Type = 'line'; - + // lineChart5 public lineChart5Data: Array = [ { diff --git a/src/app/dashboard/dashboard.module.ts b/src/app/dashboard/dashboard.module.ts index 9a2adae..c7bcdcc 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 { GraphWidget } from '../widgets/graph-widget.component'; + import { DashboardRoutingModule } from './dashboard.routing'; import { OrgResultComponent } from '../shared/org-result.component'; import { OrgTableComponent } from '../shared/org-table.component'; @@ -30,6 +32,7 @@ import { OrgTableComponent } from '../shared/org-table.component'; AddDataComponent, OrgResultComponent, OrgTableComponent, + GraphWidget, ] }) export class DashboardModule { } diff --git a/src/app/providers/api-service.ts b/src/app/providers/api-service.ts index beaf9e1..19e8d19 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 public 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/graph-widget.component.html b/src/app/widgets/graph-widget.component.html new file mode 100644 index 0000000..9c008e3 --- /dev/null +++ b/src/app/widgets/graph-widget.component.html @@ -0,0 +1,21 @@ +
+
+ +

{{ graphSum }}

+

{{ graphTitle }}

+
+
+ +
+
diff --git a/src/app/widgets/graph-widget.component.ts b/src/app/widgets/graph-widget.component.ts new file mode 100644 index 0000000..cdf9ae7 --- /dev/null +++ b/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; + 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); + } +} 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 @@ + 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 +} 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,