Skip to content

Commit 61b012a

Browse files
shoudaosshoudaos
committed
feat(analytics): added backend data
1 parent 762810b commit 61b012a

File tree

7 files changed

+243
-314
lines changed

7 files changed

+243
-314
lines changed

‎src/app/layout/sidebar/sidebar.template.html

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -19,27 +19,29 @@
1919
data-parent="#side-nav" href="#commerce-collapse">
2020
<i class="fi flaticon-diamond"></i>
2121
<span class="name">E-commerce</span>
22+
<sup class="ml-1 text-danger fw-semi-bold">
23+
NodeJS
24+
</sup>
2225
</a>
2326
<ul id="commerce-collapse" class="accordion-body collapse" aria-expanded="false">
2427
<li [routerLinkActive]="['active']"><a routerLink="ecommerce/management">Product Management</a></li>
2528
<li [routerLinkActive]="['active']"><a routerLink="ecommerce/product-grid">Product Grid</a></li>
2629
<li [routerLinkActive]="['active']"><a routerLink="ecommerce/product">Product Detail</a></li>
2730
</ul>
2831
</li>
29-
<li [routerLinkActive]="['active']">
30-
<a routerLink="package"><i class="fi flaticon-database-1"></i> <span class="name">LB Package</span></a>
31-
</li>
32-
<li [routerLinkActive]="['active']">
33-
<a routerLink="profile"><i class="fi flaticon-user"></i> <span class="name">Profile</span></a>
34-
</li>
35-
3632
<li [routerLinkActive]="['active']">
3733
<a routerLink="inbox"><i class="fi flaticon-paper-plane"></i> <span class="name">Email</span>
3834
<span class="badge badge-pill badge-warning">
3935
9
4036
</span>
4137
</a>
4238
</li>
39+
<li [routerLinkActive]="['active']">
40+
<a routerLink="profile"><i class="fi flaticon-user"></i> <span class="name">Profile</span></a>
41+
</li>
42+
<li [routerLinkActive]="['active']">
43+
<a routerLink="package"><i class="fi flaticon-database-1"></i> <span class="name">LB Package</span></a>
44+
</li>
4345
<h6 class="sidebar-nav-title">TEMPLATE</h6>
4446
<li class="accordion-group panel" [routerLinkActive]="['active']">
4547
<a (click)="sidebarBehavior($event)" class="accordion-toggle collapsed" data-toggle="collapse"

‎src/app/pages/main/analytics/analytics.component.ts

Lines changed: 11 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import {Component, ViewChild, ElementRef, OnInit, ViewEncapsulation} from '@angular/core';
1+
import {Component, ViewChild, ElementRef, ViewEncapsulation, OnInit} from '@angular/core';
22
import mock from './mock';
3+
import {AnalyticsService} from './analytics.service';
34

45
declare let jQuery: any;
56

