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