mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-17 16:00:14 +01:00
refactor(e-commerce): visitors analytics
This commit is contained in:
Sergey Andrievskiy
parent
098b481709
commit
4b0401de09
8 changed files with 50 additions and 72 deletions
|
|
@ -31,10 +31,9 @@ $nb-themes: nb-register-theme((
|
|||
//
|
||||
//list-item-border-width: 1px,
|
||||
//
|
||||
//slide-out-container-width: 30%,
|
||||
//slide-out-background: linear-gradient(270deg, #f7fafb 0%, #ecf2f5 100%),
|
||||
//slide-out-shadow-color: 0 4px 14px 0 #a2d2c8,
|
||||
//slide-out-shadow-color-rtl: 0 4px 14px 0 #a2d2c8,
|
||||
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,
|
||||
//
|
||||
//chart-panel-summary-box-shadow: none,
|
||||
//chart-panel-summary-background-color: #ecf2f5,
|
||||
|
|
@ -70,10 +69,9 @@ $nb-themes: nb-register-theme((
|
|||
//
|
||||
//list-item-border-width: 1px,
|
||||
//
|
||||
//slide-out-container-width: 30%,
|
||||
//slide-out-background: radial-gradient(circle, #302c6e 0%, #423f8c 100%),
|
||||
//slide-out-shadow-color: 2px 0 3px rgba(19, 19, 94, 0.9),
|
||||
//slide-out-shadow-color-rtl: -2px 0 3px rgba(19, 19, 94, 0.9),
|
||||
slide-out-background: radial-gradient(circle, #5a37b8 0%, #7b51db 100%),
|
||||
slide-out-shadow-color: 2px 0 3px #29157a,
|
||||
slide-out-shadow-color-rtl: -2px 0 3px #29157a,
|
||||
//
|
||||
//chart-panel-summary-box-shadow: none,
|
||||
//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,
|
||||
//
|
||||
//slide-out-container-width: 30%,
|
||||
//slide-out-background: linear-gradient(270deg, #f7fafb 0%, #ecf2f5 100%),
|
||||
//slide-out-shadow-color: 0 4px 14px 0 #a2d2c8,
|
||||
//slide-out-shadow-color-rtl: 0 4px 14px 0 #a2d2c8,
|
||||
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,
|
||||
//
|
||||
//chart-panel-summary-box-shadow: none,
|
||||
//chart-panel-summary-background-color: #f7fafb,
|
||||
|
|
@ -127,4 +124,8 @@ $nb-themes: nb-register-theme((
|
|||
$nb-themes: nb-register-theme((
|
||||
card-height-tiny: 13.5rem,
|
||||
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);
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
<i class="show-hide-toggle"
|
||||
[class.nb-arrow-thin-left]="!showVisitorsStatistics"
|
||||
[class.nb-arrow-thin-right]="showVisitorsStatistics"
|
||||
(click)="toggleStatistics()"></i>
|
||||
<nb-icon [icon]="showVisitorsStatistics ? 'arrow-forward-outline' : 'arrow-back-outline'"
|
||||
pack="eva"
|
||||
class="show-hide-toggle"
|
||||
(click)="toggleStatistics()">
|
||||
</nb-icon>
|
||||
<div class="slide-out-container"
|
||||
[class.expanded]="showVisitorsStatistics"
|
||||
[class.collapsed]="!showVisitorsStatistics">
|
||||
|
|
|
|||
|
|
@ -3,24 +3,18 @@
|
|||
@import '~@nebular/theme/styles/global/breakpoints';
|
||||
|
||||
@include nb-install-component() {
|
||||
$slide-out-container-width: nb-theme(slide-out-container-width);
|
||||
$slide-out-container-width: 40%;
|
||||
|
||||
// toggle button
|
||||
.show-hide-toggle {
|
||||
position: absolute;
|
||||
display: block;
|
||||
font-size: 2rem;
|
||||
font-weight: nb-theme(font-weight-bold);
|
||||
position: absolute;
|
||||
top: 1.5rem;
|
||||
right: 1.5rem;
|
||||
@include nb-ltr(right, 1.5rem);
|
||||
@include nb-rtl(left, 1.5rem);
|
||||
cursor: pointer;
|
||||
color: nb-theme(color-fg);
|
||||
background-color: transparent;
|
||||
z-index: 2;
|
||||
@include nb-rtl(right, auto);
|
||||
@include nb-rtl(left, 1.5rem);
|
||||
}
|
||||
// toggle button
|
||||
|
||||
.slide-out-container {
|
||||
position: absolute;
|
||||
|
|
@ -39,8 +33,7 @@
|
|||
|
||||
.slide-out-container::before {
|
||||
content: '';
|
||||
right: 0;
|
||||
@include nb-rtl(right, auto);
|
||||
@include nb-ltr(right, 0);
|
||||
@include nb-rtl(left, 0);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
|
|
@ -53,8 +46,7 @@
|
|||
}
|
||||
|
||||
.slide-out-container.collapsed {
|
||||
left: calc(100% - 6rem);
|
||||
@include nb-rtl(left, auto);
|
||||
@include nb-ltr(left, calc(100% - 6rem));
|
||||
@include nb-rtl(right, calc(100% - 6rem));
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
@include nb-install-component() {
|
||||
display: block;
|
||||
height: 290px;
|
||||
height: 17.5rem;
|
||||
width: 100%;
|
||||
|
||||
.echart {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<nb-card size="medium">
|
||||
<nb-card-header>
|
||||
<div class="title">Visitors Analytics</div>
|
||||
<h3>Visitors Analytics</h3>
|
||||
<div class="sub-title">Consumption</div>
|
||||
</nb-card-header>
|
||||
<nb-card-body>
|
||||
|
|
|
|||
|
|
@ -13,15 +13,19 @@
|
|||
|
||||
nb-card-header {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: nb-theme(font-weight-bold);
|
||||
}
|
||||
.title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: nb-theme(font-weight-bold);
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
color: nb-theme(color-fg);
|
||||
}
|
||||
.sub-title {
|
||||
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 {
|
||||
|
|
@ -48,7 +52,6 @@
|
|||
ngx-legend-chart {
|
||||
::ng-deep .legends {
|
||||
padding-left: 0;
|
||||
font-size: nb-theme(font-size-sm);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,18 +1,15 @@
|
|||
<div class="visitors-statistics">
|
||||
<div class="statistics-header">
|
||||
<div class="visitors-value">1,100</div>
|
||||
<div class="visitors-title">New Visitors</div>
|
||||
</div>
|
||||
<h4 class="h1">1,100</h4>
|
||||
<div class="visitors-title">New Visitors</div>
|
||||
<div class="statistics-chart">
|
||||
<div echarts
|
||||
[options]="option"
|
||||
class="echart"
|
||||
(chartInit)="onChartInit($event)"
|
||||
>
|
||||
(chartInit)="onChartInit($event)">
|
||||
</div>
|
||||
</div>
|
||||
<div class="statistics-footer">
|
||||
<div class="chart-values">
|
||||
<div class="chart-values h5">
|
||||
<span class="chart-value">25%</span>
|
||||
<span class="chart-value">75%</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,31 +2,21 @@
|
|||
|
||||
@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 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.visitors-title {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.statistics-chart {
|
||||
margin-top: 3.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
margin: 1.5rem 0;
|
||||
width: 100%;
|
||||
|
||||
.echart {
|
||||
display: block;
|
||||
height: 190px;
|
||||
height: 13.75rem;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
@ -36,25 +26,19 @@
|
|||
}
|
||||
|
||||
.chart-value {
|
||||
color: nb-theme(color-fg-heading);
|
||||
font-size: 2rem;
|
||||
font-weight: nb-theme(font-weight-bold);
|
||||
margin-bottom: 1rem;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
// legend start
|
||||
.visitors-statistics-legend {
|
||||
::ng-deep .legends {
|
||||
.visitors-statistics-legend ::ng-deep {
|
||||
.legends {
|
||||
padding: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
::ng-deep .legend {
|
||||
.legend {
|
||||
flex: 1;
|
||||
margin-left: 0;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
// legend end
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue