Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-18 00:10:14 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor(e-commerce): visitors analytics

Browse source
This commit is contained in:
Sergey Andrievskiy 2019-06-17 21:36:18 +03:00
parent 098b481709
commit 4b0401de09
8 changed files with 50 additions and 72 deletions
Download patch file Download diff file Expand all files Collapse all files

25
src/app/@theme/styles/themes.scss
View file

@ -31,10 +31,9 @@ $nb-themes: nb-register-theme((
// //
//list-item-border-width: 1px, //list-item-border-width: 1px,
// //
//slide-out-container-width: 30%, slide-out-background: linear-gradient(270deg, #edf1f7 0%, #e4e9f2 100%),
//slide-out-background: linear-gradient(270deg, #f7fafb 0%, #ecf2f5 100%), slide-out-shadow-color: 0 4px 14px 0 #8f9bb3,
//slide-out-shadow-color: 0 4px 14px 0 #a2d2c8, slide-out-shadow-color-rtl: 0 4px 14px 0 #8f9bb3,
//slide-out-shadow-color-rtl: 0 4px 14px 0 #a2d2c8,
// //
//chart-panel-summary-box-shadow: none, //chart-panel-summary-box-shadow: none,
//chart-panel-summary-background-color: #ecf2f5, //chart-panel-summary-background-color: #ecf2f5,
@ -70,10 +69,9 @@ $nb-themes: nb-register-theme((
// //
//list-item-border-width: 1px, //list-item-border-width: 1px,
// //
//slide-out-container-width: 30%, slide-out-background: radial-gradient(circle, #5a37b8 0%, #7b51db 100%),
//slide-out-background: radial-gradient(circle, #302c6e 0%, #423f8c 100%), slide-out-shadow-color: 2px 0 3px #29157a,
//slide-out-shadow-color: 2px 0 3px rgba(19, 19, 94, 0.9), slide-out-shadow-color-rtl: -2px 0 3px #29157a,
//slide-out-shadow-color-rtl: -2px 0 3px rgba(19, 19, 94, 0.9),
// //
//chart-panel-summary-box-shadow: none, //chart-panel-summary-box-shadow: none,
//chart-panel-summary-background-color: rgba(0, 0, 0, 0.1), //chart-panel-summary-background-color: rgba(0, 0, 0, 0.1),
@ -109,10 +107,9 @@ $nb-themes: nb-register-theme((
// //
//list-item-border-width: 1px, //list-item-border-width: 1px,
// //
//slide-out-container-width: 30%, slide-out-background: linear-gradient(270deg, #edf1f7 0%, #e4e9f2 100%),
//slide-out-background: linear-gradient(270deg, #f7fafb 0%, #ecf2f5 100%), slide-out-shadow-color: 0 4px 14px 0 #8f9bb3,
//slide-out-shadow-color: 0 4px 14px 0 #a2d2c8, slide-out-shadow-color-rtl: 0 4px 14px 0 #8f9bb3,
//slide-out-shadow-color-rtl: 0 4px 14px 0 #a2d2c8,
// //
//chart-panel-summary-box-shadow: none, //chart-panel-summary-box-shadow: none,
//chart-panel-summary-background-color: #f7fafb, //chart-panel-summary-background-color: #f7fafb,
@ -127,4 +124,8 @@ $nb-themes: nb-register-theme((
$nb-themes: nb-register-theme(( $nb-themes: nb-register-theme((
card-height-tiny: 13.5rem, card-height-tiny: 13.5rem,
select-min-width: 6rem, select-min-width: 6rem,
slide-out-background: linear-gradient(270deg, #edf1f7 0%, #e4e9f2 100%),
slide-out-shadow-color: 0 4px 14px 0 #8f9bb3,
slide-out-shadow-color-rtl: 0 4px 14px 0 #8f9bb3,
), dark, dark); ), dark, dark);

9
src/app/pages/e-commerce/slide-out/slide-out.component.html
View file

@ -1,7 +1,8 @@
<i class="show-hide-toggle" <nb-icon [icon]="showVisitorsStatistics ? 'arrow-forward-outline' : 'arrow-back-outline'"
[class.nb-arrow-thin-left]="!showVisitorsStatistics" pack="eva"
[class.nb-arrow-thin-right]="showVisitorsStatistics" class="show-hide-toggle"
(click)="toggleStatistics()"></i> (click)="toggleStatistics()">
</nb-icon>
<div class="slide-out-container" <div class="slide-out-container"
[class.expanded]="showVisitorsStatistics" [class.expanded]="showVisitorsStatistics"
[class.collapsed]="!showVisitorsStatistics"> [class.collapsed]="!showVisitorsStatistics">

20
src/app/pages/e-commerce/slide-out/slide-out.component.scss
View file

@ -3,24 +3,18 @@
@import '~@nebular/theme/styles/global/breakpoints'; @import '~@nebular/theme/styles/global/breakpoints';
@include nb-install-component() { @include nb-install-component() {
$slide-out-container-width: nb-theme(slide-out-container-width); $slide-out-container-width: 40%;
// toggle button
.show-hide-toggle { .show-hide-toggle {
position: absolute;
display: block; display: block;
font-size: 2rem; position: absolute;
font-weight: nb-theme(font-weight-bold);
top: 1.5rem; top: 1.5rem;
right: 1.5rem; @include nb-ltr(right, 1.5rem);
@include nb-rtl(left, 1.5rem);
cursor: pointer; cursor: pointer;
color: nb-theme(color-fg);
background-color: transparent; background-color: transparent;
z-index: 2; z-index: 2;
@include nb-rtl(right, auto);
@include nb-rtl(left, 1.5rem);
} }
// toggle button
.slide-out-container { .slide-out-container {
position: absolute; position: absolute;
@ -39,8 +33,7 @@
.slide-out-container::before { .slide-out-container::before {
content: ''; content: '';
right: 0; @include nb-ltr(right, 0);
@include nb-rtl(right, auto);
@include nb-rtl(left, 0); @include nb-rtl(left, 0);
width: 100%; width: 100%;
position: absolute; position: absolute;
@ -53,8 +46,7 @@
} }
.slide-out-container.collapsed { .slide-out-container.collapsed {
left: calc(100% - 6rem); @include nb-ltr(left, calc(100% - 6rem));
@include nb-rtl(left, auto);
@include nb-rtl(right, calc(100% - 6rem)); @include nb-rtl(right, calc(100% - 6rem));
} }

2
src/app/pages/e-commerce/visitors-analytics/visitors-analytics-chart/visitors-analytics-chart.component.scss
View file

@ -2,7 +2,7 @@
@include nb-install-component() { @include nb-install-component() {
display: block; display: block;
height: 290px; height: 17.5rem;
width: 100%; width: 100%;
.echart { .echart {

2
src/app/pages/e-commerce/visitors-analytics/visitors-analytics.component.html
View file

@ -1,6 +1,6 @@
<nb-card size="medium"> <nb-card size="medium">
<nb-card-header> <nb-card-header>
<div class="title">Visitors Analytics</div> <h3>Visitors Analytics</h3>
<div class="sub-title">Consumption</div> <div class="sub-title">Consumption</div>
</nb-card-header> </nb-card-header>
<nb-card-body> <nb-card-body>

19
src/app/pages/e-commerce/visitors-analytics/visitors-analytics.component.scss
View file

@ -13,15 +13,19 @@
nb-card-header { nb-card-header {
border-bottom: none; border-bottom: none;
}
.title { .title {
font-size: 1.5rem; font-size: 1.5rem;
font-weight: nb-theme(font-weight-bold); font-weight: nb-theme(font-weight-bold);
} }
.sub-title { .sub-title {
color: nb-theme(color-fg); color: nb-theme(text-hint-color);
} font-family: nb-theme(text-subtitle-font-family);
font-size: nb-theme(text-subtitle-font-size);
font-weight: nb-theme(text-subtitle-font-weight);
line-height: nb-theme(text-subtitle-line-height);
} }
.container { .container {
@ -48,7 +52,6 @@
ngx-legend-chart { ngx-legend-chart {
::ng-deep .legends { ::ng-deep .legends {
padding-left: 0; padding-left: 0;
font-size: nb-theme(font-size-sm);
} }
} }
} }

11
src/app/pages/e-commerce/visitors-analytics/visitors-statistics/visitors-statistics.component.html
View file

@ -1,18 +1,15 @@
<div class="visitors-statistics"> <div class="visitors-statistics">
<div class="statistics-header"> <h4 class="h1">1,100</h4>
<div class="visitors-value">1,100</div> <div class="visitors-title">New Visitors</div>
<div class="visitors-title">New Visitors</div>
</div>
<div class="statistics-chart"> <div class="statistics-chart">
<div echarts <div echarts
[options]="option" [options]="option"
class="echart" class="echart"
(chartInit)="onChartInit($event)" (chartInit)="onChartInit($event)">
>
</div> </div>
</div> </div>
<div class="statistics-footer"> <div class="statistics-footer">
<div class="chart-values"> <div class="chart-values h5">
<span class="chart-value">25%</span> <span class="chart-value">25%</span>
<span class="chart-value">75%</span> <span class="chart-value">75%</span>
</div> </div>

34
src/app/pages/e-commerce/visitors-analytics/visitors-statistics/visitors-statistics.component.scss
View file

@ -2,31 +2,21 @@
@include nb-install-component() { @include nb-install-component() {
.visitors-value {
font-size: 3rem;
font-weight: nb-theme(font-weight-light);
color: nb-theme(color-fg-heading);
line-height: 0.8;
}
.visitors-title {
margin-top: 1rem;
font-size: 1.25rem;
color: nb-theme(color-fg);
}
.visitors-statistics { .visitors-statistics {
width: 100%; width: 100%;
} }
.visitors-title {
margin-top: 1rem;
}
.statistics-chart { .statistics-chart {
margin-top: 3.5rem; margin: 1.5rem 0;
margin-bottom: 1.5rem;
width: 100%; width: 100%;
.echart { .echart {
display: block; display: block;
height: 190px; height: 13.75rem;
width: 100%; width: 100%;
} }
} }
@ -36,25 +26,19 @@
} }
.chart-value { .chart-value {
color: nb-theme(color-fg-heading);
font-size: 2rem;
font-weight: nb-theme(font-weight-bold);
margin-bottom: 1rem;
flex: 1; flex: 1;
} }
// legend start .visitors-statistics-legend ::ng-deep {
.visitors-statistics-legend { .legends {
::ng-deep .legends {
padding: 0; padding: 0;
margin-left: 0; margin-left: 0;
} }
::ng-deep .legend { .legend {
flex: 1; flex: 1;
margin-left: 0; margin-left: 0;
justify-content: flex-start; justify-content: flex-start;
} }
} }
// legend end
} }