Skip to content

Commit 56e4709

Browse files
ESadouskinnixaa
ESadouski
authored and
nnixaa
committed
feat(dashboard): add new E-commerce dashboard (#1754)
1 parent 3482404 commit 56e4709

File tree

106 files changed

+6333
-19
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

106 files changed

+6333
-19
lines changed

‎angular.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@
3737
"node_modules/nebular-icons/scss/nebular-icons.scss",
3838
"node_modules/angular-tree-component/dist/angular-tree-component.css",
3939
"node_modules/pace-js/templates/pace-theme-flash.tmpl.css",
40+
"node_modules/leaflet/dist/leaflet.css",
4041
"src/app/@theme/styles/styles.scss"
4142
],
4243
"scripts": [

‎src/app/@core/data/data.module.ts‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,31 @@ import { ElectricityService } from './electricity.service';
66
import { StateService } from './state.service';
77
import { SmartTableService } from './smart-table.service';
88
import { PlayerService } from './player.service';
9+
import { UserActivityService } from './user-activity.service';
10+
import { OrdersChartService } from './orders-chart.service';
11+
import { ProfitChartService } from './profit-chart.service';
12+
import { TrafficListService } from './traffic-list.service';
13+
import { PeriodsService } from './periods.service';
14+
import { EarningService } from './earning.service';
15+
import { OrdersProfitChartService } from './orders-profit-chart.service';
16+
import { TrafficBarService } from './traffic-bar.service';
17+
import { ProfitBarAnimationChartService } from './profit-bar-animation-chart.service';
918

1019
const SERVICES = [
1120
UserService,
1221
ElectricityService,
1322
StateService,
1423
SmartTableService,
1524
PlayerService,
25+
UserActivityService,
26+
OrdersChartService,
27+
ProfitChartService,
28+
TrafficListService,
29+
PeriodsService,
30+
EarningService,
31+
OrdersProfitChartService,
32+
TrafficBarService,
33+
ProfitBarAnimationChartService,
1634
];
1735

1836
@NgModule({

‎src/app/@core/data/earning.service.ts‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
import { Injectable } from '@angular/core';
2+
import { of as observableOf, Observable } from 'rxjs';
3+
4+
export class LiveUpdateChart {
5+
liveChart: { value: [string, number] }[];
6+
delta: {
7+
up: boolean;
8+
value: number;
9+
};
10+
dailyIncome: number;
11+
}
12+
13+
export class PieChart {
14+
value: number;
15+
name: string;
16+
}
17+
18+
@Injectable()
19+
export class EarningService {
20+
21+
private currentDate: Date = new Date();
22+
private currentValue = Math.random() * 1000;
23+
private ONE_DAY = 24 * 3600 * 1000;
24+
25+
private pieChartData = [
26+
{
27+
value: 50,
28+
name: 'Bitcoin',
29+
},
30+
{
31+
value: 25,
32+
name: 'Tether',
33+
},
34+
{
35+
value: 25,
36+
name: 'Ethereum',
37+
},
38+
];
39+
40+
private liveUpdateChartData = {
41+
bitcoin: {
42+
liveChart: [],
43+
delta: {
44+
up: true,
45+
value: 4,
46+
},
47+
dailyIncome: 45895,
48+
},
49+
tether: {
50+
liveChart: [],
51+
delta: {
52+
up: false,
53+
value: 9,
54+
},
55+
dailyIncome: 5862,
56+
},
57+
ethereum: {
58+
liveChart: [],
59+
delta: {
60+
up: false,
61+
value: 21,
62+
},
63+
dailyIncome: 584,
64+
},
65+
};
66+
67+
getDefaultLiveChartData(elementsNumber: number) {
68+
this.currentDate = new Date();
69+
this.currentValue = Math.random() * 1000;
70+
71+
return Array.from(Array(elementsNumber))
72+
.map(item => this.generateRandomLiveChartData());
73+
}
74+
75+
generateRandomLiveChartData() {
76+
this.currentDate = new Date(+this.currentDate + this.ONE_DAY);
77+
this.currentValue = this.currentValue + Math.random() * 20 - 11;
78+
79+
if (this.currentValue < 0) {
80+
this.currentValue = Math.random() * 100;
81+
}
82+
83+
return {
84+
value: [
85+
[
86+
this.currentDate.getFullYear(),
87+
this.currentDate.getMonth(),
88+
this.currentDate.getDate(),
89+
].join('/'),
90+
Math.round(this.currentValue),
91+
],
92+
};
93+
}
94+
95+
generateRandomEarningData(currency) {
96+
const data = this.liveUpdateChartData[currency.toLowerCase()];
97+
const newValue = this.generateRandomLiveChartData();
98+
99+
data.liveChart.shift();
100+
data.liveChart.push(newValue);
101+
102+
return observableOf(data.liveChart);
103+
}
104+
105+
getEarningLiveUpdateCardData(currency: string) {
106+
const data = this.liveUpdateChartData[currency.toLowerCase()];
107+
108+
data.liveChart = this.getDefaultLiveChartData(150);
109+
110+
return observableOf(data);
111+
}
112+
113+
getEarningPieChartData(): Observable<PieChart[]> {
114+
return observableOf(this.pieChartData);
115+
}
116+
}

‎src/app/@core/data/orders-chart.service.ts‎

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
import { Injectable } from '@angular/core';
2+
import { PeriodsService } from './periods.service';
3+
4+
export class OrdersChart {
5+
chartLabel: string[];
6+
linesData: number[][];
7+
}
8+
9+
@Injectable()
10+
export class OrdersChartService {
11+
12+
private year = [
13+
'2012',
14+
'2013',
15+
'2014',
16+
'2015',
17+
'2016',
18+
'2017',
19+
'2018',
20+
];
21+
22+
private data = { };
23+
24+
constructor(private period: PeriodsService) {
25+
this.data = {
26+
week: this.getDataForWeekPeriod(),
27+
month: this.getDataForMonthPeriod(),
28+
year: this.getDataForYearPeriod(),
29+
};
30+
}
31+
32+
private getDataForWeekPeriod(): OrdersChart {
33+
return {
34+
chartLabel: this.getDataLabels(42, this.period.getWeeks()),
35+
linesData: [
36+
[
37+
184, 267, 326, 366, 389, 399,
38+
392, 371, 340, 304, 265, 227,
39+
191, 158, 130, 108, 95, 91, 97,
40+
109, 125, 144, 166, 189, 212,
41+
236, 259, 280, 300, 316, 329,
42+
338, 342, 339, 329, 312, 288,
43+
258, 221, 178, 128, 71,
44+
],
45+
[
46+
158, 178, 193, 205, 212, 213,
47+
204, 190, 180, 173, 168, 164,
48+
162, 160, 159, 158, 159, 166,
49+
179, 195, 215, 236, 257, 276,
50+
292, 301, 304, 303, 300, 293,
51+
284, 273, 262, 251, 241, 234,
52+
232, 232, 232, 232, 232, 232,
53+
],
54+
[
55+
58, 137, 202, 251, 288, 312,
56+
323, 324, 311, 288, 257, 222,
57+
187, 154, 124, 100, 81, 68, 61,
58+
58, 61, 69, 80, 96, 115, 137,
59+
161, 186, 210, 233, 254, 271,
60+
284, 293, 297, 297, 297, 297,
61+
297, 297, 297, 297, 297,
62+
],
63+
],
64+
};
65+
}
66+
67+
private getDataForMonthPeriod(): OrdersChart {
68+
return {
69+
chartLabel: this.getDataLabels(47, this.period.getMonths()),
70+
linesData: [
71+
[
72+
5, 63, 113, 156, 194, 225,
73+
250, 270, 283, 289, 290,
74+
286, 277, 264, 244, 220,
75+
194, 171, 157, 151, 150,
76+
152, 155, 160, 166, 170,
77+
167, 153, 135, 115, 97,
78+
82, 71, 64, 63, 62, 61,
79+
62, 65, 73, 84, 102,
80+
127, 159, 203, 259, 333,
81+
],
82+
[
83+
6, 83, 148, 200, 240,
84+
265, 273, 259, 211,
85+
122, 55, 30, 28, 36,
86+
50, 68, 88, 109, 129,
87+
146, 158, 163, 165,
88+
173, 187, 208, 236,
89+
271, 310, 346, 375,
90+
393, 400, 398, 387,
91+
368, 341, 309, 275,
92+
243, 220, 206, 202,
93+
207, 222, 247, 286, 348,
94+
],
95+
[
96+
398, 348, 315, 292, 274,
97+
261, 251, 243, 237, 231,
98+
222, 209, 192, 172, 152,
99+
132, 116, 102, 90, 80, 71,
100+
64, 58, 53, 49, 48, 54, 66,
101+
84, 104, 125, 142, 156, 166,
102+
172, 174, 172, 167, 159, 149,
103+
136, 121, 105, 86, 67, 45, 22,
104+
],
105+
],
106+
};
107+
}
108+
109+
private getDataForYearPeriod(): OrdersChart {
110+
return {
111+
chartLabel: this.getDataLabels(42, this.year),
112+
linesData: [
113+
[
114+
190, 269, 327, 366, 389, 398,
115+
396, 387, 375, 359, 343, 327,
116+
312, 298, 286, 276, 270, 268,
117+
265, 258, 247, 234, 220, 204,
118+
188, 172, 157, 142, 128, 116,
119+
106, 99, 95, 94, 92, 89, 84,
120+
77, 69, 60, 49, 36, 22,
121+
],
122+
[
123+
265, 307, 337, 359, 375, 386,
124+
393, 397, 399, 397, 390, 379,
125+
365, 347, 326, 305, 282, 261,
126+
241, 223, 208, 197, 190, 187,
127+
185, 181, 172, 160, 145, 126,
128+
105, 82, 60, 40, 26, 19, 22,
129+
43, 82, 141, 220, 321,
130+
],
131+
[
132+
9, 165, 236, 258, 244, 206,
133+
186, 189, 209, 239, 273, 307,
134+
339, 365, 385, 396, 398, 385,
135+
351, 300, 255, 221, 197, 181,
136+
170, 164, 162, 161, 159, 154,
137+
146, 135, 122, 108, 96, 87,
138+
83, 82, 82, 82, 82, 82, 82,
139+
],
140+
],
141+
};
142+
}
143+
144+
getDataLabels(nPoints: number, labelsArray: string[]): string[] {
145+
const labelsArrayLength = labelsArray.length;
146+
const step = Math.round(nPoints / labelsArrayLength);
147+
148+
return Array.from(Array(nPoints)).map((item, index) => {
149+
const dataIndex = Math.round(index / step);
150+
151+
return index % step === 0 ? labelsArray[dataIndex] : '';
152+
});
153+
}
154+
155+
getOrdersChartData(period: string): OrdersChart {
156+
return this.data[period];
157+
}
158+
}

‎src/app/@core/data/orders-profit-chart.service.ts‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import { of as observableOf, Observable } from 'rxjs';
2+
import { Injectable } from '@angular/core';
3+
import { OrdersChart, OrdersChartService } from './orders-chart.service';
4+
import { ProfitChart, ProfitChartService } from './profit-chart.service';
5+
6+
export class OrderProfitChartSummary {
7+
title: string;
8+
value: number;
9+
}
10+
11+
@Injectable()
12+
export class OrdersProfitChartService {
13+
14+
private summary = [
15+
{
16+
title: 'Marketplace',
17+
value: 3654,
18+
},
19+
{
20+
title: 'Last Month',
21+
value: 946,
22+
},
23+
{
24+
title: 'Last Week',
25+
value: 654,
26+
},
27+
{
28+
title: 'Today',
29+
value: 230,
30+
},
31+
];
32+
33+
constructor(private ordersChartService: OrdersChartService,
34+
private profitChartService: ProfitChartService) {
35+
}
36+
37+
getOrderProfitChartSummary(): Observable<OrderProfitChartSummary[]> {
38+
return observableOf(this.summary);
39+
}
40+
41+
getOrdersChartData(period: string): Observable<OrdersChart> {
42+
return observableOf(this.ordersChartService.getOrdersChartData(period));
43+
}
44+
45+
getProfitChartData(period: string): Observable<ProfitChart> {
46+
return observableOf(this.profitChartService.getProfitChartData(period));
47+
}
48+
}

‎src/app/@core/data/periods.service.ts‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { Injectable } from '@angular/core';
2+
3+
@Injectable()
4+
export class PeriodsService {
5+
getYears() {
6+
return [
7+
'2010', '2011', '2012',
8+
'2013', '2014', '2015',
9+
'2016', '2017', '2018',
10+
];
11+
}
12+
13+
getMonths() {
14+
return [
15+
'Jan', 'Feb', 'Mar',
16+
'Apr', 'May', 'Jun',
17+
'Jul', 'Aug', 'Sep',
18+
'Oct', 'Nov', 'Dec',
19+
];
20+
}
21+
22+
getWeeks() {
23+
return [
24+
'Mon',
25+
'Tue',
26+
'Wed',
27+
'Thu',
28+
'Fri',
29+
'Sat',
30+
'Sun',
31+
];
32+
}
33+
}

0 commit comments

Comments
 (0)
⚡