mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-18 08:20:13 +01:00
refactor(e-commerce): earnings
This commit is contained in:
Sergey Andrievskiy
parent
da8bcf7b32
commit
368a35110d
9 changed files with 48 additions and 121 deletions
|
|
@ -17,6 +17,7 @@ $nb-themes: nb-register-theme((
|
|||
font-family-secondary: Exo,
|
||||
|
||||
card-height-tiny: 13.5rem,
|
||||
select-min-width: 6rem,
|
||||
|
||||
//
|
||||
//switcher-background: #ebeff5,
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import {
|
|||
NbTabsetModule,
|
||||
NbUserModule,
|
||||
NbIconModule,
|
||||
NbSelectModule,
|
||||
} from '@nebular/theme';
|
||||
import { NgxEchartsModule } from 'ngx-echarts';
|
||||
import { NgxChartsModule } from '@swimlane/ngx-charts';
|
||||
|
|
@ -62,6 +63,7 @@ import { EarningLiveUpdateChartComponent } from './earning-card/front-side/earni
|
|||
NbButtonModule,
|
||||
NbIconModule,
|
||||
NbTabsetModule,
|
||||
NbSelectModule,
|
||||
ChartModule,
|
||||
NbProgressBarModule,
|
||||
NgxEchartsModule,
|
||||
|
|
|
|||
|
|
@ -3,9 +3,9 @@
|
|||
</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="chart-info">
|
||||
<div class="title" [style.color]="color">{{ name }}</div>
|
||||
<div class="time-period">Last week</div>
|
||||
<div class="value">{{ value }}%</div>
|
||||
<div [style.color]="color">{{ name }}</div>
|
||||
<div class="time-period caption">Last week:</div>
|
||||
<div class="h6">{{ value }}%</div>
|
||||
</div>
|
||||
<ngx-earning-pie-chart [values]="earningPieChartData"
|
||||
(selectPie)="changeChartInfo($event)"
|
||||
|
|
|
|||
|
|
@ -3,11 +3,8 @@
|
|||
@import '~@nebular/theme/styles/global/breakpoints';
|
||||
|
||||
@include nb-install-component() {
|
||||
nb-card-header {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
ngx-earning-pie-chart, .chart-info {
|
||||
ngx-earning-pie-chart,
|
||||
.chart-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
|
|
@ -15,26 +12,18 @@
|
|||
padding-top: 0.7rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: nb-theme(font-size-xlg);
|
||||
}
|
||||
|
||||
.time-period {
|
||||
margin-top: 1.5rem;
|
||||
color: nb-theme(color-fg);
|
||||
}
|
||||
|
||||
.value {
|
||||
margin-top: 0.2rem;
|
||||
font-size: 1.5rem;
|
||||
font-weight: nb-theme(font-weight-bold);
|
||||
color: nb-theme(color-fg-heading);
|
||||
}
|
||||
|
||||
.echart {
|
||||
position: absolute;
|
||||
width: calc(50% - #{nb-theme(card-padding)});
|
||||
height: calc(100% - 2 * #{nb-theme(card-padding)});
|
||||
width: calc(50% - 1.25rem);
|
||||
height: calc(100% - 2rem);
|
||||
}
|
||||
|
||||
@include media-breakpoint-between(xl, xl) {
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
<nb-flip-card [showToggleButton]="false" [flipped]="flipped">
|
||||
<nb-card-front>
|
||||
<nb-card size="xsmall">
|
||||
<nb-card size="tiny">
|
||||
<ngx-earning-card-front></ngx-earning-card-front>
|
||||
<i class="nb-arrow-right" (click)="toggleFlipView()"></i>
|
||||
<nb-icon icon="chevron-right-outline" pack="eva" class="flip-icon" (click)="toggleView()"></nb-icon>
|
||||
</nb-card>
|
||||
</nb-card-front>
|
||||
<nb-card-back>
|
||||
<nb-card size="xsmall">
|
||||
<nb-card size="tiny">
|
||||
<ngx-earning-card-back></ngx-earning-card-back>
|
||||
<i class="nb-arrow-right" (click)="toggleFlipView()"></i>
|
||||
<nb-icon icon="chevron-right-outline" pack="eva" class="flip-icon" (click)="toggleView()"></nb-icon>
|
||||
</nb-card>
|
||||
</nb-card-back>
|
||||
</nb-flip-card>
|
||||
|
|
|
|||
|
|
@ -5,43 +5,36 @@
|
|||
position: relative;
|
||||
}
|
||||
|
||||
.nb-arrow-right {
|
||||
.flip-icon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
right: 0.625rem;
|
||||
top: 1rem;
|
||||
@include nb-rtl(right, auto);
|
||||
@include nb-rtl(left, 0);
|
||||
padding: 1.5rem;
|
||||
@include nb-rtl(left, 0.625rem);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
::ng-deep .flipped {
|
||||
.back-container {
|
||||
.nb-arrow-right {
|
||||
.flip-icon {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
}
|
||||
|
||||
.front-container {
|
||||
.nb-arrow-right {
|
||||
.flip-icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ngx-earning-card-back, ngx-earning-card-front {
|
||||
ngx-earning-card-back,
|
||||
ngx-earning-card-front {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
::ng-deep nb-card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@include nb-rtl(flex-direction, row-reverse);
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
::ng-deep nb-card-body {
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ export class EarningCardComponent {
|
|||
|
||||
flipped = false;
|
||||
|
||||
toggleFlipView() {
|
||||
toggleView() {
|
||||
this.flipped = !this.flipped;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,23 +1,19 @@
|
|||
<nb-card-header>
|
||||
<div class="dropdown ghost-dropdown" ngbDropdown>
|
||||
<button type="button" ngbDropdownToggle class="btn"
|
||||
[ngClass]="{
|
||||
'btn-success': currentTheme === 'default',
|
||||
'btn-primary': currentTheme !== 'default'}">
|
||||
{{ selectedCurrency }}
|
||||
</button>
|
||||
<ul class="dropdown-menu" ngbDropdownMenu>
|
||||
<li class="dropdown-item" *ngFor="let currency of currencies" (click)="changeCurrency(currency)">{{ currency }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<nb-select [selected]="selectedCurrency" (selectedChange)="changeCurrency($event)">
|
||||
<nb-option *ngFor="let currency of currencies" [value]="currency">{{ currency }}</nb-option>
|
||||
</nb-select>
|
||||
</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="chart-info">
|
||||
<div class="title">Daily Income</div>
|
||||
<div class="value">{{ earningLiveUpdateCardData.dailyIncome | ngxNumberWithCommas }}</div>
|
||||
<div>Daily Income</div>
|
||||
<div class="h6">{{ earningLiveUpdateCardData.dailyIncome | ngxNumberWithCommas }}</div>
|
||||
<div class="delta"
|
||||
[class.up]="earningLiveUpdateCardData.delta.up"
|
||||
[class.down]="!earningLiveUpdateCardData.delta.up">
|
||||
<nb-icon [icon]="earningLiveUpdateCardData.delta.up ? 'arrow-up' : 'arrow-down'"
|
||||
pack="eva"
|
||||
class="direction">
|
||||
</nb-icon>
|
||||
{{ earningLiveUpdateCardData.delta.value }}%
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -12,10 +12,6 @@
|
|||
padding-bottom: 0.45rem;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
min-width: 8.125rem;
|
||||
}
|
||||
|
||||
nb-card-body {
|
||||
padding: 1rem 0 0;
|
||||
flex-direction: column;
|
||||
|
|
@ -29,87 +25,37 @@
|
|||
margin: 0 nb-theme(card-padding);
|
||||
}
|
||||
|
||||
.title {
|
||||
color: nb-theme(color-fg-heading);
|
||||
}
|
||||
|
||||
.value {
|
||||
color: nb-theme(color-success);
|
||||
font-size: 1.5rem;
|
||||
|
||||
@include nb-for-theme(corporate) {
|
||||
color: nb-theme(color-primary);
|
||||
.delta {
|
||||
&.up .direction {
|
||||
color: nb-theme(color-success-default);
|
||||
}
|
||||
&.down .direction {
|
||||
color: nb-theme(color-danger-default);
|
||||
}
|
||||
}
|
||||
|
||||
.delta {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
color: nb-theme(color-fg-heading);
|
||||
padding-left: 0.5rem;
|
||||
font-size: 1rem;
|
||||
top: 0;
|
||||
right: 0;
|
||||
@include nb-rtl(left, 1.25rem);
|
||||
@include nb-rtl(right, inherit);
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
right: 100%;
|
||||
border-left: 6px solid transparent;
|
||||
border-right: 6px solid transparent;
|
||||
}
|
||||
|
||||
&.down {
|
||||
&::before {
|
||||
bottom: 4px;
|
||||
border-top: 7px solid text-danger();
|
||||
}
|
||||
}
|
||||
|
||||
&.up {
|
||||
&::before {
|
||||
top: 4px;
|
||||
border-bottom: 7px solid text-success();
|
||||
}
|
||||
}
|
||||
@include nb-rtl(left, 0);
|
||||
@include nb-rtl(right, auto);
|
||||
}
|
||||
|
||||
ngx-earning-live-update-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);
|
||||
}
|
||||
|
||||
.echart {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@include nb-for-theme(corporate) {
|
||||
.delta {
|
||||
&.down {
|
||||
color: text-danger();
|
||||
|
||||
&::before {
|
||||
bottom: 4px;
|
||||
border-top: 7px solid text-danger();
|
||||
}
|
||||
::ng-deep {
|
||||
canvas {
|
||||
border-bottom-left-radius: nb-theme(card-border-radius);
|
||||
border-bottom-right-radius: nb-theme(card-border-radius);
|
||||
}
|
||||
|
||||
&.up {
|
||||
color: text-primary();
|
||||
|
||||
&::before {
|
||||
top: 4px;
|
||||
border-bottom: 7px solid text-primary();
|
||||
}
|
||||
.echart {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue