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 @@
-
-
- -

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 @@ +
+
+ +

{{ 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 +}