Skip to content

Commit d29a0eb

Browse files
BlariBlari
committed
Add profile page
1 parent 595b665 commit d29a0eb

Some content is hidden

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

42 files changed

+2722
-1
lines changed

‎package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,10 @@
3030
"font-awesome": "^4.7.0",
3131
"moment": "2.15.2",
3232
"ng-apexcharts": "^1.7.1",
33+
"ngx-echarts": "^4.2.2",
3334
"ngx-smart-popover": "^1.4.0",
3435
"ngx-toastr": "^14.2.1",
36+
"ngx-trend": "^5.0.1",
3537
"rxjs": "~6.5.5",
3638
"tslib": "^2.0.0",
3739
"zone.js": "~0.11.4"

‎src/app/app-routing.module.ts

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { NotFoundComponent } from './shared/not-found/not-found.component';
55
import { AuthGuard } from './modules/auth/guards';
66
import { LayoutComponent } from './shared/layout/layout.component';
77
import { routes } from './consts';
8+
import { DashboardPageComponent } from './modules/dashboard/containers';
89

910
const ROUTES: typeof routes = routes;
1011

@@ -31,7 +32,12 @@ const route: Routes = [
3132
path: 'dashboard',
3233
pathMatch: 'full',
3334
canActivate: [AuthGuard],
34-
children: [],
35+
children: [
36+
{
37+
path: '',
38+
component: DashboardPageComponent
39+
}
40+
]
3541
},
3642
{
3743
path: 'admin',

‎src/app/modules/dashboard/components/daily-line-chart/daily-line-chart.component.html

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<mat-card class="chart">
2+
<mat-card-title class="chart__header">
3+
<p class="chart__title">Daily Line Chart</p>
4+
<div class="chart-legend">
5+
<div class="chart-legend__item">
6+
<div class="chart-legend__icon yellow"></div><span class="chart-legend__title">Tablet</span>
7+
</div>
8+
<div class="chart-legend__item">
9+
<div
10+
class="chart-legend__icon"
11+
[ngClass]="{
12+
'blue' : currentTheme === 'blue',
13+
'pink' : currentTheme === 'pink',
14+
'green' : currentTheme === 'green'
15+
}"
16+
></div>
17+
<span class="chart-legend__title">Mobile</span>
18+
</div>
19+
<div class="chart-legend__item">
20+
<div class="chart-legend__icon light-blue"></div><span class="chart-legend__title">Desktop</span>
21+
</div>
22+
</div>
23+
24+
<mat-select class="chart-select" [(ngModel)]="selectedMatSelectValue" (selectionChange)="changedMatSelectionValue()">
25+
<mat-option class="select-option" [value]="matSelectFields.daily">Daily</mat-option>
26+
<mat-option class="select-option" [value]="matSelectFields.weekly">Weekly</mat-option>
27+
<mat-option class="select-option" [value]="matSelectFields.monthly">Monthly</mat-option>
28+
</mat-select>
29+
30+
</mat-card-title>
31+
32+
<mat-card-content class="chart__content">
33+
<div #chart class="chart__content-item"></div>
34+
</mat-card-content>
35+
</mat-card>

‎src/app/modules/dashboard/components/daily-line-chart/daily-line-chart.component.scss

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
@import "../../../../styles/colors";
2+
@import "../../../../styles/font";
3+
@import "../../../../styles/variables";
4+
5+
.chart {
6+
margin: 24px 0;
7+
8+
@media (max-width: $normal) {
9+
margin: 0 0 24px 0;
10+
}
11+
12+
&__header {
13+
display: flex;
14+
justify-content: space-between;
15+
padding: 8px;
16+
17+
@media (max-width: $small) {
18+
flex-wrap: wrap;
19+
}
20+
}
21+
22+
&__title {
23+
margin: 0;
24+
display: flex;
25+
align-items: center;
26+
color: $grey;
27+
font-weight: $fw-normal;
28+
font-size: $fs-regular;
29+
text-transform: none;
30+
line-height: 1.6;
31+
letter-spacing: 0.12px;
32+
order: 1;
33+
}
34+
35+
&__content {
36+
height: 380px;
37+
width: 100%;
38+
@media (max-width: $small) {
39+
overflow-x: scroll;
40+
}
41+
}
42+
43+
&__content-item {
44+
@media (max-width: $small) {
45+
width: 600px;
46+
}
47+
}
48+
}
49+
50+
.chart-legend {
51+
display: flex;
52+
order: 2;
53+
54+
&__item {
55+
display: flex;
56+
align-items: center;
57+
margin-top: 2.24px;
58+
margin-right: 24px;
59+
}
60+
61+
&__icon {
62+
width: 5px;
63+
height: 5px;
64+
border-radius: 50%;
65+
}
66+
67+
&__title {
68+
font-weight: $fw-lighter;
69+
text-transform: none;
70+
font-size: $fs-regular;
71+
margin-left: 8px;
72+
}
73+
74+
@media (max-width: $small) {
75+
margin-top: 20px;
76+
order: 3;
77+
}
78+
}
79+
80+
.select-wrapper {
81+
width: 50px;
82+
}
83+
84+
.chart-select {
85+
order: 3;
86+
border: 0;
87+
width: auto;
88+
89+
@media (max-width: $small) {
90+
order: 2;
91+
}
92+
}
93+
94+
.select-option {
95+
font-size: $fs-normal;
96+
font-weight: $fw-lighter;
97+
color: $dark-grey;
98+
}
99+
100+
.yellow {
101+
background-color: $yellow;
102+
}
103+
104+
.blue {
105+
background-color: $blue;
106+
}
107+
108+
.pink {
109+
background-color: $pink;
110+
}
111+
112+
.green {
113+
background-color: $green;
114+
}
115+
116+
.light-blue {
117+
background-color: $white-blue;
118+
}
119+

0 commit comments

Comments
 (0)