@@ -14,58 +15,6 @@ export class AnalyticsComponent implements OnInit {
1415
month = this.now.getMonth() + 1;
1516
year = this.now.getFullYear();
1617
mock = mock;
17-
table = [
18-
{
19-
id: 0,
20-
name: 'Mark Otto',
21-
email: 'ottoto@wxample.com',
22-
product: 'ON the Road',
23-
price: '$25 224.2',
24-
date: '11 May 2017',
25-
city: 'Otsego',
26-
status: 'Sent',
27-
},
28-
{
29-
id: 1,
30-
name: 'Jacob Thornton',
31-
email: 'thornton@wxample.com',
32-
product: 'HP Core i7',
33-
price: '$1 254.2',
34-
date: '4 Jun 2017',
35-
city: 'Fivepointville',
36-
status: 'Sent',
37-
},
38-
{
39-
id: 2,
40-
name: 'Larry the Bird',
41-
email: 'bird@wxample.com',
42-
product: 'Air Pro',
43-
price: '$1 570.0',
44-
date: '27 Aug 2017',
45-
city: 'Leadville North',
46-
status: 'Pending',
47-
},
48-
{
49-
id: 3,
50-
name: 'Joseph May',
51-
email: 'josephmay@wxample.com',
52-
product: 'Version Control',
53-
price: '$5 224.5',
54-
date: '19 Feb 2018',
55-
city: 'Seaforth',
56-
status: 'Declined',
57-
},
58-
{
59-
id: 4,
60-
name: 'Peter Horadnia',
61-
email: 'horadnia@wxample.com',
62-
product: 'Let\'s Dance',
63-
price: '$43 594.7',
64-
date: '1 Mar 2018',
65-
city: 'Hanoverton',
66-
status: 'Sent',
67-
}
68-
];
6918

7019
calendarEvents: Array<Array<any>> = [
7120
[
@@ -112,10 +61,16 @@ export class AnalyticsComponent implements OnInit {
11261
}
11362
];
11463

115-
constructor() {
64+
constructor(public analyticsService: AnalyticsService) {
11665
this.trends.map(t => {
11766
t.data = this.getRandomData();
11867
});
68+
69+
this.analyticsService.onReceiveDataSuccess.subscribe(event => {
70+
if (event) {
71+
this.initChart();
72+
}
73+
});
11974
}
12075

12176
getRandomData() {
@@ -127,22 +82,8 @@ export class AnalyticsComponent implements OnInit {
12782
return arr;
12883
}
12984

130-
getData() {
131-
const data = [];
132-
const seriesCount = 3;
133-
const accessories = ['SMX', 'Direct', 'Networks'];
134-
135-
for (let i = 0; i < seriesCount; i += 1) {
136-
data.push({
137-
label: accessories[i],
138-
data: Math.floor(Math.random() * 100) + 1,
139-
});
140-
}
141-
return data;
142-
}
143-
14485
initChart() {
145-
jQuery.plot($(this.chartContainer.nativeElement), this.getData(), {
86+
jQuery.plot($(this.chartContainer.nativeElement), this.analyticsService.revenue, {
14687
series: {
14788
pie: {
14889
innerRadius: 0.8,
@@ -163,6 +104,6 @@ export class AnalyticsComponent implements OnInit {
163104
}
164105

165106
ngOnInit() {
166-
this.initChart();
107+
this.analyticsService.receiveDataRequest();
167108
}
168109
}

‎src/app/pages/main/analytics/analytics.service.ts

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
import {EventEmitter, Injectable} from '@angular/core';
2+
import {HttpClient} from '@angular/common/http';
3+
4+
@Injectable()
5+
export class AnalyticsService {
6+
_visits: any = {};
7+
_performance: any = { sdk: {}, integration: {} };
8+
_server: any = { 1: {}, 2: {} };
9+
_revenue: any = [];
10+
_mainChart: any = [];
11+
_isReceiving: any = false;
12+
13+
onReceiveDataSuccess: EventEmitter<boolean> = new EventEmitter();
14+
15+
constructor(private http: HttpClient) {}
16+
17+
receiveDataRequest() {
18+
this.receivingData();
19+
this.http.get('/analytics').subscribe(data => {
20+
this.receiveDataSuccess(data);
21+
});
22+
}
23+
24+
receiveDataSuccess(payload) {
25+
const {visits, performance, server, revenue, mainChart} = payload;
26+
this.isReceiving = false;
27+
this.visits = visits;
28+
this.performance = performance;
29+
this.server = server;
30+
this.revenue = revenue;
31+
this.mainChart = mainChart;
32+
this.onReceiveDataSuccess.emit(true);
33+
}
34+
35+
receivingData() {
36+
this.isReceiving = true;
37+
}
38+
39+
get visits() {
40+
return this._visits;
41+
}
42+
43+
set visits(visits) {
44+
this._visits = visits;
45+
}
46+
47+
get performance() {
48+
return this._performance;
49+
}
50+
51+
set performance(performance) {
52+
this._performance = performance;
53+
}
54+
55+
get server() {
56+
return this._server;
57+
}
58+
59+
set server(server) {
60+
this._server = server;
61+
}
62+
63+
get revenue() {
64+
return this._revenue;
65+
}
66+
67+
set revenue(revenue) {
68+
this._revenue = revenue;
69+
}
70+
71+
get mainChart() {
72+
return this._mainChart;
73+
}
74+
75+
set mainChart(mainChart) {
76+
this._mainChart = mainChart;
77+
}
78+
79+
get isReceiving() {
80+
return this._isReceiving;
81+
}
82+
83+
set isReceiving(isReceiving) {
84+
this._isReceiving = isReceiving;
85+
}
86+
}

0 commit comments

Comments
 (0)