Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2026-03-02 11:50:17 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(data): update data module, add new mock data (#1960)

Browse source
This commit is contained in:
Denis Strigo 2019-01-08 16:17:20 +03:00 • committed by GitHub
parent 773c14e74a
commit 47d232b606
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
53 changed files with 635 additions and 256 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/app/pages/dashboard/contacts/contacts.component.html
View file

@ -9,7 +9,7 @@
<nb-tab tabTitle="Recent">
<div class="contact" *ngFor="let c of recent">
<nb-user [picture]="c.user.picture" [name]="c.user.name" [title]="c.type" size="large"></nb-user>
<span class="time">{{ c.time }}</span>
<span class="time">{{ c.time | date: 'shortTime' }}</span>
</div>
</nb-tab>
</nb-tabset>

49
src/app/pages/dashboard/contacts/contacts.component.ts
View file

@ -1,59 +1,46 @@
import { Component, OnDestroy, OnInit } from '@angular/core';
import { Component, OnDestroy } from '@angular/core';
import { NbThemeService, NbMediaBreakpoint, NbMediaBreakpointsService } from '@nebular/theme';
import { takeWhile } from 'rxjs/operators';
import { forkJoin } from 'rxjs';
import { UserService } from '../../../@core/data/users.service';
import { Contacts, RecentUsers, UserService } from '../../../@core/data/users.service';
@Component({
selector: 'ngx-contacts',
styleUrls: ['./contacts.component.scss'],
templateUrl: './contacts.component.html',
})
export class ContactsComponent implements OnInit, OnDestroy {
export class ContactsComponent implements OnDestroy {
private alive = true;
contacts: any[];
recent: any[];
breakpoint: NbMediaBreakpoint;
breakpoints: any;
themeSubscription: any;
constructor(private userService: UserService,
private themeService: NbThemeService,
private breakpointService: NbMediaBreakpointsService) {
this.breakpoints = this.breakpointService.getBreakpointsMap();
this.themeSubscription = this.themeService.onMediaQueryChange()
this.themeService.onMediaQueryChange()
.pipe(takeWhile(() => this.alive))
.subscribe(([oldValue, newValue]) => {
this.breakpoint = newValue;
});
}
ngOnInit() {
this.userService.getUsers()
.subscribe((users: any) => {
this.contacts = [
{user: users.nick, type: 'mobile'},
{user: users.eva, type: 'home'},
{user: users.jack, type: 'mobile'},
{user: users.lee, type: 'mobile'},
{user: users.alan, type: 'home'},
{user: users.kate, type: 'work'},
];
this.recent = [
{user: users.alan, type: 'home', time: '9:12 pm'},
{user: users.eva, type: 'home', time: '7:45 pm'},
{user: users.nick, type: 'mobile', time: '5:29 pm'},
{user: users.lee, type: 'mobile', time: '11:24 am'},
{user: users.jack, type: 'mobile', time: '10:45 am'},
{user: users.kate, type: 'work', time: '9:42 am'},
{user: users.kate, type: 'work', time: '9:31 am'},
{user: users.jack, type: 'mobile', time: '8:01 am'},
];
forkJoin(
this.userService.getContacts(),
this.userService.getRecentUsers(),
)
.pipe(takeWhile(() => this.alive))
.subscribe(([contacts, recent]: [Contacts[], RecentUsers[]]) => {
this.contacts = contacts;
this.recent = recent;
});
}
ngOnDestroy() {
this.themeSubscription.unsubscribe();
this.alive = false;
}
}

2
src/app/pages/dashboard/dashboard.component.html
View file

@ -27,7 +27,7 @@
</div>
<div class="col-xxxl-3 col-xxl-4 col-lg-5 col-md-6">
<ngx-solar [chartValue]="72"></ngx-solar>
<ngx-solar [chartValue]="solarValue"></ngx-solar>
<ngx-kitten></ngx-kitten>
</div>

11
src/app/pages/dashboard/dashboard.component.ts
View file

@ -1,6 +1,7 @@
import {Component, OnDestroy} from '@angular/core';
import { NbThemeService } from '@nebular/theme';
import { takeWhile } from 'rxjs/operators' ;
import { SolarService } from '../../@core/data/solar.service';
interface CardSettings {
title: string;
@ -17,6 +18,7 @@ export class DashboardComponent implements OnDestroy {
private alive = true;
solarValue: number;
lightCard: CardSettings = {
title: 'Light',
iconClass: 'nb-lightbulb',
@ -74,12 +76,19 @@ export class DashboardComponent implements OnDestroy {
],
};
constructor(private themeService: NbThemeService) {
constructor(private themeService: NbThemeService,
private solarService: SolarService) {
this.themeService.getJsTheme()
.pipe(takeWhile(() => this.alive))
.subscribe(theme => {
this.statusCards = this.statusCardsByThemes[theme.name];
});
this.solarService.getSolarData()
.pipe(takeWhile(() => this.alive))
.subscribe((data) => {
this.solarValue = data;
});
}
ngOnDestroy() {

19
src/app/pages/dashboard/electricity/electricity-chart/electricity-chart.component.ts
View file

@ -1,7 +1,8 @@
import { delay, takeWhile } from 'rxjs/operators';
import { AfterViewInit, Component, OnDestroy } from '@angular/core';
import { AfterViewInit, Component, Input, OnDestroy } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
import { LayoutService } from '../../../../@core/data/layout.service';
import { LayoutService } from '../../../../@core/utils';
import { ElectricityChart } from '../../../../@core/data/electricity.service';
@Component({
selector: 'ngx-electricity-chart',
@ -18,23 +19,13 @@ export class ElectricityChartComponent implements AfterViewInit, OnDestroy {
private alive = true;
@Input() data: ElectricityChart[];
option: any;
data: Array<any>;
echartsIntance: any;
constructor(private theme: NbThemeService,
private layoutService: LayoutService) {
const points = [490, 490, 495, 500, 505, 510, 520, 530, 550, 580, 630,
720, 800, 840, 860, 870, 870, 860, 840, 800, 720, 200, 145, 130, 130,
145, 200, 570, 635, 660, 670, 670, 660, 630, 580, 460, 380, 350, 340,
340, 340, 340, 340, 340, 340, 340, 340];
this.data = points.map((p, index) => ({
label: (index % 5 === 3) ? `${Math.round(index / 5)}` : '',
value: p,
}));
this.layoutService.onChangeLayoutSize()
.pipe(
takeWhile(() => this.alive),

4
src/app/pages/dashboard/electricity/electricity.component.html
View file

@ -6,7 +6,7 @@
</div>
<nb-tabset fullWidth>
<nb-tab *ngFor="let year of data" [tabTitle]="year.title" [active]="year.active">
<nb-tab *ngFor="let year of listData" [tabTitle]="year.title" [active]="year.active">
<div class="stats-month" *ngFor="let month of year.months">
<div>
<span class="month">{{ month.month }}</span>
@ -52,6 +52,6 @@
</ul>
</div>
</div>
<ngx-electricity-chart></ngx-electricity-chart>
<ngx-electricity-chart [data]="chartData"></ngx-electricity-chart>
</div>
</nb-card>

32
src/app/pages/dashboard/electricity/electricity.component.ts
View file

@ -1,7 +1,9 @@
import { Component, OnDestroy } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
import { ElectricityService } from '../../../@core/data/electricity.service';
import { Electricity, ElectricityChart, ElectricityService } from '../../../@core/data/electricity.service';
import { takeWhile } from 'rxjs/operators';
import { forkJoin } from 'rxjs';
@Component({
selector: 'ngx-electricity',
@ -10,7 +12,10 @@ import { ElectricityService } from '../../../@core/data/electricity.service';
})
export class ElectricityComponent implements OnDestroy {
data: Array<any>;
private alive = true;
listData: Electricity[];
chartData: ElectricityChart[];
type = 'week';
types = ['week', 'month', 'year'];
@ -18,15 +23,26 @@ export class ElectricityComponent implements OnDestroy {
currentTheme: string;
themeSubscription: any;
constructor(private eService: ElectricityService, private themeService: NbThemeService) {
this.data = this.eService.getData();
this.themeSubscription = this.themeService.getJsTheme().subscribe(theme => {
this.currentTheme = theme.name;
constructor(private electricityService: ElectricityService,
private themeService: NbThemeService) {
this.themeService.getJsTheme()
.pipe(takeWhile(() => this.alive))
.subscribe(theme => {
this.currentTheme = theme.name;
});
forkJoin(
this.electricityService.getListData(),
this.electricityService.getChartData(),
)
.pipe(takeWhile(() => this.alive))
.subscribe(([listData, chartData]) => {
this.listData = listData;
this.chartData = chartData;
});
}
ngOnDestroy() {
this.themeSubscription.unsubscribe();
this.alive = false;
}
}

2
src/app/pages/dashboard/rooms/player/player.component.ts
View file

@ -1,5 +1,5 @@
import { Component, HostBinding, Input, OnDestroy } from '@angular/core';
import { PlayerService, Track } from '../../../../@core/data/player.service';
import { PlayerService, Track } from '../../../../@core/utils/player.service';
@Component({
selector: 'ngx-player',

43
src/app/pages/dashboard/security-cameras/security-cameras.component.ts
View file

@ -1,38 +1,35 @@
import { Component } from '@angular/core';
import { Component, OnDestroy } from '@angular/core';
import { Camera, SecurityCamerasService } from '../../../@core/data/security-cameras.service';
import { takeWhile } from 'rxjs/operators';
@Component({
selector: 'ngx-security-cameras',
styleUrls: ['./security-cameras.component.scss'],
templateUrl: './security-cameras.component.html',
})
export class SecurityCamerasComponent {
export class SecurityCamerasComponent implements OnDestroy {
cameras: any[] = [{
title: 'Camera #1',
source: 'assets/images/camera1.jpg',
}, {
title: 'Camera #2',
source: 'assets/images/camera2.jpg',
}, {
title: 'Camera #3',
source: 'assets/images/camera3.jpg',
}, {
title: 'Camera #4',
source: 'assets/images/camera4.jpg',
}];
selectedCamera: any = this.cameras[0];
userMenu = [{
title: 'Profile',
}, {
title: 'Log out',
}];
private alive = true;
cameras: Camera[];
selectedCamera: Camera;
isSingleView = false;
constructor(private securityCamerasService: SecurityCamerasService) {
this.securityCamerasService.getCamerasData()
.pipe(takeWhile(() => this.alive))
.subscribe((cameras: Camera[]) => {
this.cameras = cameras;
this.selectedCamera = this.cameras[0];
});
}
selectCamera(camera: any) {
this.selectedCamera = camera;
this.isSingleView = true;
}
ngOnDestroy() {
this.alive = false;
}
}

1
src/app/pages/dashboard/solar/solar.component.ts
View file

@ -28,6 +28,7 @@ export class SolarComponent implements AfterViewInit, OnDestroy {
@Input('chartValue')
set chartValue(value: number) {
this.value = value;
if (this.option.series) {
this.option.series[0].data[0].value = value;
this.option.series[0].data[1].value = 100 - value;

4
src/app/pages/dashboard/temperature/temperature.component.html
View file

@ -5,7 +5,7 @@
<div class="slider-container">
<ngx-temperature-dragger [(value)]="temperature" (power)="temperatureOff = !$event"
[min]="12" [max]="30" [disableArcColor]="colors.layoutBg"
[min]="temperatureData.min" [max]="temperatureData.max" [disableArcColor]="colors.layoutBg"
[fillColors]="colors.temperature">
<div class="slider-value-container" [ngClass]="{ 'off': temperatureOff }">
@ -40,7 +40,7 @@
<div class="slider-container">
<ngx-temperature-dragger [(value)]="humidity" (power)="humidityOff = !$event"
[min]="0" [max]="100" [disableArcColor]="colors.layoutBg"
[min]="humidityData.min" [max]="humidityData.max" [disableArcColor]="colors.layoutBg"
[fillColors]="colors.temperature">
<div class="slider-value-container" [ngClass]="{ 'off': humidityOff }">

32
src/app/pages/dashboard/temperature/temperature.component.ts
View file

@ -1,5 +1,8 @@
import { Component, OnDestroy } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
import { Temperature, TemperatureHumidityService } from '../../../@core/data/temperature-humidity.service';
import { takeWhile } from 'rxjs/operators';
import { forkJoin } from 'rxjs';
@Component({
selector: 'ngx-temperature',
@ -8,24 +11,43 @@ import { NbThemeService } from '@nebular/theme';
})
export class TemperatureComponent implements OnDestroy {
temperature = 24;
private alive = true;
temperatureData: Temperature;
temperature: number;
temperatureOff = false;
temperatureMode = 'cool';
humidity = 87;
humidityData: Temperature;
humidity: number;
humidityOff = false;
humidityMode = 'heat';
colors: any;
themeSubscription: any;
constructor(private theme: NbThemeService) {
this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
constructor(private theme: NbThemeService,
private temperatureHumidityService: TemperatureHumidityService) {
this.theme.getJsTheme()
.pipe(takeWhile(() => this.alive))
.subscribe(config => {
this.colors = config.variables;
});
forkJoin(
this.temperatureHumidityService.getTemperatureData(),
this.temperatureHumidityService.getHumidityData(),
)
.subscribe(([temperatureData, humidityData]: [Temperature, Temperature]) => {
this.temperatureData = temperatureData;
this.temperature = this.temperatureData.value;
this.humidityData = humidityData;
this.humidity = this.humidityData.value;
});
}
ngOnDestroy() {
this.themeSubscription.unsubscribe();
this.alive = false;
}
}

14
src/app/pages/dashboard/traffic/traffic-chart.component.ts
View file

@ -1,9 +1,7 @@
import { delay, takeWhile } from 'rxjs/operators';
import { AfterViewInit, Component, OnDestroy } from '@angular/core';
import { AfterViewInit, Component, Input, OnDestroy } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
import { LayoutService } from '../../../@core/data/layout.service';
const points = [300, 520, 435, 530, 730, 620, 660, 860];
import { LayoutService } from '../../../@core/utils';
@Component({
selector: 'ngx-traffic-chart',
@ -20,6 +18,8 @@ export class TrafficChartComponent implements AfterViewInit, OnDestroy {
private alive = true;
@Input() points: number[];
type = 'month';
types = ['week', 'month', 'year'];
option: any = {};
@ -53,7 +53,7 @@ export class TrafficChartComponent implements AfterViewInit, OnDestroy {
xAxis: {
type: 'category',
boundaryGap: false,
data: points,
data: this.points,
},
yAxis: {
boundaryGap: [0, '5%'],
@ -114,7 +114,7 @@ export class TrafficChartComponent implements AfterViewInit, OnDestroy {
color: trafficTheme.shadowLineDarkBg,
},
},
data: points.map(p => p - 15),
data: this.points.map(p => p - 15),
},
{
type: 'line',
@ -153,7 +153,7 @@ export class TrafficChartComponent implements AfterViewInit, OnDestroy {
opacity: 1,
},
},
data: points,
data: this.points,
},
],
});

24
src/app/pages/dashboard/traffic/traffic.component.ts
View file

@ -1,5 +1,7 @@
import { Component, OnDestroy } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
import { takeWhile } from 'rxjs/operators';
import { TrafficChartService } from '../../../@core/data/traffic-chart.service';
@Component({
selector: 'ngx-traffic',
@ -19,24 +21,36 @@ import { NbThemeService } from '@nebular/theme';
</div>
</nb-card-header>
<nb-card-body class="p-0">
<ngx-traffic-chart></ngx-traffic-chart>
<ngx-traffic-chart [points]="trafficChartPoints"></ngx-traffic-chart>
</nb-card-body>
</nb-card>
`,
})
export class TrafficComponent implements OnDestroy {
private alive = true;
trafficChartPoints: number[];
type = 'month';
types = ['week', 'month', 'year'];
currentTheme: string;
themeSubscription: any;
constructor(private themeService: NbThemeService) {
this.themeSubscription = this.themeService.getJsTheme().subscribe(theme => {
constructor(private themeService: NbThemeService,
private trafficChartService: TrafficChartService) {
this.themeService.getJsTheme()
.pipe(takeWhile(() => this.alive))
.subscribe(theme => {
this.currentTheme = theme.name;
});
this.trafficChartService.getTrafficChartData()
.pipe(takeWhile(() => this.alive))
.subscribe((data) => {
this.trafficChartPoints = data;
});
}
ngOnDestroy() {
this.themeSubscription.unsubscribe();
this.alive = false;
}
}

2
src/app/pages/e-commerce/charts-panel/charts/orders-chart.component.ts
View file

@ -3,7 +3,7 @@ import { NbThemeService } from '@nebular/theme';
import { delay, takeWhile } from 'rxjs/operators';
import { OrdersChart } from '../../../../@core/data/orders-chart.service';
import { LayoutService } from '../../../../@core/data/layout.service';
import { LayoutService } from '../../../../@core/utils/layout.service';
@Component({
selector: 'ngx-orders-chart',

2
src/app/pages/e-commerce/charts-panel/charts/profit-chart.component.ts
View file

@ -3,7 +3,7 @@ import { NbThemeService } from '@nebular/theme';
import { takeWhile } from 'rxjs/operators';
import { ProfitChart } from '../../../../@core/data/profit-chart.service';
import { LayoutService } from '../../../../@core/data/layout.service';
import { LayoutService } from '../../../../@core/utils/layout.service';
@Component({
selector: 'ngx-profit-chart',

2
src/app/pages/e-commerce/country-orders/chart/country-orders-chart.component.ts
View file

@ -1,7 +1,7 @@
import { AfterViewInit, Component, Input, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
import { takeWhile } from 'rxjs/operators';
import { LayoutService } from '../../../../@core/data/layout.service';
import { LayoutService } from '../../../../@core/utils/layout.service';
@Component({

28
src/app/pages/e-commerce/country-orders/country-orders.component.ts
View file

@ -1,6 +1,7 @@
import { Component, OnDestroy } from '@angular/core';
import { NbMediaBreakpoint, NbMediaBreakpointsService, NbThemeService } from '@nebular/theme';
import { takeWhile } from 'rxjs/operators';
import { CountryOrderService } from '../../../@core/data/country-order.service';
@Component({
selector: 'ngx-country-orders',
@ -25,33 +26,36 @@ export class CountryOrdersComponent implements OnDestroy {
private alive = true;
private getRandomData(nPoints: number): number[] {
return Array.from(Array(nPoints)).map(() => {
return Math.round(Math.random() * 20);
});
}
countryName = '';
countryData = [];
countriesCategories = ['Sofas', 'Furniture', 'Lighting', 'Tables', 'Textiles'];
countryData: number[] = [];
countriesCategories: string[];
breakpoint: NbMediaBreakpoint = { name: '', width: 0 };
breakpoints: any;
constructor(private themeService: NbThemeService,
private breakpointService: NbMediaBreakpointsService) {
private breakpointService: NbMediaBreakpointsService,
private countryOrderService: CountryOrderService) {
this.breakpoints = this.breakpointService.getBreakpointsMap();
this.themeService.onMediaQueryChange()
.pipe(takeWhile(() => this.alive))
.subscribe(([oldValue, newValue]) => {
this.breakpoint = newValue;
});
this.countryOrderService.getCountriesCategories()
.pipe(takeWhile(() => this.alive))
.subscribe((countriesCategories) => {
this.countriesCategories = countriesCategories;
});
}
selectCountryById(countryName: string) {
const nPoint = this.countriesCategories.length;
this.countryName = countryName;
this.countryData = this.getRandomData(nPoint);
this.countryOrderService.getCountriesCategoriesData()
.pipe(takeWhile(() => this.alive))
.subscribe((countryData) => {
this.countryData = countryData;
});
}
ngOnDestroy() {

2
src/app/pages/e-commerce/earning-card/front-side/earning-live-update-chart.component.ts
View file

@ -1,7 +1,7 @@
import { delay, takeWhile } from 'rxjs/operators';
import { AfterViewInit, Component, Input, OnChanges, OnDestroy } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
import { LayoutService } from '../../../../@core/data/layout.service';
import { LayoutService } from '../../../../@core/utils/layout.service';
@Component({
selector: 'ngx-earning-live-update-chart',

14
src/app/pages/e-commerce/profit-card/back-side/stats-area-chart.component.ts
View file

@ -1,9 +1,7 @@
import { delay, takeWhile } from 'rxjs/operators';
import { AfterViewInit, Component, OnDestroy } from '@angular/core';
import { AfterViewInit, Component, Input, OnDestroy } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
import { LayoutService } from '../../../../@core/data/layout.service';
const points = [300, 520, 435, 530, 730, 620, 660, 860];
import { LayoutService } from '../../../../@core/utils';
@Component({
selector: 'ngx-stats-ares-chart',
@ -19,6 +17,8 @@ export class StatsAreaChartComponent implements AfterViewInit, OnDestroy {
private alive = true;
@Input() points: number[];
echartsIntance: any;
option: any = {};
@ -50,7 +50,7 @@ export class StatsAreaChartComponent implements AfterViewInit, OnDestroy {
xAxis: {
type: 'category',
boundaryGap: false,
data: points,
data: this.points,
},
yAxis: {
boundaryGap: [0, '5%'],
@ -111,7 +111,7 @@ export class StatsAreaChartComponent implements AfterViewInit, OnDestroy {
color: trafficTheme.shadowLineDarkBg,
},
},
data: points.map(p => p - 15),
data: this.points.map(p => p - 15),
},
{
type: 'line',
@ -150,7 +150,7 @@ export class StatsAreaChartComponent implements AfterViewInit, OnDestroy {
opacity: 1,
},
},
data: points,
data: this.points,
},
],
});

2
src/app/pages/e-commerce/profit-card/back-side/stats-card-back.component.html
View file

@ -23,5 +23,5 @@
</div>
</div>
</div>
<ngx-stats-ares-chart></ngx-stats-ares-chart>
<ngx-stats-ares-chart [points]="chartData"></ngx-stats-ares-chart>
</nb-card-body>

22
src/app/pages/e-commerce/profit-card/back-side/stats-card-back.component.ts
View file

@ -1,9 +1,27 @@
import { Component } from '@angular/core';
import { Component, OnDestroy } from '@angular/core';
import { StatsBarService } from '../../../../@core/data/stats-bar.service';
import { takeWhile } from 'rxjs/operators';
@Component({
selector: 'ngx-stats-card-back',
styleUrls: ['./stats-card-back.component.scss'],
templateUrl: './stats-card-back.component.html',
})
export class StatsCardBackComponent {
export class StatsCardBackComponent implements OnDestroy {
private alive = true;
chartData: number[];
constructor(private statsBarData: StatsBarService) {
this.statsBarData.getStatsBarData()
.pipe(takeWhile(() => this.alive))
.subscribe((data) => {
this.chartData = data;
});
}
ngOnDestroy() {
this.alive = false;
}
}

2
src/app/pages/e-commerce/profit-card/front-side/stats-bar-animation-chart.component.ts
View file

@ -1,7 +1,7 @@
import { AfterViewInit, Component, Input, OnDestroy } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
import { takeWhile } from 'rxjs/operators';
import { LayoutService } from '../../../../@core/data/layout.service';
import { LayoutService } from '../../../../@core/utils/layout.service';
@Component({
selector: 'ngx-stats-bar-animation-chart',

42
src/app/pages/e-commerce/progress-section/progress-section.component.ts
View file

@ -1,29 +1,27 @@
import {Component} from '@angular/core';
import { Component, OnDestroy } from '@angular/core';
import { ProgressInfo, StatsProgressBarService } from '../../../@core/data/stats-progress-bar.service';
import { takeWhile } from 'rxjs/operators';
@Component({
selector: 'ngx-progress-section',
styleUrls: ['./progress-section.component.scss'],
templateUrl: './progress-section.component.html',
})
export class ECommerceProgressSectionComponent {
progressInfoData = [
{
title: 'Today’s Profit',
value: 572900,
activeProgress: 70,
description: 'Better than last week (70%)',
},
{
title: 'New Orders',
value: 6378,
activeProgress: 30,
description: 'Better than last week (30%)',
},
{
title: 'New Comments',
value: 200,
activeProgress: 55,
description: 'Better than last week (55%)',
},
];
export class ECommerceProgressSectionComponent implements OnDestroy {
private alive = true;
progressInfoData: ProgressInfo[];
constructor(private statsProgressBarService: StatsProgressBarService) {
this.statsProgressBarService.getProgressInfoData()
.pipe(takeWhile(() => this.alive))
.subscribe((data) => {
this.progressInfoData = data;
});
}
ngOnDestroy() {
this.alive = true;
}
}

2
src/app/pages/e-commerce/traffic-reveal-card/back-side/traffic-bar-chart.component.ts
View file

@ -1,7 +1,7 @@
import { AfterViewInit, Component, Input, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
import { takeWhile } from 'rxjs/operators';
import { LayoutService } from '../../../../@core/data/layout.service';
import { LayoutService } from '../../../../@core/utils/layout.service';
declare const echarts: any;

6
src/app/pages/e-commerce/traffic-reveal-card/traffic-reveal-card.component.html
View file

@ -1,16 +1,16 @@
<nb-reveal-card [showToggleButton]="false" [revealed]="revealed">
<nb-card-front>
<nb-card size="small">
<ngx-traffic-cards-header (periodChange)="setPeriod($event)"></ngx-traffic-cards-header>
<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-card>
</nb-card-front>
<nb-card-back>
<nb-card size="small">
<ngx-traffic-cards-header (periodChange)="setPeriod($event)"></ngx-traffic-cards-header>
<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-card>>
</nb-card>
</nb-card-back>
</nb-reveal-card>

4
src/app/pages/e-commerce/traffic-reveal-card/traffic-reveal-card.component.ts
View file

@ -27,7 +27,9 @@ export class TrafficRevealCardComponent implements OnDestroy {
this.revealed = !this.revealed;
}
setPeriod(value: string): void {
setPeriodAngGetData(value: string): void {
this.period = value;
this.getTrafficFrontCardData(value);
this.getTrafficBackCardData(value);
}

7
src/app/pages/e-commerce/user-activity/user-activity.component.ts
View file

@ -1,4 +1,4 @@
import { Component, OnDestroy, OnInit } from '@angular/core';
import { Component, OnDestroy } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
import { takeWhile } from 'rxjs/operators';
@ -49,7 +49,7 @@ import { UserActivityService, UserActive } from '../../../@core/data/user-activi
</nb-card>
`,
})
export class ECommerceUserActivityComponent implements OnDestroy, OnInit {
export class ECommerceUserActivityComponent implements OnDestroy {
private alive = true;
@ -65,14 +65,13 @@ export class ECommerceUserActivityComponent implements OnDestroy, OnInit {
.subscribe(theme => {
this.currentTheme = theme.name;
});
}
ngOnInit() {
this.getUserActivity(this.type);
}
getUserActivity(period: string) {
this.userActivityService.getUserActivityData(period)
.pipe(takeWhile(() => this.alive))
.subscribe(userActivityData => {
this.userActivity = userActivityData;
});

52
src/app/pages/e-commerce/visitors-analytics/visitors-analytics-chart/visitors-analytics-chart.component.ts
View file

@ -1,7 +1,8 @@
import { delay, takeWhile } from 'rxjs/operators';
import { AfterViewInit, Component, OnDestroy } from '@angular/core';
import { AfterViewInit, Component, Input, OnDestroy } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
import { LayoutService } from '../../../../@core/data/layout.service';
import { LayoutService } from '../../../../@core/utils';
import { OutlineData } from '../../../../@core/data/visitors-analytics.service';
@Component({
selector: 'ngx-visitors-analytics-chart',
@ -17,49 +18,18 @@ import { LayoutService } from '../../../../@core/data/layout.service';
export class ECommerceVisitorsAnalyticsChartComponent implements AfterViewInit, OnDestroy {
private alive = true;
private innerLinePoints: number[] = [
94, 188, 225, 244, 253, 254, 249, 235, 208,
173, 141, 118, 105, 97, 94, 96, 104, 121, 147,
183, 224, 265, 302, 333, 358, 375, 388, 395,
400, 400, 397, 390, 377, 360, 338, 310, 278,
241, 204, 166, 130, 98, 71, 49, 32, 20, 13, 9,
];
private outerLinePoints: number[] = [
85, 71, 59, 50, 45, 42, 41, 44 , 58, 88,
136 , 199, 267, 326, 367, 391, 400, 397,
376, 319, 200, 104, 60, 41, 36, 37, 44,
55, 74, 100 , 131, 159, 180, 193, 199, 200,
195, 184, 164, 135, 103, 73, 50, 33, 22, 15, 11,
];
private months: string[] = [
'Jan', 'Feb', 'Mar',
'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep',
'Oct', 'Nov', 'Dec',
];
@Input() chartData: {
innerLine: number[];
outerLine: OutlineData[];
};
option: any;
data: Array<any>;
themeSubscription: any;
echartsIntance: any;
constructor(private theme: NbThemeService,
private layoutService: LayoutService) {
const outerLinePointsLength = this.outerLinePoints.length;
const monthsLength = this.months.length;
this.data = this.outerLinePoints.map((p, index) => {
const monthIndex = Math.round(index / 4);
const label = (index % Math.round(outerLinePointsLength / monthsLength) === 0)
? this.months[monthIndex]
: '';
return {
label,
value: p,
};
});
this.layoutService.onChangeLayoutSize()
.pipe(
takeWhile(() => this.alive),
@ -115,7 +85,7 @@ export class ECommerceVisitorsAnalyticsChartComponent implements AfterViewInit,
type: 'category',
boundaryGap: false,
offset: 25,
data: this.data.map(i => i.label),
data: this.chartData.outerLine.map(i => i.label),
axisTick: {
show: false,
},
@ -204,7 +174,7 @@ export class ECommerceVisitorsAnalyticsChartComponent implements AfterViewInit,
}]),
},
},
data: this.data.map(i => i.value),
data: this.chartData.outerLine.map(i => i.value),
};
}
@ -244,7 +214,7 @@ export class ECommerceVisitorsAnalyticsChartComponent implements AfterViewInit,
opacity: 1,
},
},
data: this.innerLinePoints,
data: this.chartData.innerLine,
};
}

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

@ -8,11 +8,11 @@
<div class="chart-header">
<ngx-legend-chart [legendItems]="chartLegend"></ngx-legend-chart>
</div>
<ngx-visitors-analytics-chart></ngx-visitors-analytics-chart>
<ngx-visitors-analytics-chart [chartData]="visitorsAnalyticsData"></ngx-visitors-analytics-chart>
</div>
</nb-card-body>
<ngx-slide-out [showVisitorsStatistics]="true">
<ngx-visitors-statistics></ngx-visitors-statistics>
<ngx-visitors-statistics [value]="pieChartValue"></ngx-visitors-statistics>
</ngx-slide-out>
</nb-card>

22
src/app/pages/e-commerce/visitors-analytics/visitors-analytics.component.ts
View file

@ -1,6 +1,8 @@
import { Component, OnDestroy } from '@angular/core';
import { takeWhile } from 'rxjs/operators';
import { NbThemeService } from '@nebular/theme';
import { OutlineData, VisitorsAnalyticsService } from '../../../@core/data/visitors-analytics.service';
import { forkJoin } from 'rxjs';
@Component({
@ -11,14 +13,32 @@ import { NbThemeService } from '@nebular/theme';
export class ECommerceVisitorsAnalyticsComponent implements OnDestroy {
private alive = true;
pieChartValue: number;
chartLegend: {iconColor: string; title: string}[];
visitorsAnalyticsData: { innerLine: number[]; outerLine: OutlineData[]; };
constructor(private themeService: NbThemeService) {
constructor(private themeService: NbThemeService,
private visitorsAnalyticsChartService: VisitorsAnalyticsService) {
this.themeService.getJsTheme()
.pipe(takeWhile(() => this.alive))
.subscribe(theme => {
this.setLegendItems(theme.variables.visitorsLegend);
});
forkJoin(
this.visitorsAnalyticsChartService.getInnerLineChartData(),
this.visitorsAnalyticsChartService.getOutlineLineChartData(),
this.visitorsAnalyticsChartService.getPieChartData(),
)
.pipe(takeWhile(() => this.alive))
.subscribe(([innerLine, outerLine, pieChartValue]: [number[], OutlineData[], number]) => {
this.visitorsAnalyticsData = {
innerLine: innerLine,
outerLine: outerLine,
};
this.pieChartValue = pieChartValue;
});
}
setLegendItems(visitorsLegend): void {

9
src/app/pages/e-commerce/visitors-analytics/visitors-statistics/visitors-statistics.component.ts
View file

@ -1,7 +1,7 @@
import { AfterViewInit, Component, OnDestroy } from '@angular/core';
import { AfterViewInit, Component, Input, OnDestroy } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
import { delay, takeWhile } from 'rxjs/operators';
import { LayoutService } from '../../../../@core/data/layout.service';
import { LayoutService } from '../../../../@core/utils/layout.service';
@Component({
@ -12,10 +12,11 @@ import { LayoutService } from '../../../../@core/data/layout.service';
export class ECommerceVisitorsStatisticsComponent implements AfterViewInit, OnDestroy {
private alive = true;
private value = 75;
@Input() value: number;
option: any = {};
chartLegend: {iconColor: string; title: string}[];
chartLegend: { iconColor: string; title: string }[];
echartsIntance: any;
constructor(private theme: NbThemeService,