mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-24 03:10:13 +01:00
refactor(e-commerce): traffic
This commit is contained in:
Sergey Andrievskiy
parent
368a35110d
commit
0af864e19e
11 changed files with 58 additions and 183 deletions
|
|
@ -47,6 +47,9 @@ $nb-themes: nb-register-theme((
|
|||
), default, default);
|
||||
|
||||
$nb-themes: nb-register-theme((
|
||||
|
||||
card-height-tiny: 13.5rem,
|
||||
select-min-width: 6rem,
|
||||
// app wise variables for each theme
|
||||
//sidebar-header-gap: 2rem,
|
||||
//sidebar-header-height: initial,
|
||||
|
|
@ -83,6 +86,9 @@ $nb-themes: nb-register-theme((
|
|||
), cosmic, cosmic);
|
||||
|
||||
$nb-themes: nb-register-theme((
|
||||
|
||||
card-height-tiny: 13.5rem,
|
||||
select-min-width: 6rem,
|
||||
// app wise variables for each theme
|
||||
//sidebar-header-gap: 2rem,
|
||||
//sidebar-header-height: initial,
|
||||
|
|
@ -117,3 +123,8 @@ $nb-themes: nb-register-theme((
|
|||
//
|
||||
//progress-bar-background: linear-gradient(90deg, #ff9f6f 0%, #ff8b97 100%),
|
||||
), corporate, corporate);
|
||||
|
||||
$nb-themes: nb-register-theme((
|
||||
card-height-tiny: 13.5rem,
|
||||
select-min-width: 6rem,
|
||||
), dark, dark);
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import {
|
|||
NbUserModule,
|
||||
NbIconModule,
|
||||
NbSelectModule,
|
||||
NbListModule,
|
||||
} from '@nebular/theme';
|
||||
import { NgxEchartsModule } from 'ngx-echarts';
|
||||
import { NgxChartsModule } from '@swimlane/ngx-charts';
|
||||
|
|
@ -64,6 +65,7 @@ import { EarningLiveUpdateChartComponent } from './earning-card/front-side/earni
|
|||
NbIconModule,
|
||||
NbTabsetModule,
|
||||
NbSelectModule,
|
||||
NbListModule,
|
||||
ChartModule,
|
||||
NbProgressBarModule,
|
||||
NgxEchartsModule,
|
||||
|
|
|
|||
|
|
@ -15,15 +15,17 @@
|
|||
ngx-traffic-bar-chart {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
::ng-deep canvas {
|
||||
border-bottom-left-radius: nb-theme(card-border-radius);
|
||||
border-bottom-right-radius: nb-theme(card-border-radius);
|
||||
}
|
||||
::ng-deep {
|
||||
canvas {
|
||||
border-bottom-left-radius: nb-theme(card-border-radius);
|
||||
border-bottom-right-radius: nb-theme(card-border-radius);
|
||||
}
|
||||
|
||||
.echart {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
.echart {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@ declare const echarts: any;
|
|||
|
||||
@Component({
|
||||
selector: 'ngx-traffic-bar-chart',
|
||||
styleUrls: ['traffic-back-card.component.scss'],
|
||||
template: `
|
||||
<div echarts
|
||||
[options]="option"
|
||||
|
|
|
|||
|
|
@ -1,8 +1,4 @@
|
|||
@import '../../../../../@theme/styles/themes';
|
||||
//@import '~@nebular/bootstrap/styles/hero-buttons';
|
||||
@import '~@nebular/theme/styles/global/typography/typography';
|
||||
|
||||
$traffic-bar-background-color: #d0d8e3;
|
||||
|
||||
@include nb-install-component() {
|
||||
height: 100%;
|
||||
|
|
@ -26,8 +22,7 @@ $traffic-bar-background-color: #d0d8e3;
|
|||
|
||||
.period-from {
|
||||
position: absolute;
|
||||
right: 100%;
|
||||
@include nb-rtl(right, inherit);
|
||||
@include nb-ltr(right, 100%);
|
||||
@include nb-rtl(left, 100%);
|
||||
bottom: 0;
|
||||
white-space: nowrap;
|
||||
|
|
@ -40,32 +35,13 @@ $traffic-bar-background-color: #d0d8e3;
|
|||
|
||||
.progress-line {
|
||||
width: 100%;
|
||||
background-color: $traffic-bar-background-color;
|
||||
|
||||
&.success {
|
||||
background-color: text-success();
|
||||
|
||||
@include nb-for-theme(corporate) {
|
||||
background-color: text-primary();
|
||||
}
|
||||
background-color: nb-theme(color-success-default);
|
||||
}
|
||||
|
||||
&.failure {
|
||||
background-color: text-danger();
|
||||
}
|
||||
}
|
||||
|
||||
@include nb-for-theme(cosmic) {
|
||||
.progress-line {
|
||||
background: linear-gradient(180deg, #a054fe 0%, #7a58ff 100%);
|
||||
|
||||
&.success {
|
||||
background: linear-gradient(0deg, #00caba 0%, #00d77f 100%);
|
||||
}
|
||||
|
||||
&.failure {
|
||||
background: linear-gradient(180deg, #ff38ab 0%, #ff386c 100%);
|
||||
}
|
||||
background-color: nb-theme(color-danger-default);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,16 +1,11 @@
|
|||
<nb-card-body>
|
||||
<ul class="traffic-list">
|
||||
<li *ngFor="let item of frontCardData; trackBy: trackByDate">
|
||||
<div class="date">{{ item.date }}</div>
|
||||
<div class="value">{{ item.value }}</div>
|
||||
<div class="delta"
|
||||
[class.up]="item.delta.up"
|
||||
[class.down]="!item.delta.up">
|
||||
{{ item.delta.value }}%
|
||||
</div>
|
||||
<ngx-traffic-bar [barData]="item.comparison"
|
||||
[successDelta]="item.delta.up">
|
||||
</ngx-traffic-bar>
|
||||
</li>
|
||||
</ul>
|
||||
</nb-card-body>
|
||||
<nb-list>
|
||||
<nb-list-item class="item" *ngFor="let item of frontCardData; trackBy: trackByDate">
|
||||
<span class="caption">{{ item.date }}</span>
|
||||
<span>{{ item.value }}</span>
|
||||
<span class="delta" [class.up]="item.delta.up" [class.down]="!item.delta.up">
|
||||
{{ item.delta.value }}%
|
||||
</span>
|
||||
<ngx-traffic-bar [barData]="item.comparison" [successDelta]="item.delta.up">
|
||||
</ngx-traffic-bar>
|
||||
</nb-list-item>
|
||||
</nb-list>
|
||||
|
|
|
|||
|
|
@ -1,53 +1,21 @@
|
|||
@import '../../../../@theme/styles/themes';
|
||||
@import '~@nebular/theme/components/card/card.component.theme';
|
||||
@import '~@nebular/theme/styles/global/typography/typography';
|
||||
@import '~bootstrap/scss/mixins/breakpoints';
|
||||
@import '~@nebular/theme/styles/global/breakpoints';
|
||||
@import '../../../../@theme/styles/themes';
|
||||
|
||||
@include nb-install-component() {
|
||||
overflow: auto;
|
||||
|
||||
nb-card-body {
|
||||
padding: 0;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.traffic-list {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
.item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 4.5rem;
|
||||
font-size: 1.25rem;
|
||||
position: relative;
|
||||
color: nb-theme(color-fg);
|
||||
padding: 1rem nb-theme(card-padding);
|
||||
border-bottom:
|
||||
nb-theme(list-item-border-width)
|
||||
nb-theme(card-header-border-type)
|
||||
nb-theme(separator);
|
||||
|
||||
&:hover {
|
||||
background-color: nb-theme(layout-bg);
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
height: 100%;
|
||||
width: 6px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-color: nb-theme(color-success);
|
||||
border-radius: nb-theme(radius);
|
||||
}
|
||||
}
|
||||
|
||||
> * {
|
||||
flex: 2;
|
||||
|
|
@ -58,94 +26,34 @@
|
|||
}
|
||||
}
|
||||
|
||||
.date {
|
||||
@include nb-for-theme(corporate) {
|
||||
color: nb-theme(color-fg-heading);
|
||||
}
|
||||
}
|
||||
|
||||
.value {
|
||||
color: nb-theme(color-fg-heading);
|
||||
}
|
||||
|
||||
.delta {
|
||||
display: flex;
|
||||
padding-left: 0.5rem;
|
||||
font-size: 1rem;
|
||||
align-items: center;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
right: 100%;
|
||||
margin-right: 0.7rem;
|
||||
@include nb-ltr(margin-right, 0.7rem);
|
||||
@include nb-rtl(margin-left, 0.7rem);
|
||||
@include nb-rtl(margin-right, 0);
|
||||
border-left: 5px solid transparent;
|
||||
border-right: 5px solid transparent;
|
||||
}
|
||||
|
||||
&.down {
|
||||
color: text-danger();
|
||||
color: nb-theme(color-danger-default);
|
||||
|
||||
&::before {
|
||||
bottom: 5px;
|
||||
border-top: 6px solid text-danger();
|
||||
border-top: 6px solid nb-theme(color-danger-default);
|
||||
}
|
||||
}
|
||||
|
||||
&.up {
|
||||
color: text-success();
|
||||
color: nb-theme(color-success-default);
|
||||
|
||||
&::before {
|
||||
top: 5px;
|
||||
border-bottom: 6px solid text-success();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include nb-for-theme(cosmic) {
|
||||
.traffic-list li {
|
||||
&:hover {
|
||||
&::before {
|
||||
$color-top: nb-theme(btn-success-bg);
|
||||
$color-bottom: btn-hero-success-left-color();
|
||||
|
||||
background-image: linear-gradient(to top, $color-top, $color-bottom);
|
||||
box-shadow: 0 0 16px -2px btn-hero-success-middle-color();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include nb-for-theme(corporate) {
|
||||
.traffic-list li {
|
||||
border-color: nb-theme(tabs-separator);
|
||||
|
||||
&:first-child {
|
||||
border-top:
|
||||
nb-theme(list-item-border-width)
|
||||
nb-theme(card-header-border-type)
|
||||
nb-theme(separator);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&::before {
|
||||
background-color: nb-theme(color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.date {
|
||||
color: nb-theme(color-fg-heading);
|
||||
}
|
||||
|
||||
.delta {
|
||||
&.up {
|
||||
color: text-primary();
|
||||
|
||||
&::before {
|
||||
border-bottom-color: text-primary();
|
||||
}
|
||||
border-bottom: 6px solid nb-theme(color-success-default);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,16 +1,6 @@
|
|||
<nb-card-header>
|
||||
<span>Traffic</span>
|
||||
<div class="dropdown ghost-dropdown" ngbDropdown>
|
||||
<button type="button" class="btn btn-sm" ngbDropdownToggle
|
||||
[ngClass]="{
|
||||
'btn-success': currentTheme === 'default',
|
||||
'btn-primary': currentTheme !== 'default'}">
|
||||
{{ type }}
|
||||
</button>
|
||||
<ul ngbDropdownMenu class="dropdown-menu">
|
||||
<li class="dropdown-item" *ngFor="let period of types" (click)="changePeriod(period)">
|
||||
{{ period }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<nb-select [selected]="type" (selectedChange)="changePeriod($event)">
|
||||
<nb-option *ngFor="let period of types" [value]="period">{{ period }}</nb-option>
|
||||
</nb-select>
|
||||
</nb-card-header>
|
||||
|
|
|
|||
|
|
@ -5,12 +5,11 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.675rem 4rem 0.5rem 1.25rem;
|
||||
@include nb-rtl(padding-right, 1.25rem);
|
||||
padding: nb-theme(card-padding);
|
||||
padding-top: 0.45rem;
|
||||
padding-bottom: 0.45rem;
|
||||
|
||||
@include nb-ltr(padding-right, 4rem);
|
||||
@include nb-rtl(padding-left, 4rem);
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
min-width: 120px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,14 +3,14 @@
|
|||
<nb-card size="small">
|
||||
<ngx-traffic-cards-header [type]="period" (periodChange)="setPeriodAngGetData($event)"></ngx-traffic-cards-header>
|
||||
<ngx-traffic-front-card [frontCardData]="trafficListData"></ngx-traffic-front-card>
|
||||
<i class="nb-arrow-up" (click)="toggleView()"></i>
|
||||
<nb-icon class="toggle-icon" icon="chevron-up-outline" pack="eva" (click)="toggleView()"></nb-icon>
|
||||
</nb-card>
|
||||
</nb-card-front>
|
||||
<nb-card-back>
|
||||
<nb-card size="small">
|
||||
<ngx-traffic-cards-header [type]="period" (periodChange)="setPeriodAngGetData($event)"></ngx-traffic-cards-header>
|
||||
<ngx-traffic-back-card [trafficBarData]="trafficBarData"></ngx-traffic-back-card>
|
||||
<i class="nb-arrow-down" (click)="toggleView()"></i>
|
||||
<nb-icon class="toggle-icon" icon="chevron-down-outline" pack="eva" (click)="toggleView()"></nb-icon>
|
||||
</nb-card>
|
||||
</nb-card-back>
|
||||
</nb-reveal-card>
|
||||
|
|
|
|||
|
|
@ -1,19 +1,12 @@
|
|||
@import '../../../@theme/styles/themes';
|
||||
|
||||
@include nb-install-component() {
|
||||
.nb-arrow-up, .nb-arrow-down {
|
||||
.toggle-icon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
top: 1rem;
|
||||
right: 1.25rem;
|
||||
@include nb-rtl(right, auto);
|
||||
@include nb-rtl(left, 0);
|
||||
padding: 1.5rem;
|
||||
@include nb-rtl(left, 1.25rem);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
nb-card-back {
|
||||
::ng-deep nb-card-header {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue