mirror of
https://github.com/akveo/ngx-admin.git
synced 2026-03-09 07:02:35 +01:00
feat: update to Angular 8, Nebular 4 (#2114)
This commit is contained in:
Dmitry Nehaychik
Sergey Andrievskiy
parent
537e6a77b0
commit
e9600b4a07
323 changed files with 7421 additions and 14161 deletions
|
|
@ -1,20 +1,7 @@
|
|||
<div class="chart-header">
|
||||
<ngx-legend-chart [legendItems]="chartLegend"></ngx-legend-chart>
|
||||
<ngx-legend-chart [legendItems]="chartLegend"></ngx-legend-chart>
|
||||
|
||||
<div class="dropdown"
|
||||
[ngClass]="{ 'ghost-dropdown': currentTheme === 'corporate' }"
|
||||
ngbDropdown>
|
||||
<button type="button" ngbDropdownToggle class="btn"
|
||||
[ngClass]="{
|
||||
'btn-outline-success': currentTheme === 'default',
|
||||
'btn-primary': currentTheme !== 'default',
|
||||
'btn-sm': breakpoint.width <= breakpoints.is}">
|
||||
{{ type }}
|
||||
</button>
|
||||
<ul class="dropdown-menu" ngbDropdownMenu>
|
||||
<li class="dropdown-item" *ngFor="let period of types" (click)="changePeriod(period)">
|
||||
{{ period }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<nb-select class="period-select" [selected]="type" (selectedChange)="changePeriod($event)">
|
||||
<nb-option *ngFor="let period of types" [value]="period">
|
||||
{{ period }}
|
||||
</nb-option>
|
||||
</nb-select>
|
||||
|
|
|
|||
|
|
@ -3,39 +3,23 @@
|
|||
@import '~@nebular/theme/styles/global/breakpoints';
|
||||
|
||||
@include nb-install-component() {
|
||||
.chart-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 2.125rem;
|
||||
align-items: center;
|
||||
padding: 1.5rem 4.5rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
margin: -1rem;
|
||||
|
||||
ngx-legend-chart,
|
||||
.period-select {
|
||||
padding-top: 1rem;
|
||||
@include nb-ltr(padding-left, 0.5rem);
|
||||
@include nb-rtl(padding-right, 0.5rem);
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
min-width: 8.125rem;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(is) {
|
||||
.chart-header {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
ngx-legend-chart {
|
||||
align-self: flex-start;
|
||||
|
||||
/deep/ .legends {
|
||||
padding-left: 0;
|
||||
font-size: nb-theme(font-size-sm);
|
||||
}
|
||||
|
||||
/deep/ .legend {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
align-self: flex-end;
|
||||
@include media-breakpoint-up(md) {
|
||||
.period-select {
|
||||
@include nb-ltr(margin-left, auto);
|
||||
@include nb-rtl(margin-right, auto);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,51 +1,15 @@
|
|||
@import '../../../../@theme/styles/themes';
|
||||
@import '~bootstrap/scss/mixins/breakpoints';
|
||||
@import '~@nebular/theme/styles/global/breakpoints';
|
||||
|
||||
@include nb-install-component() {
|
||||
.summary-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex: 1;
|
||||
background-color: nb-theme(chart-panel-summary-background-color);
|
||||
box-shadow: nb-theme(chart-panel-summary-box-shadow);
|
||||
background-color: nb-theme(background-basic-color-2);
|
||||
justify-content: space-between;
|
||||
padding: 1.5rem 4rem 1rem;
|
||||
margin-bottom: 1rem;
|
||||
border:
|
||||
nb-theme(chart-panel-summary-border-width)
|
||||
solid
|
||||
nb-theme(chart-panel-summary-border-color);
|
||||
border: 1px solid nb-theme(border-basic-color-3);
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 2rem;
|
||||
color: nb-theme(color-fg-heading);
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
.value, .title {
|
||||
font-weight: nb-theme(font-weight-bold);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: nb-theme(font-size-sm);
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: nb-theme(font-size-xlg);
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(is) {
|
||||
.summary-container {
|
||||
padding-left: nb-theme(padding);
|
||||
padding-right: nb-theme(padding);
|
||||
}
|
||||
|
||||
.value {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,9 +5,9 @@ import { Component, Input } from '@angular/core';
|
|||
styleUrls: ['./chart-panel-summary.component.scss'],
|
||||
template: `
|
||||
<div class="summary-container">
|
||||
<div class="summory" *ngFor="let item of summary">
|
||||
<div class="title">{{ item.title }}</div>
|
||||
<div class="value">{{ item.value }}</div>
|
||||
<div *ngFor="let item of summary">
|
||||
<div>{{ item.title }}</div>
|
||||
<div class="h6">{{ item.value }}</div>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
|
|
|
|||
|
|
@ -6,19 +6,24 @@ $legend-canceled-color: #3f4fda;
|
|||
|
||||
@include nb-install-component() {
|
||||
|
||||
/deep/ nb-tabset {
|
||||
nb-tabset {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
|
||||
ul {
|
||||
border-bottom: none;
|
||||
::ng-deep ul {
|
||||
// make same size as card header
|
||||
border-color: transparent;
|
||||
padding-bottom: 1px;
|
||||
.tab-link {
|
||||
padding: 1.25rem 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
nb-tab {
|
||||
flex: 1;
|
||||
padding-bottom: 1.25rem;
|
||||
padding: 0 0 1.25rem;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
|
|
@ -29,7 +34,8 @@ $legend-canceled-color: #3f4fda;
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
ngx-chart-panel-header, ngx-profit-chart, ngx-orders-chart {
|
||||
ngx-profit-chart,
|
||||
ngx-orders-chart {
|
||||
padding: 0 1.25rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,8 +21,8 @@ export class ECommerceChartsPanelComponent implements OnDestroy {
|
|||
ordersChartData: OrdersChart;
|
||||
profitChartData: ProfitChart;
|
||||
|
||||
@ViewChild('ordersChart') ordersChart: OrdersChartComponent;
|
||||
@ViewChild('profitChart') profitChart: ProfitChartComponent;
|
||||
@ViewChild('ordersChart', { static: true }) ordersChart: OrdersChartComponent;
|
||||
@ViewChild('profitChart', { static: true }) profitChart: ProfitChartComponent;
|
||||
|
||||
constructor(private ordersProfitChartService: OrdersProfitChartData) {
|
||||
this.ordersProfitChartService.getOrderProfitChartSummary()
|
||||
|
|
|
|||
|
|
@ -1,9 +1,7 @@
|
|||
@import '../../../../@theme/styles/themes';
|
||||
|
||||
@include nb-install-component() {
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
|
||||
.echart {
|
||||
display: block;
|
||||
|
|
|
|||
|
|
@ -80,7 +80,7 @@ export class OrdersChartComponent implements AfterViewInit, OnDestroy, OnChanges
|
|||
position: 'top',
|
||||
backgroundColor: eTheme.tooltipBg,
|
||||
borderColor: eTheme.tooltipBorderColor,
|
||||
borderWidth: 3,
|
||||
borderWidth: 1,
|
||||
formatter: (params) => {
|
||||
return Math.round(parseInt(params.value, 10));
|
||||
},
|
||||
|
|
|
|||
|
|
@ -8,33 +8,16 @@
|
|||
height: 100%;
|
||||
flex: 1;
|
||||
padding: nb-theme(card-padding);
|
||||
border-left:
|
||||
nb-theme(card-header-border-width)
|
||||
nb-theme(card-header-border-type)
|
||||
nb-theme(card-header-border-color);
|
||||
|
||||
.header {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-family: nb-theme(card-header-font-family);
|
||||
color: nb-theme(color-fg);
|
||||
}
|
||||
|
||||
.echart {
|
||||
height: 85%;
|
||||
height: 75%;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
height: 50%;
|
||||
border-top:
|
||||
nb-theme(card-border-width)
|
||||
nb-theme(card-header-border-type)
|
||||
nb-theme(card-header-border-color);
|
||||
|
||||
.echart {
|
||||
height: 75%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,8 +9,8 @@ import { LayoutService } from '../../../../@core/utils/layout.service';
|
|||
styleUrls: ['./country-orders-chart.component.scss'],
|
||||
template: `
|
||||
<div class="header">
|
||||
<span class="title">Selected Country/Region</span>
|
||||
<h2>{{countryName}}</h2>
|
||||
<span class="caption">Selected Country/Region</span>
|
||||
<h2 class="h4">{{ countryName }}</h2>
|
||||
</div>
|
||||
<div echarts
|
||||
[options]="option"
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import { CountryOrderData } from '../../../@core/data/country-order';
|
|||
selector: 'ngx-country-orders',
|
||||
styleUrls: ['./country-orders.component.scss'],
|
||||
template: `
|
||||
<nb-card [size]="breakpoint.width >= breakpoints.md ? 'medium' : 'xxlarge'">
|
||||
<nb-card [size]="breakpoint.width >= breakpoints.md ? 'medium' : 'giant'">
|
||||
<nb-card-header>Country Orders Statistics</nb-card-header>
|
||||
<nb-card-body>
|
||||
<ngx-country-orders-map (select)="selectCountryById($event)"
|
||||
|
|
|
|||
|
|
@ -10,61 +10,44 @@
|
|||
|
||||
.leaflet-container {
|
||||
height: 100%;
|
||||
background-color: nb-theme(layout-bg);
|
||||
|
||||
@include nb-for-theme(default) {
|
||||
background-color: nb-theme(color-white);
|
||||
}
|
||||
|
||||
@include nb-for-theme(corporate) {
|
||||
background-color: nb-theme(color-white);
|
||||
}
|
||||
background-color: nb-theme(background-basic-color-2);
|
||||
}
|
||||
|
||||
/deep/ .leaflet-top, /deep/ .leaflet-bottom {
|
||||
::ng-deep .leaflet-top, ::ng-deep .leaflet-bottom {
|
||||
z-index: 997;
|
||||
}
|
||||
|
||||
/deep/ .leaflet-bar {
|
||||
::ng-deep .leaflet-bar {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/deep/ .leaflet-control-zoom {
|
||||
::ng-deep .leaflet-control-zoom {
|
||||
border: none;
|
||||
|
||||
a {
|
||||
background-color: nb-theme(color-success);
|
||||
color: nb-theme(color-white);
|
||||
background-color: nb-theme(color-primary-default);
|
||||
color: nb-theme(text-alternate-color);
|
||||
border-bottom: none;
|
||||
height: 2.5rem;
|
||||
}
|
||||
|
||||
@include nb-for-theme(cosmic) {
|
||||
background-color: nb-theme(color-primary);
|
||||
}
|
||||
|
||||
@include nb-for-theme(corporate) {
|
||||
background-color: nb-theme(color-primary);
|
||||
}
|
||||
.leaflet-disabled {
|
||||
background-color: nb-theme(color-primary-disabled);
|
||||
}
|
||||
|
||||
.leaflet-control-zoom-in {
|
||||
border-top-left-radius: nb-theme(btn-border-radius);
|
||||
border-top-right-radius: nb-theme(btn-border-radius);
|
||||
border-top-left-radius: nb-theme(button-rectangle-border-radius);
|
||||
border-top-right-radius: nb-theme(button-rectangle-border-radius);
|
||||
}
|
||||
|
||||
.leaflet-control-zoom-out {
|
||||
margin-top: 1px;
|
||||
border-bottom-left-radius: nb-theme(btn-border-radius);
|
||||
border-bottom-right-radius: nb-theme(btn-border-radius);
|
||||
border-bottom-left-radius: nb-theme(button-rectangle-border-radius);
|
||||
border-bottom-right-radius: nb-theme(button-rectangle-border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .leaflet-control-attribution {
|
||||
::ng-deep .leaflet-control-attribution {
|
||||
background: transparent;
|
||||
|
||||
a {
|
||||
color: nb-theme(color-fg);
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ export class CountryOrdersMapService {
|
|||
constructor(private http: HttpClient) {}
|
||||
|
||||
getCords(): Observable<any> {
|
||||
return this.http.get('./assets/leaflet-countries/countries.geo.json');
|
||||
return this.http.get('assets/leaflet-countries/countries.geo.json');
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,14 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import {
|
||||
NbButtonModule,
|
||||
NbCardModule,
|
||||
NbProgressBarModule,
|
||||
NbTabsetModule,
|
||||
NbUserModule,
|
||||
NbIconModule,
|
||||
NbSelectModule,
|
||||
NbListModule,
|
||||
} from '@nebular/theme';
|
||||
import { NgxEchartsModule } from 'ngx-echarts';
|
||||
import { NgxChartsModule } from '@swimlane/ngx-charts';
|
||||
|
||||
|
|
@ -49,7 +59,15 @@ import { EarningLiveUpdateChartComponent } from './earning-card/front-side/earni
|
|||
@NgModule({
|
||||
imports: [
|
||||
ThemeModule,
|
||||
NbCardModule,
|
||||
NbUserModule,
|
||||
NbButtonModule,
|
||||
NbIconModule,
|
||||
NbTabsetModule,
|
||||
NbSelectModule,
|
||||
NbListModule,
|
||||
ChartModule,
|
||||
NbProgressBarModule,
|
||||
NgxEchartsModule,
|
||||
NgxChartsModule,
|
||||
LeafletModule,
|
||||
|
|
|
|||
|
|
@ -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,44 +5,37 @@
|
|||
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;
|
||||
}
|
||||
|
||||
/deep/ .flipped {
|
||||
::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;
|
||||
}
|
||||
|
||||
/deep/ nb-card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@include nb-rtl(flex-direction, row-reverse);
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
/deep/ nb-card-body {
|
||||
::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>
|
||||
|
|
|
|||
|
|
@ -8,12 +8,8 @@
|
|||
|
||||
nb-card-header {
|
||||
flex-direction: row;
|
||||
padding-top: 0.45rem;
|
||||
padding-bottom: 0.45rem;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
min-width: 8.125rem;
|
||||
padding-top: nb-theme(card-header-with-select-padding-top);
|
||||
padding-bottom: nb-theme(card-header-with-select-padding-bottom);
|
||||
}
|
||||
|
||||
nb-card-body {
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
/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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
<div class="legends">
|
||||
<div *ngFor="let legend of legendItems" class="legend">
|
||||
<div class="legend-item-color"
|
||||
[style.background]="legend.iconColor"></div>
|
||||
<div class="legend-title">{{ legend.title }}</div>
|
||||
</div>
|
||||
<div *ngFor="let legend of legendItems" class="legend">
|
||||
<div class="legend-item-color"
|
||||
[style.background]="legend.iconColor"></div>
|
||||
<div class="legend-title">{{ legend.title }}</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,21 +3,17 @@
|
|||
@import '~@nebular/theme/styles/global/breakpoints';
|
||||
|
||||
@include nb-install-component() {
|
||||
.legends {
|
||||
display: flex;
|
||||
@include nb-rtl(flex-direction, row-reverse);
|
||||
color: nb-theme(color-fg);
|
||||
padding: 0 0 0 2.85rem;
|
||||
}
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.legend {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
margin-left: 4rem;
|
||||
align-items: center;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
&:not(:last-child) {
|
||||
@include nb-ltr(margin-right, 1rem);
|
||||
@include nb-rtl(margin-left, 1rem);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -28,13 +24,8 @@
|
|||
}
|
||||
|
||||
.legend-title {
|
||||
padding: 0 0.75rem;
|
||||
@include nb-ltr(padding-left, 0.75rem);
|
||||
@include nb-rtl(padding-right, 0.75rem);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
.legend {
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -66,8 +66,7 @@ export class StatsAreaChartComponent implements AfterViewInit, OnDestroy {
|
|||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: trafficTheme.colorBlack,
|
||||
opacity: 0.06,
|
||||
color: trafficTheme.yAxisSplitLine,
|
||||
width: '1',
|
||||
},
|
||||
},
|
||||
|
|
@ -84,7 +83,7 @@ export class StatsAreaChartComponent implements AfterViewInit, OnDestroy {
|
|||
position: 'top',
|
||||
backgroundColor: trafficTheme.tooltipBg,
|
||||
borderColor: trafficTheme.tooltipBorderColor,
|
||||
borderWidth: 3,
|
||||
borderWidth: 1,
|
||||
formatter: '$ {c0}',
|
||||
extraCssText: trafficTheme.tooltipExtraCss,
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,25 +1,19 @@
|
|||
<nb-card-header>
|
||||
<div class="header-container">
|
||||
<div class="icon">
|
||||
<i class="ion-social-usd"></i>
|
||||
</div>
|
||||
<span class="title">Profit</span>
|
||||
</div>
|
||||
<i class="ion-social-usd"></i>
|
||||
<span class="title">Profit</span>
|
||||
</nb-card-header>
|
||||
<nb-card-body class="p-0">
|
||||
<nb-card-body>
|
||||
<div class="info">
|
||||
<div class="period">
|
||||
<span class="time-interval">Jun 1 - Jun 30</span>
|
||||
<div class="value">
|
||||
<span class="currency">$</span>
|
||||
300
|
||||
<div class="caption">Jun 1 - Jun 30</div>
|
||||
<div class="label">
|
||||
<span class="currency">$</span>300
|
||||
</div>
|
||||
</div>
|
||||
<div class="period latest">
|
||||
<span class="time-interval">Jul 1 - Jul 31</span>
|
||||
<div class="value">
|
||||
<span class="currency">$</span>
|
||||
860
|
||||
<div class="caption">Jul 1 - Jul 31</div>
|
||||
<div class="label">
|
||||
<span class="currency">$</span>860
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,80 +5,47 @@
|
|||
flex-direction: column;
|
||||
flex: 1;
|
||||
|
||||
/deep/ nb-card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.header-container {
|
||||
display: flex;
|
||||
@include nb-rtl(flex-direction, row-reverse);
|
||||
}
|
||||
|
||||
.title {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
.title {
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
|
||||
/deep/ nb-card-body {
|
||||
overflow: hidden;
|
||||
|
||||
nb-card-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.info {
|
||||
padding: 0.75rem;
|
||||
padding-bottom: 0.5rem;
|
||||
display: flex;
|
||||
@include nb-rtl(flex-direction, row-reverse);
|
||||
}
|
||||
.info {
|
||||
display: flex;
|
||||
@include nb-rtl(flex-direction, row-reverse);
|
||||
justify-content: space-between;
|
||||
padding: 0.75rem 0.75rem 0.5rem;
|
||||
}
|
||||
|
||||
.period {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
.period {
|
||||
width: 49%;
|
||||
}
|
||||
|
||||
&.latest {
|
||||
padding-left: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.time-interval {
|
||||
color: nb-theme(color-fg);
|
||||
}
|
||||
|
||||
.value {
|
||||
font-family: nb-theme(font-secondary), serif;
|
||||
font-size: 1.25rem;
|
||||
font-weight: nb-theme(font-weight-bold);
|
||||
color: nb-theme(card-fg-heading);
|
||||
|
||||
@include nb-for-theme(default) {
|
||||
color: nb-theme(color-success);
|
||||
}
|
||||
|
||||
.currency {
|
||||
color: nb-theme(color-success);
|
||||
|
||||
@include nb-for-theme(corporate) {
|
||||
color: nb-theme(color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
.currency {
|
||||
padding-right: 0.25rem;
|
||||
}
|
||||
|
||||
ngx-stats-ares-chart {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/deep/ canvas {
|
||||
border-bottom-left-radius: nb-theme(card-border-radius);
|
||||
border-bottom-right-radius: nb-theme(card-border-radius);
|
||||
}
|
||||
::ng-deep {
|
||||
.echart {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.echart {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
canvas {
|
||||
border-bottom-left-radius: nb-theme(card-border-radius);
|
||||
border-bottom-right-radius: nb-theme(card-border-radius);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,6 @@
|
|||
<nb-card-header>
|
||||
<div class="header-container">
|
||||
<div class="icon">
|
||||
<i class="ion-social-usd"></i>
|
||||
</div>
|
||||
<span class="title">Profit</span>
|
||||
</div>
|
||||
<i class="ion-social-usd"></i>
|
||||
<span class="title">Profit</span>
|
||||
</nb-card-header>
|
||||
<nb-card-body>
|
||||
<ngx-stats-bar-animation-chart [linesData]="linesData"></ngx-stats-bar-animation-chart>
|
||||
|
|
|
|||
|
|
@ -5,74 +5,26 @@
|
|||
flex-direction: column;
|
||||
flex: 1;
|
||||
|
||||
/deep/ nb-card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.header-container {
|
||||
display: flex;
|
||||
@include nb-rtl(flex-direction, row-reverse);
|
||||
}
|
||||
|
||||
.title {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
.title {
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
|
||||
/deep/ nb-card-body {
|
||||
display: flex;
|
||||
nb-card-header {
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
|
||||
nb-card-body {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.period {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
ngx-stats-bar-animation-chart {
|
||||
position: relative;
|
||||
|
||||
.time-interval {
|
||||
font-size: nb-theme(font-size-sm);
|
||||
color: nb-theme(color-fg);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-family: nb-theme(font-secondary), serif;
|
||||
font-weight: nb-theme(font-weight-bold);
|
||||
color: nb-theme(card-fg-heading);
|
||||
|
||||
.currency {
|
||||
color: nb-theme(color-success);
|
||||
|
||||
@include nb-for-theme(corporate) {
|
||||
color: nb-theme(color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.start-period {
|
||||
.time-interval, .value {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.end-period {
|
||||
.time-interval, .value {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
ngx-stats-bar-animation-chart {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
|
||||
.echart {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
::ng-deep .echart {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
<nb-flip-card [showToggleButton]="false" [flipped]="flipped">
|
||||
<nb-card-front>
|
||||
<nb-card size="xsmall">
|
||||
<nb-card size="tiny">
|
||||
<ngx-stats-card-front></ngx-stats-card-front>
|
||||
<i class="nb-arrow-right" (click)="toggleView()"></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-stats-card-back></ngx-stats-card-back>
|
||||
<i class="nb-arrow-right" (click)="toggleView()"></i>
|
||||
<nb-icon icon="chevron-right-outline" pack="eva" class="flip-icon" (click)="toggleView()"></nb-icon>
|
||||
</nb-card>
|
||||
</nb-card-back>
|
||||
</nb-flip-card>
|
||||
|
|
|
|||
|
|
@ -1,25 +1,24 @@
|
|||
@import '../../../@theme/styles/themes';
|
||||
|
||||
@include nb-install-component() {
|
||||
.nb-arrow-right {
|
||||
.flip-icon {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,9 +2,9 @@
|
|||
<nb-card-body>
|
||||
<div class="progress-info" *ngFor="let item of progressInfoData">
|
||||
<div class="title">{{ item.title }}</div>
|
||||
<div class="value">{{ item.value | ngxNumberWithCommas }}</div>
|
||||
<div class="h3">{{ item.value | ngxNumberWithCommas }}</div>
|
||||
<nb-progress-bar [value]="item.activeProgress"></nb-progress-bar>
|
||||
<div class="description">
|
||||
<div class="caption description">
|
||||
<bdi>{{ item.description }}</bdi>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,8 +4,10 @@ $shadow-green: #00977e;
|
|||
|
||||
@include nb-install-component() {
|
||||
.progress-info {
|
||||
color: nb-theme(color-fg-heading);
|
||||
margin-top: 2.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
margin-top: 2rem;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
|
|
@ -13,41 +15,13 @@ $shadow-green: #00977e;
|
|||
}
|
||||
|
||||
.title {
|
||||
font-family: nb-theme(font-secondary);
|
||||
font-size: nb-theme(font-size-lg);
|
||||
font-weight: nb-theme(font-weight-bold);
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 3rem;
|
||||
font-weight: nb-theme(font-weight-light);
|
||||
margin-top: 0.5rem;
|
||||
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);
|
||||
}
|
||||
|
||||
.description {
|
||||
color: nb-theme(color-fg);
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
/deep/ nb-progress-bar {
|
||||
margin-top: 0.2rem;
|
||||
|
||||
.progress-container {
|
||||
height: 0.8rem;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.progress-value {
|
||||
height: 0.6rem;
|
||||
background: nb-theme(progress-bar-background);
|
||||
|
||||
@include nb-for-theme(cosmic) {
|
||||
box-shadow: 0 0.2rem $shadow-green;
|
||||
}
|
||||
|
||||
@include nb-for-theme(corporate) {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,26 +3,28 @@
|
|||
@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 {
|
||||
@include nb-ltr {
|
||||
border-top-right-radius: nb-theme(card-border-radius);
|
||||
border-bottom-right-radius: nb-theme(card-border-radius);
|
||||
}
|
||||
@include nb-rtl {
|
||||
border-top-left-radius: nb-theme(card-border-radius);
|
||||
border-bottom-left-radius: nb-theme(card-border-radius);
|
||||
}
|
||||
position: absolute;
|
||||
padding: 1.5rem;
|
||||
width: $slide-out-container-width;
|
||||
|
|
@ -34,32 +36,29 @@
|
|||
height: 100%;
|
||||
top: 0;
|
||||
overflow: hidden;
|
||||
transition: all 0.5s ease-out;
|
||||
transition: all 0.2s ease-out;
|
||||
}
|
||||
|
||||
.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;
|
||||
background: nb-theme(slide-out-background);
|
||||
box-shadow: nb-theme(slide-out-shadow-color);
|
||||
@include nb-rtl(box-shadow, nb-theme(slide-out-shadow-color-rtl));
|
||||
filter: blur(3px);
|
||||
opacity: 0.9;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.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));
|
||||
}
|
||||
|
||||
.slide-out-container.expanded {
|
||||
left: calc(100% - #{$slide-out-container-width});
|
||||
left: calc(100% + 1px - #{$slide-out-container-width});
|
||||
@include nb-rtl(left, auto);
|
||||
@include nb-rtl(right, calc(100% - #{$slide-out-container-width}));
|
||||
}
|
||||
|
|
@ -69,7 +68,7 @@
|
|||
position: relative;
|
||||
width: 100%;
|
||||
margin: 0 6rem;
|
||||
transition: all 0.5s ease-out;
|
||||
transition: all 0.2s ease-out;
|
||||
}
|
||||
|
||||
.expanded .content-wrapper {
|
||||
|
|
@ -84,8 +83,8 @@
|
|||
}
|
||||
|
||||
.slide-out-container.expanded {
|
||||
left: calc(100% - #{$slide-out-container-width});
|
||||
@include nb-rtl(right, calc(100% - #{$slide-out-container-width}));
|
||||
left: calc(100% + 1px - #{$slide-out-container-width});
|
||||
@include nb-rtl(right, calc(100% + 1px - #{$slide-out-container-width}));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -101,12 +100,12 @@
|
|||
}
|
||||
|
||||
.slide-out-container.collapsed {
|
||||
left: calc(100% - 3rem);
|
||||
left: calc(100% + 1px - 3rem);
|
||||
@include nb-rtl(right, calc(100% - 3rem));
|
||||
}
|
||||
|
||||
.slide-out-container.expanded {
|
||||
left: calc(100% - #{$slide-out-container-width});
|
||||
left: calc(100% + 1px - #{$slide-out-container-width});
|
||||
@include nb-rtl(right, calc(100% - #{$slide-out-container-width}));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,15 +15,17 @@
|
|||
ngx-traffic-bar-chart {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/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"
|
||||
|
|
@ -115,7 +114,7 @@ export class TrafficBarChartComponent implements AfterViewInit, OnDestroy, OnCha
|
|||
position: 'top',
|
||||
backgroundColor: trafficTheme.tooltipBg,
|
||||
borderColor: trafficTheme.tooltipBorderColor,
|
||||
borderWidth: 3,
|
||||
borderWidth: 1,
|
||||
formatter: this.formatter,
|
||||
extraCssText: trafficTheme.tooltipExtraCss,
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,16 +1,9 @@
|
|||
<div class="traffic-bar">
|
||||
<div class="period-from">{{ barData.prevDate }}</div>
|
||||
<div class="vertical-progress-bar">
|
||||
<div class="progress-line"
|
||||
[style.height.%]="barData.prevValue">
|
||||
</div>
|
||||
</div>
|
||||
<div class="vertical-progress-bar">
|
||||
<div class="progress-line"
|
||||
[style.height.%]="barData.nextValue"
|
||||
[class.success]="successDelta"
|
||||
[class.failure]="!successDelta">
|
||||
</div>
|
||||
</div>
|
||||
<div class="period-to">{{ barData.nextDate }}</div>
|
||||
<span class="value-prev caption">{{ barData.prevDate }}</span>
|
||||
<div class="progress-line-container" [style.height.%]="barData.prevValue">
|
||||
<div class="progress-line-prev"></div>
|
||||
</div>
|
||||
<div class="progress-line-container" [style.height.%]="barData.nextValue">
|
||||
<div class="progress-line-now" [class.success]="successDelta" [class.failure]="!successDelta">
|
||||
</div>
|
||||
</div>
|
||||
<span class="value-now caption">{{ barData.nextDate }}</span>
|
||||
|
|
|
|||
|
|
@ -1,72 +1,54 @@
|
|||
@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%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
height: nb-theme(list-item-line-height);
|
||||
max-width: 7rem;
|
||||
|
||||
.traffic-bar {
|
||||
display: flex;
|
||||
align-self: stretch;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
|
||||
> * {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
.value-prev,
|
||||
.value-now {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.period-from, .period-to {
|
||||
align-self: flex-end;
|
||||
font-size: 1rem;
|
||||
line-height: 0.8;
|
||||
.progress-line-container {
|
||||
flex: 1;
|
||||
margin-bottom: 0.1875rem;
|
||||
}
|
||||
|
||||
.period-from {
|
||||
position: absolute;
|
||||
right: 100%;
|
||||
@include nb-rtl(right, inherit);
|
||||
@include nb-rtl(left, 100%);
|
||||
bottom: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.vertical-progress-bar {
|
||||
.progress-line-prev,
|
||||
.progress-line-now {
|
||||
height: 100%;
|
||||
width: 0.7rem;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.progress-line {
|
||||
width: 100%;
|
||||
background-color: $traffic-bar-background-color;
|
||||
.progress-line-prev {
|
||||
background-color: nb-theme(border-basic-color-3);
|
||||
@include nb-ltr {
|
||||
margin-left: auto;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
@include nb-rtl {
|
||||
margin-left: 0.25rem;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&.success {
|
||||
background-color: text-success();
|
||||
|
||||
@include nb-for-theme(corporate) {
|
||||
background-color: text-primary();
|
||||
}
|
||||
}
|
||||
|
||||
&.failure {
|
||||
background-color: text-danger();
|
||||
}
|
||||
.progress-line-now {
|
||||
@include nb-ltr {
|
||||
margin-left: 0.25rem;
|
||||
margin-right: auto;
|
||||
}
|
||||
@include nb-rtl {
|
||||
margin-left: auto;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
@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%);
|
||||
}
|
||||
}
|
||||
&.success {
|
||||
background-color: nb-theme(color-success-default);
|
||||
}
|
||||
&.failure {
|
||||
background-color: nb-theme(color-danger-default);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,16 +1,12 @@
|
|||
<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>{{ item.date }}</span>
|
||||
<span clsas="value">{{ item.value }}</span>
|
||||
<span class="delta" [class.up]="item.delta.up" [class.down]="!item.delta.up">
|
||||
<nb-icon [icon]="item.delta.up ? 'arrow-up' : 'arrow-down'" pack="eva"></nb-icon>
|
||||
{{ item.delta.value }}%
|
||||
</span>
|
||||
<ngx-traffic-bar [barData]="item.comparison" [successDelta]="item.delta.up">
|
||||
</ngx-traffic-bar>
|
||||
</nb-list-item>
|
||||
</nb-list>
|
||||
|
|
|
|||
|
|
@ -1,152 +1,39 @@
|
|||
@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;
|
||||
}
|
||||
|
||||
ngx-traffic-bar {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.date {
|
||||
@include nb-for-theme(corporate) {
|
||||
color: nb-theme(color-fg-heading);
|
||||
&:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
|
||||
.value {
|
||||
color: nb-theme(color-fg-heading);
|
||||
.value,
|
||||
.delta {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.delta {
|
||||
display: flex;
|
||||
padding-left: 0.5rem;
|
||||
font-size: 1rem;
|
||||
align-items: center;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
right: 100%;
|
||||
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();
|
||||
|
||||
&::before {
|
||||
bottom: 5px;
|
||||
border-top: 6px solid text-danger();
|
||||
}
|
||||
color: nb-theme(color-danger-default);
|
||||
}
|
||||
|
||||
&.up {
|
||||
color: text-success();
|
||||
|
||||
&::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();
|
||||
}
|
||||
}
|
||||
color: 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,10 @@
|
|||
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-top: nb-theme(card-header-with-select-padding-top);
|
||||
padding-bottom: nb-theme(card-header-with-select-padding-bottom);
|
||||
|
||||
@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 {
|
||||
/deep/ nb-card-header {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ export class TrafficRevealCardComponent implements OnDestroy {
|
|||
|
||||
getTrafficFrontCardData(period: string) {
|
||||
this.trafficListService.getTrafficListData(period)
|
||||
.pipe(takeWhile(() => this.alive ))
|
||||
.pipe(takeWhile(() => this.alive))
|
||||
.subscribe(trafficListData => {
|
||||
this.trafficListData = trafficListData;
|
||||
});
|
||||
|
|
|
|||
|
|
@ -0,0 +1,33 @@
|
|||
<nb-card size="medium">
|
||||
|
||||
<nb-card-header>
|
||||
<span>User Activity</span>
|
||||
<nb-select [selected]="type" (selectedChange)="getUserActivity($event); type = $event">
|
||||
<nb-option *ngFor="let t of types" [value]="t">{{ t }}</nb-option>
|
||||
</nb-select>
|
||||
</nb-card-header>
|
||||
|
||||
<nb-list class="user-activity-list">
|
||||
<nb-list-item *ngFor="let item of userActivity">
|
||||
|
||||
<div class="visited-date">
|
||||
{{ item.date }}
|
||||
</div>
|
||||
|
||||
<div class="visited-pages-count">
|
||||
<div class="caption">Pages Visit</div>
|
||||
<div class="value">{{ item.pagesVisitCount }}</div>
|
||||
</div>
|
||||
|
||||
<div class="visited-percentages">
|
||||
<div class="caption">New visits, %</div>
|
||||
<div class="delta value" [class.up]="item.deltaUp" [class.down]="!item.deltaUp">
|
||||
<nb-icon [icon]="item.deltaUp ? 'arrow-up' : 'arrow-down'" pack="eva"></nb-icon>
|
||||
{{ item.newVisits }}%
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</nb-list-item>
|
||||
</nb-list>
|
||||
|
||||
</nb-card>
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
@import '../../../@theme/styles/themes';
|
||||
@import '~@nebular/theme/styles/global/typography/typography';
|
||||
|
||||
@include nb-install-component() {
|
||||
nb-card-header {
|
||||
|
|
@ -7,78 +6,31 @@
|
|||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border: none;
|
||||
padding-top: nb-theme(card-header-with-select-padding-top);
|
||||
padding-bottom: nb-theme(card-header-with-select-padding-bottom);
|
||||
}
|
||||
|
||||
nb-card-body {
|
||||
padding: 0;
|
||||
nb-list {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.user-activity-list {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.user-activity-list li {
|
||||
list-style: none;
|
||||
nb-list-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
position: relative;
|
||||
color: nb-theme(color-fg);
|
||||
padding: nb-theme(card-padding);
|
||||
border-bottom:
|
||||
nb-theme(list-item-border-width)
|
||||
nb-theme(card-header-border-type)
|
||||
nb-theme(separator);
|
||||
|
||||
&:first-child {
|
||||
border-top:
|
||||
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);
|
||||
}
|
||||
}
|
||||
justify-content: space-between;
|
||||
margin: 0 -0.25rem;
|
||||
}
|
||||
|
||||
.visited-date,
|
||||
.value,
|
||||
.title {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.visited-date {
|
||||
color: nb-theme(color-fg-heading);
|
||||
|
||||
@include nb-for-theme(cosmic) {
|
||||
color: nb-theme(color-fg);
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 1rem;
|
||||
.visited-pages-count,
|
||||
.visited-percentages {
|
||||
flex: 1 0 auto;
|
||||
margin: 0 0.25rem;
|
||||
}
|
||||
|
||||
.value {
|
||||
margin-top: 0.5rem;
|
||||
color: nb-theme(color-success);
|
||||
margin-top: 0.25rem;
|
||||
color: nb-theme(color-success-default);
|
||||
}
|
||||
|
||||
.delta {
|
||||
|
|
@ -86,82 +38,16 @@
|
|||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
right: 100%;
|
||||
margin-right: 0.7rem;
|
||||
@include nb-rtl(margin-right, 0);
|
||||
@include nb-rtl(margin-left, 0.7rem);
|
||||
border-left: 6px solid transparent;
|
||||
border-right: 6px solid transparent;
|
||||
}
|
||||
|
||||
&.down {
|
||||
color: text-danger();
|
||||
|
||||
&::before {
|
||||
border-top: 6px solid text-danger();
|
||||
}
|
||||
color: nb-theme(color-danger-default);
|
||||
}
|
||||
|
||||
&.up {
|
||||
color: text-success();
|
||||
|
||||
&::before {
|
||||
border-bottom: 6px solid text-success();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include nb-for-theme(cosmic) {
|
||||
.user-activity-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();
|
||||
}
|
||||
}
|
||||
color: nb-theme(color-success-default);
|
||||
}
|
||||
|
||||
.delta {
|
||||
&.down, &.up {
|
||||
color: nb-theme(color-fg-heading);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include nb-for-theme(corporate) {
|
||||
.user-activity-list li {
|
||||
border-color: nb-theme(tabs-separator);
|
||||
|
||||
&:first-child {
|
||||
border-color: nb-theme(tabs-separator);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&::before {
|
||||
background-color: nb-theme(color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.visited-pages-count {
|
||||
.value {
|
||||
color: nb-theme(color-fg-heading);
|
||||
}
|
||||
}
|
||||
|
||||
.delta {
|
||||
&.up {
|
||||
color: text-primary();
|
||||
|
||||
&::before {
|
||||
border-bottom-color: text-primary();
|
||||
}
|
||||
}
|
||||
nb-icon ::ng-deep svg {
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,47 +7,7 @@ import { UserActivityData, UserActive } from '../../../@core/data/user-activity'
|
|||
@Component({
|
||||
selector: 'ngx-user-activity',
|
||||
styleUrls: ['./user-activity.component.scss'],
|
||||
template: `
|
||||
<nb-card size="medium">
|
||||
<nb-card-header>
|
||||
<span>User Activity</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 t of types"
|
||||
(click)="getUserActivity(t); type = t">
|
||||
{{ t }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nb-card-header>
|
||||
<nb-card-body>
|
||||
<ul class="user-activity-list">
|
||||
<li *ngFor="let item of userActivity">
|
||||
<div class="visited-date">
|
||||
{{ item.date }}
|
||||
</div>
|
||||
<div class="visited-pages-count">
|
||||
<div class="title">Pages Visit</div>
|
||||
<div class="value">{{ item.pagesVisitCount }}</div>
|
||||
</div>
|
||||
<div class="visited-percentages">
|
||||
<div class="title">New visits, %</div>
|
||||
<div class="delta value"
|
||||
[class.up]="item.deltaUp"
|
||||
[class.down]="!item.deltaUp">
|
||||
{{ item.newVisits }}%
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
`,
|
||||
templateUrl: './user-activity.component.html',
|
||||
})
|
||||
export class ECommerceUserActivityComponent implements OnDestroy {
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
@include nb-install-component() {
|
||||
display: block;
|
||||
height: 290px;
|
||||
height: 17.5rem;
|
||||
width: 100%;
|
||||
|
||||
.echart {
|
||||
|
|
|
|||
|
|
@ -75,7 +75,7 @@ export class ECommerceVisitorsAnalyticsChartComponent implements AfterViewInit,
|
|||
position: 'top',
|
||||
backgroundColor: eTheme.tooltipBg,
|
||||
borderColor: eTheme.tooltipBorderColor,
|
||||
borderWidth: 3,
|
||||
borderWidth: 1,
|
||||
formatter: (params) => {
|
||||
return Math.round(parseInt(params[0].value, 10));
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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,14 @@
|
|||
|
||||
nb-card-header {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.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 {
|
||||
|
|
@ -46,9 +45,8 @@
|
|||
|
||||
@include media-breakpoint-down(is) {
|
||||
ngx-legend-chart {
|
||||
/deep/ .legends {
|
||||
::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 {
|
||||
/deep/ .legends {
|
||||
.visitors-statistics-legend ::ng-deep {
|
||||
.legends {
|
||||
padding: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
/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