From 51097bc09f090d94be1ca769e13570be851656e1 Mon Sep 17 00:00:00 2001 From: piratefinn Date: Tue, 18 Jul 2017 11:35:43 +0100 Subject: [PATCH] Additions and fixes and server link fix --- src/app/components/add-data.component.html | 2 +- src/app/dashboard/dashboard.component.html | 151 ++++++++++++++-- src/app/dashboard/dashboard.component.ts | 200 +++++++++++++++++++-- src/app/providers/api-service.ts | 137 +++++++++----- src/scss/_custom.scss | 89 +++++++++ 5 files changed, 502 insertions(+), 77 deletions(-) diff --git a/src/app/components/add-data.component.html b/src/app/components/add-data.component.html index 15197b6..6143d49 100644 --- a/src/app/components/add-data.component.html +++ b/src/app/components/add-data.component.html @@ -209,7 +209,7 @@
- +
This is a help text
diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html index 2815b8d..31f0944 100644 --- a/src/app/dashboard/dashboard.component.html +++ b/src/app/dashboard/dashboard.component.html @@ -2,41 +2,65 @@
    -
  • +
  • Customers This Month
    {{customersThisMonth}}
    • -
  • +
  • Money Spent This Month
    {{moneySpentThisMonth | currency:'GBP':true:'1.2-2'}}
    • -
  • +
  • Points Total
    {{pointsTotal}}
    • -
  • +
  • Average Transaction Today
    {{averageTransactionToday | currency:'GBP':true:'1.2-2'}}
    • +
  • +
    Local Suppliers
    + {{percentOfLocalSuppliers}}% +
    +
    +
    +
    • +
  • +
    Competitor Local Suppliers
    + {{percentOfSingleCompetitorLocalSuppliers}}% +
    +
    +
    +
-
+
-
- -
-
{{percentOfCustomersSector}}%
- Returning Visitors +
{{noOfCustomersSector}}
+
No. of Customers in your Sector
+ Lorem ipsum dolor sit amet enim.
-
+
+
+
+
{{percentOfCustomersSector}}%
+
Customers in your Sector
+
+
+
+ Lorem ipsum dolor sit amet enim. +
+
+
+
@@ -65,7 +89,7 @@
-
+
-
+
-
+
-
+
+
+
+ +

9.823

+

Returning Customers last week

+
+
+ +
+
+
+
+
+
+ +

9.823

+

Returning Customers last month

+
+
+ +
+
+
+
+
+
+ +

9.823

+

Returning Customers last year

+
+
+ +
+
+
+
@@ -160,7 +250,7 @@
-
+
@@ -189,6 +279,35 @@
+
+
+
+
Your suppliers that are local vs a local competitor
+
    +
  • + + Yours + {{percentOfLocalSuppliers}}% +
    +
    +
    +
    +
    +
    • +
  • + + A competitor + {{percentOfSingleCompetitorLocalSuppliers}}% +
    +
    +
    +
    +
    +
    • +
+
+
+
diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts index a36413a..93489c6 100644 --- a/src/app/dashboard/dashboard.component.ts +++ b/src/app/dashboard/dashboard.component.ts @@ -7,19 +7,23 @@ import { Router } from '@angular/router'; templateUrl: 'dashboard.component.html' }) export class DashboardComponent implements OnInit { + shuffledArray: any; + showGraph: any; + showSnippet: any; + customersThisMonth: any; + moneySpentThisMonth: any; + pointsTotal: any; + averageTransactionToday: any; customersThisWeek: any; customersLastWeek: any; customersLastMonth: any; customersLastYear: any; pointsThisWeek: any; pointsLastWeek: any; - customersThisMonth: any; - moneySpentThisMonth: any; - pointsTotal: any; - averageTransactionToday: any; - shuffledArray: any; - showGraph: any; percentOfCustomersSector: any; + noOfCustomersSector: any; + percentOfLocalSuppliers: any; + percentOfSingleCompetitorLocalSuppliers: any; constructor( private http: Http, @@ -30,34 +34,51 @@ export class DashboardComponent implements OnInit { .subscribe( result => { console.log(result); - // Return what graphs to show - this.showGraph = result.graphstoshow; + // Return what data to show 4 of + this.showGraph = result.elementstoshow.graphs; + this.showSnippet = result.elementstoshow.snippets; // Percentage Chart - this.percentOfCustomersSector = result.percentofcustomerssector; + this.percentOfLocalSuppliers = result.data.localsuppliers.percentownlocal; + this.percentOfSingleCompetitorLocalSuppliers = result.data.localsuppliers.percentsinglecompetitorlocal; + // Percentage Chart 2 + this.percentOfCustomersSector = result.data.customersinsector.percent; + this.noOfCustomersSector = result.data.customersinsector.customerno; // Chart 1 - this.customersThisWeek = result.customersthisweek; + this.customersThisWeek = result.data.customersthisweek; this.lineChart1Data[0].data = this.customersThisWeek.customerno; this.lineChart1Labels = this.customersThisWeek.day; // Chart 2 - this.customersLastWeek = result.customerslastweek; + this.customersLastWeek = result.data.customerslastweek; this.lineChart2Data[0].data = this.customersLastWeek.customerno; this.lineChart2Labels = this.customersLastWeek.day; // Chart 3 - this.customersLastMonth = result.customerslastmonth; + this.customersLastMonth = result.data.customerslastmonth; this.lineChart3Data[0].data = this.customersLastMonth.customerno; this.lineChart3Labels = this.customersLastMonth.day; // Chart 4 - this.customersLastYear = result.customerslastyear; + this.customersLastYear = result.data.customerslastyear; this.lineChart4Data[0].data = this.customersLastYear.customerno; - this.lineChart4Labels = this.customersLastYear.day; + this.lineChart4Labels = this.customersLastYear.month; // Chart 5 - this.pointsThisWeek = result.pointsthisweek; + this.pointsThisWeek = result.data.pointsthisweek; this.lineChart5Data[0].data = this.pointsThisWeek.points; this.lineChart5Labels = this.pointsThisWeek.day; // Chart 6 - this.pointsLastWeek = result.pointslastweek; + this.pointsLastWeek = result.data.pointslastweek; this.barChart1Data[0].data = this.pointsLastWeek.points; this.barChart1Labels = this.pointsLastWeek.day; + // Chart 7 + this.customersLastWeek = result.data.customerslastweek; + this.lineChart6Data[0].data = this.customersLastWeek.returningcustomerno; + this.lineChart6Labels = this.customersLastWeek.day; + // Chart 8 + this.customersLastMonth = result.data.customerslastmonth; + this.lineChart7Data[0].data = this.customersLastMonth.returningcustomerno; + this.lineChart7Labels = this.customersLastMonth.day; + // Chart 9 + this.customersLastYear = result.data.customerslastyear; + this.lineChart8Data[0].data = this.customersLastYear.returningcustomerno; + this.lineChart8Labels = this.customersLastYear.month; } ), this.api.breadcrumb_data(undefined) @@ -329,6 +350,153 @@ export class DashboardComponent implements OnInit { public lineChart4Legend = false; public lineChart4Type = 'line'; + // lineChart6 + public lineChart6Data: Array = [ + { + data: [], + label: 'Series B' + } + ]; + public lineChart6Labels: Array = []; + public lineChart6Options: 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 lineChart6Colours: Array = [ + { // grey + backgroundColor: this.brandInfo, + borderColor: 'rgba(255,255,255,.55)' + } + ]; + public lineChart6Legend = false; + public lineChart6Type = 'line'; + + // lineChart7 + public lineChart7Data: Array = [ + { + data: [], + label: 'Series B' + } + ]; + public lineChart7Labels: Array = []; + public lineChart7Options: 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 lineChart7Colours: Array = [ + { // grey + backgroundColor: this.brandInfo, + borderColor: 'rgba(255,255,255,.55)' + } + ]; + public lineChart7Legend = false; + public lineChart7Type = 'line'; + + // lineChart8 + public lineChart8Data: Array = [ + { + data: [], + label: 'Series B' + } + ]; + public lineChart8Labels: Array = []; + public lineChart8Options: 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 lineChart8Colours: Array = [ + { // grey + backgroundColor: this.brandInfo, + borderColor: 'rgba(255,255,255,.55)' + } + ]; + public lineChart8Legend = false; + public lineChart8Type = 'line'; + // lineChart5 public lineChart5Data: Array = [ { diff --git a/src/app/providers/api-service.ts b/src/app/providers/api-service.ts index b8bfe61..54ac25e 100644 --- a/src/app/providers/api-service.ts +++ b/src/app/providers/api-service.ts @@ -7,7 +7,7 @@ import 'rxjs/add/operator/map'; @Injectable() export class ApiService { - private apiUrl = 'https://dev.app.peartrade.org/api'; + private apiUrl = 'https://dev.peartrade.org/api'; private sessionKey: string = null; constructor( private http: Http, @@ -102,52 +102,101 @@ export class ApiService { public graph_data(data) { return Observable.of( { - // graphstoshow is on server and changes every hour, listing what graphs to display - "graphstoshow" : - { - customersthisweekgraph : true, - customerslastweekgraph : true, - customerslastmonthgraph : true, - customerslastyeargraph : true, - percentofcustomerssectorgraph : true, - pointsthisweekgraph : true, - pointslastweekgraph : true, - }, - "customersthisweek" : - { - day : ['Monday', 'tuesday','wednesday','thursday','friday','saturday','sunday'], - customerno : [1,2,3,4,5,6,7], - }, - "customerslastweek" : - { - day : ['Monday', 'tuesday','wednesday','thursday','friday','saturday','sunday'], - customerno : [7,6,5,4,3,2,1], - }, - // can take differing size arrays, so any month works. Example here is for April - "customerslastmonth" : - { - day : ['April 1','April 2','April 3','April 4','April 5','April 6','April 7','April 8', - 'April 9','April 10','April 11','April 12','April 13','April 14','April 15','April 16', - 'April 17','April 18','April 19','April 20','April 21','April 22','April 23','April 24', - 'April 25','April 26','April 27','April 28','April 29','April 30'], - customerno : [7,6,5,4,3,2,1,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30], - }, - "customerslastyear" : - { - day : ['January','February','March','April','May','June','July','August','September','October','November','December'], - customerno : [7,6,5,4,3,2,1,8,9,10,11,12], - }, - percentofcustomerssector : 76, - "pointsthisweek" : + // graphstoshow is on server and changes every hour, listing what snippets & graphs to display + "elementstoshow" : { - day : ['Monday', 'tuesday','wednesday','thursday','friday','saturday','sunday'], - points : [1,2,3,4,5,6,7], + "graphs" : + { + customersthisweek : true, + customerslastweek : true, + customerslastmonth : true, + customerslastyear : true, + returningcustomerslastweek : true, + returningcustomerslastmonth : true, + returningcustomerslastyear : true, + noofcustomerssector : true, + percentofcustomerssector : true, + pointsthisweek : true, + percentlocalsuppliersvscompetitor : true, + }, + "snippets" : + { + customersthismonth: false, + moneyspentthismonth: true, + pointstotal: true, + averagetransactiontoday: false, + percentownlocalsupplier : true, + percentsinglecompetitorlocalsupplier : true, }, - "pointslastweek" : + }, + "data" : + "graphs" : + { + "customersthisweek" : + { + day : ['Monday', 'tuesday','wednesday','thursday','friday','saturday','sunday'], + customerno : [1,2,3,4,5,6,7], + returningcustomerno : [1,1,2,3,4,5,4], + totalcustomerno: + }, + "customerslastweek" : + { + day : ['Monday', 'tuesday','wednesday','thursday','friday','saturday','sunday'], + customerno : [7,6,5,4,3,2,1], + returningcustomerno : [3,4,5,4,3,2,1], + }, + // can take differing size arrays, so any month works. Example here is for April + "customerslastmonth" : + { + day : ['April 1','April 2','April 3','April 4','April 5','April 6','April 7','April 8', + 'April 9','April 10','April 11','April 12','April 13','April 14','April 15','April 16', + 'April 17','April 18','April 19','April 20','April 21','April 22','April 23','April 24', + 'April 25','April 26','April 27','April 28','April 29','April 30'], + customerno : [7,6,5,4,3,2,1,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30], + returningcustomerno : [4,5,4,3,2,1,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24], + }, + "customerslastyear" : + { + month : ['January','February','March','April','May','June','July','August','September','October','November','December'], + customerno : [7,6,5,4,3,2,1,8,9,10,11,12], + returningcustomerno : [3,2,4,2,1,1,1,6,4,8,5,12], + }, + // If the number is potential or actual customers in their sector has yet to be determined + "customersinsector" : + { + percent : 76, + customerno : 34000, + }, + "pointsthisweek" : + { + day : ['Monday', 'tuesday','wednesday','thursday','friday','saturday','sunday'], + points : [1,2,3,4,5,6,7], + }, + "pointslastweek" : + { + day : ['Monday', 'tuesday','wednesday','thursday','friday','saturday','sunday'], + points : [1,2,3,4,5,6,7], + }, + "localsuppliers" : + { + percentownlocal : 50, + percentsinglecompetitorlocal : 65, + }, + }, + "snippets" : { - day : ['Monday', 'tuesday','wednesday','thursday','friday','saturday','sunday'], - points : [1,2,3,4,5,6,7], - } + "customersinsector" : + { + percent : 76, + customerno : 34000, + }, + "localsuppliers" : + { + percentownlocal : 50, + percentsinglecompetitorlocal : 65, + }, + + }, } ) } diff --git a/src/scss/_custom.scss b/src/scss/_custom.scss index 15d367a..4832c87 100644 --- a/src/scss/_custom.scss +++ b/src/scss/_custom.scss @@ -1 +1,90 @@ // Here you can add other styles + +// white title font variant on type-2 as defined in _widgets.css +.horizontal-bars { + padding: 0; + margin: 0; + list-style: none; + + li { + position: relative; + height: 40px; + line-height: 40px; + vertical-align: middle; + + .title { + width: 100px; + font-size: 12px; + font-weight: 600; + color: $text-muted; + vertical-align: middle; + } + + .bars { + position: absolute; + top: 15px; + width: 100%; + padding-left: 100px; + + .progress:first-child { + margin-bottom: 2px; + } + } + + &.legend { + text-align: center; + + .badge { + display: inline-block; + width: 8px; + height: 8px; + padding: 0; + } + } + + &.divider { + height: 40px; + + i { + margin: 0 !important; + } + } + } + + &.type-3 { + + li { + overflow: hidden; + + i { + display: inline-block; + margin-right: $spacer; + margin-left: 5px; + font-size: 18px; + line-height: 40px; + } + + .title { + display: inline-block; + width: auto; + margin-top: -9px; + font-size: $font-size-base; + font-weight: normal; + line-height: 40px; + color: $white; + } + + .value { + float: right; + font-weight: 600; + } + + .bars { + position: absolute; + top: auto; + bottom: 0; + padding: 0; + } + } + } +} \ No newline at end of file