From 47d232b606a09e4c707b38d4c61ca3f5fdab8391 Mon Sep 17 00:00:00 2001 From: Denis Strigo Date: Tue, 8 Jan 2019 16:17:20 +0300 Subject: [PATCH] feat(data): update data module, add new mock data (#1960) --- src/app/@core/core.module.ts | 10 +++- src/app/@core/data/country-order.service.ts | 28 +++++++++ src/app/@core/data/data.module.ts | 22 +++++-- src/app/@core/data/electricity.service.ts | 52 ++++++++++++++-- .../profit-bar-animation-chart.service.ts | 2 +- .../@core/data/security-cameras.service.ts | 34 +++++++++++ src/app/@core/data/solar.service.ts | 11 ++++ src/app/@core/data/stats-bar.service.ts | 15 +++++ .../@core/data/stats-progress-bar.service.ts | 37 ++++++++++++ .../data/temperature-humidity.service.ts | 32 ++++++++++ src/app/@core/data/traffic-chart.service.ts | 16 +++++ src/app/@core/data/user-activity.service.ts | 37 +++++------- src/app/@core/data/users.service.ts | 53 ++++++++++++---- .../@core/data/visitors-analytics.service.ts | 60 +++++++++++++++++++ src/app/@core/utils/index.ts | 11 ++++ .../@core/{data => utils}/layout.service.ts | 0 .../@core/{data => utils}/player.service.ts | 0 .../@core/{data => utils}/state.service.ts | 0 .../components/header/header.component.ts | 4 +- .../theme-settings.component.ts | 2 +- .../@theme/layouts/sample/sample.layout.ts | 2 +- .../contacts/contacts.component.html | 2 +- .../dashboard/contacts/contacts.component.ts | 49 ++++++--------- .../pages/dashboard/dashboard.component.html | 2 +- .../pages/dashboard/dashboard.component.ts | 11 +++- .../electricity-chart.component.ts | 19 ++---- .../electricity/electricity.component.html | 4 +- .../electricity/electricity.component.ts | 32 +++++++--- .../rooms/player/player.component.ts | 2 +- .../security-cameras.component.ts | 43 +++++++------ .../pages/dashboard/solar/solar.component.ts | 1 + .../temperature/temperature.component.html | 4 +- .../temperature/temperature.component.ts | 32 ++++++++-- .../traffic/traffic-chart.component.ts | 14 ++--- .../dashboard/traffic/traffic.component.ts | 24 ++++++-- .../charts/orders-chart.component.ts | 2 +- .../charts/profit-chart.component.ts | 2 +- .../chart/country-orders-chart.component.ts | 2 +- .../country-orders.component.ts | 28 +++++---- .../earning-live-update-chart.component.ts | 2 +- .../back-side/stats-area-chart.component.ts | 14 ++--- .../back-side/stats-card-back.component.html | 2 +- .../back-side/stats-card-back.component.ts | 22 ++++++- .../stats-bar-animation-chart.component.ts | 2 +- .../progress-section.component.ts | 42 +++++++------ .../back-side/traffic-bar-chart.component.ts | 2 +- .../traffic-reveal-card.component.html | 6 +- .../traffic-reveal-card.component.ts | 4 +- .../user-activity/user-activity.component.ts | 7 +-- .../visitors-analytics-chart.component.ts | 52 ++++------------ .../visitors-analytics.component.html | 4 +- .../visitors-analytics.component.ts | 22 ++++++- .../visitors-statistics.component.ts | 9 +-- 53 files changed, 635 insertions(+), 256 deletions(-) create mode 100644 src/app/@core/data/country-order.service.ts create mode 100644 src/app/@core/data/security-cameras.service.ts create mode 100644 src/app/@core/data/solar.service.ts create mode 100644 src/app/@core/data/stats-bar.service.ts create mode 100644 src/app/@core/data/stats-progress-bar.service.ts create mode 100644 src/app/@core/data/temperature-humidity.service.ts create mode 100644 src/app/@core/data/traffic-chart.service.ts create mode 100644 src/app/@core/data/visitors-analytics.service.ts create mode 100644 src/app/@core/utils/index.ts rename src/app/@core/{data => utils}/layout.service.ts (100%) rename src/app/@core/{data => utils}/player.service.ts (100%) rename src/app/@core/{data => utils}/state.service.ts (100%) diff --git a/src/app/@core/core.module.ts b/src/app/@core/core.module.ts index 2ff498ee06..1975956d12 100644 --- a/src/app/@core/core.module.ts +++ b/src/app/@core/core.module.ts @@ -6,7 +6,12 @@ import { of as observableOf } from 'rxjs'; import { throwIfAlreadyLoaded } from './module-import-guard'; import { DataModule } from './data/data.module'; -import { AnalyticsService } from './utils/analytics.service'; +import { + AnalyticsService, + LayoutService, + PlayerService, + StateService, +} from './utils'; const socialLinks = [ { @@ -71,6 +76,9 @@ export const NB_CORE_PROVIDERS = [ provide: NbRoleProvider, useClass: NbSimpleRoleProvider, }, AnalyticsService, + LayoutService, + PlayerService, + StateService, ]; @NgModule({ diff --git a/src/app/@core/data/country-order.service.ts b/src/app/@core/data/country-order.service.ts new file mode 100644 index 0000000000..a55b4d6a1f --- /dev/null +++ b/src/app/@core/data/country-order.service.ts @@ -0,0 +1,28 @@ +import { Injectable } from '@angular/core'; +import { of as observableOf, Observable } from 'rxjs'; + +@Injectable() +export class CountryOrderService { + + private countriesCategories = [ + 'Sofas', + 'Furniture', + 'Lighting', + 'Tables', + 'Textiles', + ]; + private countriesCategoriesLength = this.countriesCategories.length; + private generateRandomData(nPoints: number): number[] { + return Array.from(Array(nPoints)).map(() => { + return Math.round(Math.random() * 20); + }); + } + + getCountriesCategories(): Observable { + return observableOf(this.countriesCategories); + } + + getCountriesCategoriesData(): Observable { + return observableOf(this.generateRandomData(this.countriesCategoriesLength)); + } +} diff --git a/src/app/@core/data/data.module.ts b/src/app/@core/data/data.module.ts index 88eca35626..42a9454203 100644 --- a/src/app/@core/data/data.module.ts +++ b/src/app/@core/data/data.module.ts @@ -3,9 +3,7 @@ import { CommonModule } from '@angular/common'; import { UserService } from './users.service'; import { ElectricityService } from './electricity.service'; -import { StateService } from './state.service'; import { SmartTableService } from './smart-table.service'; -import { PlayerService } from './player.service'; import { UserActivityService } from './user-activity.service'; import { OrdersChartService } from './orders-chart.service'; import { ProfitChartService } from './profit-chart.service'; @@ -15,14 +13,19 @@ import { EarningService } from './earning.service'; import { OrdersProfitChartService } from './orders-profit-chart.service'; import { TrafficBarService } from './traffic-bar.service'; import { ProfitBarAnimationChartService } from './profit-bar-animation-chart.service'; -import { LayoutService } from './layout.service'; +import { TemperatureHumidityService } from './temperature-humidity.service'; +import { SolarService } from './solar.service'; +import { TrafficChartService } from './traffic-chart.service'; +import { StatsBarService } from './stats-bar.service'; +import { CountryOrderService } from './country-order.service'; +import { StatsProgressBarService } from './stats-progress-bar.service'; +import { VisitorsAnalyticsService } from './visitors-analytics.service'; +import { SecurityCamerasService } from './security-cameras.service'; const SERVICES = [ UserService, ElectricityService, - StateService, SmartTableService, - PlayerService, UserActivityService, OrdersChartService, ProfitChartService, @@ -32,7 +35,14 @@ const SERVICES = [ OrdersProfitChartService, TrafficBarService, ProfitBarAnimationChartService, - LayoutService, + TemperatureHumidityService, + SolarService, + TrafficChartService, + StatsBarService, + CountryOrderService, + StatsProgressBarService, + VisitorsAnalyticsService, + SecurityCamerasService, ]; @NgModule({ diff --git a/src/app/@core/data/electricity.service.ts b/src/app/@core/data/electricity.service.ts index 6bfcc091ee..1cd0416ab7 100644 --- a/src/app/@core/data/electricity.service.ts +++ b/src/app/@core/data/electricity.service.ts @@ -1,9 +1,29 @@ import { Injectable } from '@angular/core'; +import { of as observableOf, Observable } from 'rxjs'; + +class Month { + month: string; + delta: string; + down: boolean; + kWatts: string; + cost: string; +} + +export class Electricity { + title: string; + active?: boolean; + months: Month[]; +} + +export class ElectricityChart { + label: string; + value: number; +} @Injectable() export class ElectricityService { - private data = [ + private listData: Electricity[] = [ { title: '2015', months: [ @@ -58,11 +78,35 @@ export class ElectricityService { }, ]; + private chartPoints = [ + 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, + ]; + + chartData: ElectricityChart[]; + constructor() { + this.chartData = this.chartPoints.map((p, index) => ({ + label: (index % 5 === 3) ? `${Math.round(index / 5)}` : '', + value: p, + })); + } + + getListData(): Observable { + return observableOf(this.listData); } - // TODO: observables - getData() { - return this.data; + getChartData(): Observable { + return observableOf(this.chartData); } } diff --git a/src/app/@core/data/profit-bar-animation-chart.service.ts b/src/app/@core/data/profit-bar-animation-chart.service.ts index 36f9483d59..bc261d77f5 100644 --- a/src/app/@core/data/profit-bar-animation-chart.service.ts +++ b/src/app/@core/data/profit-bar-animation-chart.service.ts @@ -35,7 +35,7 @@ export class ProfitBarAnimationChartService { return Array.from(Array(nPoints)); } - getChartData(): Observable<{ firstLine: number[]; secondLine: number[] }> { + getChartData(): Observable<{ firstLine: number[]; secondLine: number[]; }> { return observableOf(this.data); } } diff --git a/src/app/@core/data/security-cameras.service.ts b/src/app/@core/data/security-cameras.service.ts new file mode 100644 index 0000000000..412be9d950 --- /dev/null +++ b/src/app/@core/data/security-cameras.service.ts @@ -0,0 +1,34 @@ +import { Injectable } from '@angular/core'; +import { of as observableOf, Observable } from 'rxjs'; + +export class Camera { + title: string; + source: string; +} + +@Injectable() +export class SecurityCamerasService { + + private cameras: Camera[] = [ + { + 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', + }, + ]; + + getCamerasData(): Observable { + return observableOf(this.cameras); + } +} diff --git a/src/app/@core/data/solar.service.ts b/src/app/@core/data/solar.service.ts new file mode 100644 index 0000000000..618fdf59e2 --- /dev/null +++ b/src/app/@core/data/solar.service.ts @@ -0,0 +1,11 @@ +import { Injectable } from '@angular/core'; +import { of as observableOf, Observable } from 'rxjs'; + +@Injectable() +export class SolarService { + private value = 42; + + getSolarData(): Observable { + return observableOf(this.value); + } +} diff --git a/src/app/@core/data/stats-bar.service.ts b/src/app/@core/data/stats-bar.service.ts new file mode 100644 index 0000000000..4ad49920f5 --- /dev/null +++ b/src/app/@core/data/stats-bar.service.ts @@ -0,0 +1,15 @@ +import { Injectable } from '@angular/core'; +import { of as observableOf, Observable } from 'rxjs'; + +@Injectable() +export class StatsBarService { + + private statsBarData: number[] = [ + 300, 520, 435, 530, + 730, 620, 660, 860, + ]; + + getStatsBarData(): Observable { + return observableOf(this.statsBarData); + } +} diff --git a/src/app/@core/data/stats-progress-bar.service.ts b/src/app/@core/data/stats-progress-bar.service.ts new file mode 100644 index 0000000000..4edd4d8b77 --- /dev/null +++ b/src/app/@core/data/stats-progress-bar.service.ts @@ -0,0 +1,37 @@ +import { Injectable } from '@angular/core'; +import { of as observableOf, Observable } from 'rxjs'; + +export class ProgressInfo { + title: string; + value: number; + activeProgress: number; + description: string; +} + +@Injectable() +export class StatsProgressBarService { + private progressInfoData: ProgressInfo[] = [ + { + 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%)', + }, + ]; + + getProgressInfoData(): Observable { + return observableOf(this.progressInfoData); + } +} diff --git a/src/app/@core/data/temperature-humidity.service.ts b/src/app/@core/data/temperature-humidity.service.ts new file mode 100644 index 0000000000..04631d5b17 --- /dev/null +++ b/src/app/@core/data/temperature-humidity.service.ts @@ -0,0 +1,32 @@ +import { Injectable } from '@angular/core'; +import { of as observableOf, Observable } from 'rxjs'; + +export class Temperature { + value: number; + min: number; + max: number; +} + +@Injectable() +export class TemperatureHumidityService { + + private temperatureDate: Temperature = { + value: 24, + min: 12, + max: 30, + }; + + private humidityDate: Temperature = { + value: 87, + min: 0, + max: 100, + }; + + getTemperatureData(): Observable { + return observableOf(this.temperatureDate); + } + + getHumidityData(): Observable { + return observableOf(this.humidityDate); + } +} diff --git a/src/app/@core/data/traffic-chart.service.ts b/src/app/@core/data/traffic-chart.service.ts new file mode 100644 index 0000000000..2700fb1221 --- /dev/null +++ b/src/app/@core/data/traffic-chart.service.ts @@ -0,0 +1,16 @@ +import { Injectable } from '@angular/core'; +import { of as observableOf, Observable } from 'rxjs'; + + +@Injectable() +export class TrafficChartService { + + private data: number[] = [ + 300, 520, 435, 530, + 730, 620, 660, 860, + ]; + + getTrafficChartData(): Observable { + return observableOf(this.data); + } +} diff --git a/src/app/@core/data/user-activity.service.ts b/src/app/@core/data/user-activity.service.ts index 066abe6c93..636600aa61 100644 --- a/src/app/@core/data/user-activity.service.ts +++ b/src/app/@core/data/user-activity.service.ts @@ -13,6 +13,14 @@ export class UserActive { export class UserActivityService { private getRandom = (roundTo: number) => Math.round(Math.random() * roundTo); + private generateUserActivityRandomData(date) { + return { + date, + pagesVisitCount: this.getRandom(1000), + deltaUp: this.getRandom(1) % 2 === 0, + newVisits: this.getRandom(100), + }; + } data = {}; @@ -26,38 +34,25 @@ export class UserActivityService { private getDataWeek(): UserActive[] { return this.periods.getWeeks().map((week) => { - return { - date: week, - pagesVisitCount: this.getRandom(1000), - deltaUp: this.getRandom(1) % 2 === 0, - newVisits: this.getRandom(100), - }; + return this.generateUserActivityRandomData(week); }); } private getDataMonth(): UserActive[] { - const date = new Date(); - const days = date.getDate(); - const month = this.periods.getMonths()[date.getMonth()]; + const currentDate = new Date(); + const days = currentDate.getDate(); + const month = this.periods.getMonths()[currentDate.getMonth()]; return Array.from(Array(days)).map((_, index) => { - return { - date: `${index + 1} ${month}`, - pagesVisitCount: this.getRandom(1000), - deltaUp: this.getRandom(1) % 2 === 0, - newVisits: this.getRandom(100), - }; + const date = `${index + 1} ${month}`; + + return this.generateUserActivityRandomData(date); }); } private getDataYear(): UserActive[] { return this.periods.getYears().map((year) => { - return { - date: year, - pagesVisitCount: this.getRandom(1000), - deltaUp: this.getRandom(1) % 2 === 0, - newVisits: this.getRandom(100), - }; + return this.generateUserActivityRandomData(year); }); } diff --git a/src/app/@core/data/users.service.ts b/src/app/@core/data/users.service.ts index 8a89539324..7a3d7e1b4c 100644 --- a/src/app/@core/data/users.service.ts +++ b/src/app/@core/data/users.service.ts @@ -2,12 +2,25 @@ import { of as observableOf, Observable } from 'rxjs'; import { Injectable } from '@angular/core'; +class User { + name: string; + picture: string; +} -let counter = 0; +export class Contacts { + user: User; + type: string; +} + +export class RecentUsers extends Contacts { + time: number; +} @Injectable() export class UserService { + private time: Date = new Date; + private users = { nick: { name: 'Nick Jones', picture: 'assets/images/nick.png' }, eva: { name: 'Eva Moor', picture: 'assets/images/eva.png' }, @@ -16,23 +29,39 @@ export class UserService { alan: { name: 'Alan Thompson', picture: 'assets/images/alan.png' }, kate: { name: 'Kate Martinez', picture: 'assets/images/kate.png' }, }; - - private userArray: any[]; - - constructor() { - // this.userArray = Object.values(this.users); - } + private types = { + mobile: 'mobile', + home: 'home', + work: 'work', + }; + private contacts: Contacts[] = [ + { user: this.users.nick, type: this.types.mobile }, + { user: this.users.eva, type: this.types.home }, + { user: this.users.jack, type: this.types.mobile }, + { user: this.users.lee, type: this.types.mobile }, + { user: this.users.alan, type: this.types.home }, + { user: this.users.kate, type: this.types.work }, + ]; + private recentUsers: RecentUsers[] = [ + { user: this.users.alan, type: this.types.home, time: this.time.setHours(21, 12)}, + { user: this.users.eva, type: this.types.home, time: this.time.setHours(17, 45)}, + { user: this.users.nick, type: this.types.mobile, time: this.time.setHours(5, 29)}, + { user: this.users.lee, type: this.types.mobile, time: this.time.setHours(11, 24)}, + { user: this.users.jack, type: this.types.mobile, time: this.time.setHours(10, 45)}, + { user: this.users.kate, type: this.types.work, time: this.time.setHours(9, 42)}, + { user: this.users.kate, type: this.types.work, time: this.time.setHours(9, 31)}, + { user: this.users.jack, type: this.types.mobile, time: this.time.setHours(8, 0)}, + ]; getUsers(): Observable { return observableOf(this.users); } - getUserArray(): Observable { - return observableOf(this.userArray); + getContacts(): Observable { + return observableOf(this.contacts); } - getUser(): Observable { - counter = (counter + 1) % this.userArray.length; - return observableOf(this.userArray[counter]); + getRecentUsers(): Observable { + return observableOf(this.recentUsers); } } diff --git a/src/app/@core/data/visitors-analytics.service.ts b/src/app/@core/data/visitors-analytics.service.ts new file mode 100644 index 0000000000..a44b1f5e25 --- /dev/null +++ b/src/app/@core/data/visitors-analytics.service.ts @@ -0,0 +1,60 @@ +import { Injectable } from '@angular/core'; +import { of as observableOf, Observable } from 'rxjs'; +import { PeriodsService } from './periods.service'; + +export class OutlineData { + label: string; + value: number; +} + +@Injectable() +export class VisitorsAnalyticsService { + + constructor(private periodService: PeriodsService) { + } + + private pieChartValue = 75; + 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 generateOutlineLineData(): OutlineData[] { + const months = this.periodService.getMonths(); + const outerLinePointsLength = this.outerLinePoints.length; + const monthsLength = months.length; + + return this.outerLinePoints.map((p, index) => { + const monthIndex = Math.round(index / 4); + const label = (index % Math.round(outerLinePointsLength / monthsLength) === 0) + ? months[monthIndex] + : ''; + + return { + label, + value: p, + }; + }); + } + + getInnerLineChartData(): Observable { + return observableOf(this.innerLinePoints); + } + + getOutlineLineChartData(): Observable { + return observableOf(this.generateOutlineLineData()); + } + + getPieChartData(): Observable { + return observableOf(this.pieChartValue); + } +} diff --git a/src/app/@core/utils/index.ts b/src/app/@core/utils/index.ts new file mode 100644 index 0000000000..77e971d8d1 --- /dev/null +++ b/src/app/@core/utils/index.ts @@ -0,0 +1,11 @@ +import { LayoutService } from './layout.service'; +import { AnalyticsService } from './analytics.service'; +import { PlayerService } from './player.service'; +import { StateService } from './state.service'; + +export { + LayoutService, + AnalyticsService, + PlayerService, + StateService, +}; diff --git a/src/app/@core/data/layout.service.ts b/src/app/@core/utils/layout.service.ts similarity index 100% rename from src/app/@core/data/layout.service.ts rename to src/app/@core/utils/layout.service.ts diff --git a/src/app/@core/data/player.service.ts b/src/app/@core/utils/player.service.ts similarity index 100% rename from src/app/@core/data/player.service.ts rename to src/app/@core/utils/player.service.ts diff --git a/src/app/@core/data/state.service.ts b/src/app/@core/utils/state.service.ts similarity index 100% rename from src/app/@core/data/state.service.ts rename to src/app/@core/utils/state.service.ts diff --git a/src/app/@theme/components/header/header.component.ts b/src/app/@theme/components/header/header.component.ts index 6686221b2a..03accfdef7 100644 --- a/src/app/@theme/components/header/header.component.ts +++ b/src/app/@theme/components/header/header.component.ts @@ -2,8 +2,8 @@ import { Component, Input, OnInit } from '@angular/core'; import { NbMenuService, NbSidebarService } from '@nebular/theme'; import { UserService } from '../../../@core/data/users.service'; -import { AnalyticsService } from '../../../@core/utils/analytics.service'; -import { LayoutService } from '../../../@core/data/layout.service'; +import { AnalyticsService } from '../../../@core/utils'; +import { LayoutService } from '../../../@core/utils'; @Component({ selector: 'ngx-header', diff --git a/src/app/@theme/components/theme-settings/theme-settings.component.ts b/src/app/@theme/components/theme-settings/theme-settings.component.ts index aebf0b74c2..3c6dea0228 100644 --- a/src/app/@theme/components/theme-settings/theme-settings.component.ts +++ b/src/app/@theme/components/theme-settings/theme-settings.component.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; -import { StateService } from '../../../@core/data/state.service'; +import { StateService } from '../../../@core/utils'; @Component({ selector: 'ngx-theme-settings', diff --git a/src/app/@theme/layouts/sample/sample.layout.ts b/src/app/@theme/layouts/sample/sample.layout.ts index eb4aa6d9c7..297fdec229 100644 --- a/src/app/@theme/layouts/sample/sample.layout.ts +++ b/src/app/@theme/layouts/sample/sample.layout.ts @@ -9,7 +9,7 @@ import { NbThemeService, } from '@nebular/theme'; -import { StateService } from '../../../@core/data/state.service'; +import { StateService } from '../../../@core/utils/state.service'; // TODO: move layouts into the framework @Component({ diff --git a/src/app/pages/dashboard/contacts/contacts.component.html b/src/app/pages/dashboard/contacts/contacts.component.html index fc6d55350d..2d060f9668 100644 --- a/src/app/pages/dashboard/contacts/contacts.component.html +++ b/src/app/pages/dashboard/contacts/contacts.component.html @@ -9,7 +9,7 @@
- {{ c.time }} + {{ c.time | date: 'shortTime' }}
diff --git a/src/app/pages/dashboard/contacts/contacts.component.ts b/src/app/pages/dashboard/contacts/contacts.component.ts index 148cf505d3..157063017b 100644 --- a/src/app/pages/dashboard/contacts/contacts.component.ts +++ b/src/app/pages/dashboard/contacts/contacts.component.ts @@ -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; } } diff --git a/src/app/pages/dashboard/dashboard.component.html b/src/app/pages/dashboard/dashboard.component.html index 7d68ac33d3..167035ed1a 100644 --- a/src/app/pages/dashboard/dashboard.component.html +++ b/src/app/pages/dashboard/dashboard.component.html @@ -27,7 +27,7 @@
- +
diff --git a/src/app/pages/dashboard/dashboard.component.ts b/src/app/pages/dashboard/dashboard.component.ts index 4a7e44af2d..d0817fd778 100644 --- a/src/app/pages/dashboard/dashboard.component.ts +++ b/src/app/pages/dashboard/dashboard.component.ts @@ -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() { diff --git a/src/app/pages/dashboard/electricity/electricity-chart/electricity-chart.component.ts b/src/app/pages/dashboard/electricity/electricity-chart/electricity-chart.component.ts index 1f2ac96a27..10130a5f1b 100644 --- a/src/app/pages/dashboard/electricity/electricity-chart/electricity-chart.component.ts +++ b/src/app/pages/dashboard/electricity/electricity-chart/electricity-chart.component.ts @@ -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; 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), diff --git a/src/app/pages/dashboard/electricity/electricity.component.html b/src/app/pages/dashboard/electricity/electricity.component.html index 472a8d02c3..4b91fecdd1 100644 --- a/src/app/pages/dashboard/electricity/electricity.component.html +++ b/src/app/pages/dashboard/electricity/electricity.component.html @@ -6,7 +6,7 @@ - +
{{ month.month }} @@ -52,6 +52,6 @@
- + diff --git a/src/app/pages/dashboard/electricity/electricity.component.ts b/src/app/pages/dashboard/electricity/electricity.component.ts index 6f5534bcb6..6cf69a2c22 100644 --- a/src/app/pages/dashboard/electricity/electricity.component.ts +++ b/src/app/pages/dashboard/electricity/electricity.component.ts @@ -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; + 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; } } diff --git a/src/app/pages/dashboard/rooms/player/player.component.ts b/src/app/pages/dashboard/rooms/player/player.component.ts index 391ec67370..ce0327c52f 100644 --- a/src/app/pages/dashboard/rooms/player/player.component.ts +++ b/src/app/pages/dashboard/rooms/player/player.component.ts @@ -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', diff --git a/src/app/pages/dashboard/security-cameras/security-cameras.component.ts b/src/app/pages/dashboard/security-cameras/security-cameras.component.ts index ffb5df95d8..353cab091f 100644 --- a/src/app/pages/dashboard/security-cameras/security-cameras.component.ts +++ b/src/app/pages/dashboard/security-cameras/security-cameras.component.ts @@ -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; + } } diff --git a/src/app/pages/dashboard/solar/solar.component.ts b/src/app/pages/dashboard/solar/solar.component.ts index 59e4e73bdd..fcae7c2f6b 100644 --- a/src/app/pages/dashboard/solar/solar.component.ts +++ b/src/app/pages/dashboard/solar/solar.component.ts @@ -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; diff --git a/src/app/pages/dashboard/temperature/temperature.component.html b/src/app/pages/dashboard/temperature/temperature.component.html index 34f2908979..fe34b7528f 100644 --- a/src/app/pages/dashboard/temperature/temperature.component.html +++ b/src/app/pages/dashboard/temperature/temperature.component.html @@ -5,7 +5,7 @@
@@ -40,7 +40,7 @@
diff --git a/src/app/pages/dashboard/temperature/temperature.component.ts b/src/app/pages/dashboard/temperature/temperature.component.ts index 5160b7bf92..1c069ee988 100644 --- a/src/app/pages/dashboard/temperature/temperature.component.ts +++ b/src/app/pages/dashboard/temperature/temperature.component.ts @@ -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; } } diff --git a/src/app/pages/dashboard/traffic/traffic-chart.component.ts b/src/app/pages/dashboard/traffic/traffic-chart.component.ts index c0bfa9f54d..e158057890 100644 --- a/src/app/pages/dashboard/traffic/traffic-chart.component.ts +++ b/src/app/pages/dashboard/traffic/traffic-chart.component.ts @@ -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, }, ], }); diff --git a/src/app/pages/dashboard/traffic/traffic.component.ts b/src/app/pages/dashboard/traffic/traffic.component.ts index 0aa225d290..b90bfc7cec 100644 --- a/src/app/pages/dashboard/traffic/traffic.component.ts +++ b/src/app/pages/dashboard/traffic/traffic.component.ts @@ -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';
- + `, }) 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; } } diff --git a/src/app/pages/e-commerce/charts-panel/charts/orders-chart.component.ts b/src/app/pages/e-commerce/charts-panel/charts/orders-chart.component.ts index d5fca98249..a0bf29cb03 100644 --- a/src/app/pages/e-commerce/charts-panel/charts/orders-chart.component.ts +++ b/src/app/pages/e-commerce/charts-panel/charts/orders-chart.component.ts @@ -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', diff --git a/src/app/pages/e-commerce/charts-panel/charts/profit-chart.component.ts b/src/app/pages/e-commerce/charts-panel/charts/profit-chart.component.ts index 4d8ba2996f..9b7a3ee291 100644 --- a/src/app/pages/e-commerce/charts-panel/charts/profit-chart.component.ts +++ b/src/app/pages/e-commerce/charts-panel/charts/profit-chart.component.ts @@ -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', diff --git a/src/app/pages/e-commerce/country-orders/chart/country-orders-chart.component.ts b/src/app/pages/e-commerce/country-orders/chart/country-orders-chart.component.ts index cdf6d60e07..4fafb6e522 100644 --- a/src/app/pages/e-commerce/country-orders/chart/country-orders-chart.component.ts +++ b/src/app/pages/e-commerce/country-orders/chart/country-orders-chart.component.ts @@ -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({ diff --git a/src/app/pages/e-commerce/country-orders/country-orders.component.ts b/src/app/pages/e-commerce/country-orders/country-orders.component.ts index a8e897dfe7..48902c9805 100644 --- a/src/app/pages/e-commerce/country-orders/country-orders.component.ts +++ b/src/app/pages/e-commerce/country-orders/country-orders.component.ts @@ -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() { diff --git a/src/app/pages/e-commerce/earning-card/front-side/earning-live-update-chart.component.ts b/src/app/pages/e-commerce/earning-card/front-side/earning-live-update-chart.component.ts index 28267c3378..4e9cbd2398 100644 --- a/src/app/pages/e-commerce/earning-card/front-side/earning-live-update-chart.component.ts +++ b/src/app/pages/e-commerce/earning-card/front-side/earning-live-update-chart.component.ts @@ -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', diff --git a/src/app/pages/e-commerce/profit-card/back-side/stats-area-chart.component.ts b/src/app/pages/e-commerce/profit-card/back-side/stats-area-chart.component.ts index 6ec7e4a468..e5c202aadf 100644 --- a/src/app/pages/e-commerce/profit-card/back-side/stats-area-chart.component.ts +++ b/src/app/pages/e-commerce/profit-card/back-side/stats-area-chart.component.ts @@ -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, }, ], }); diff --git a/src/app/pages/e-commerce/profit-card/back-side/stats-card-back.component.html b/src/app/pages/e-commerce/profit-card/back-side/stats-card-back.component.html index 8670faf250..295d9862ef 100644 --- a/src/app/pages/e-commerce/profit-card/back-side/stats-card-back.component.html +++ b/src/app/pages/e-commerce/profit-card/back-side/stats-card-back.component.html @@ -23,5 +23,5 @@
- + diff --git a/src/app/pages/e-commerce/profit-card/back-side/stats-card-back.component.ts b/src/app/pages/e-commerce/profit-card/back-side/stats-card-back.component.ts index b816ce8134..206940fff9 100644 --- a/src/app/pages/e-commerce/profit-card/back-side/stats-card-back.component.ts +++ b/src/app/pages/e-commerce/profit-card/back-side/stats-card-back.component.ts @@ -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; + } } diff --git a/src/app/pages/e-commerce/profit-card/front-side/stats-bar-animation-chart.component.ts b/src/app/pages/e-commerce/profit-card/front-side/stats-bar-animation-chart.component.ts index a78d305f53..37820038e2 100644 --- a/src/app/pages/e-commerce/profit-card/front-side/stats-bar-animation-chart.component.ts +++ b/src/app/pages/e-commerce/profit-card/front-side/stats-bar-animation-chart.component.ts @@ -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', diff --git a/src/app/pages/e-commerce/progress-section/progress-section.component.ts b/src/app/pages/e-commerce/progress-section/progress-section.component.ts index 869d270bdc..da78f7e0f0 100644 --- a/src/app/pages/e-commerce/progress-section/progress-section.component.ts +++ b/src/app/pages/e-commerce/progress-section/progress-section.component.ts @@ -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; + } } diff --git a/src/app/pages/e-commerce/traffic-reveal-card/back-side/traffic-bar-chart.component.ts b/src/app/pages/e-commerce/traffic-reveal-card/back-side/traffic-bar-chart.component.ts index 51c5b317bf..343055d580 100644 --- a/src/app/pages/e-commerce/traffic-reveal-card/back-side/traffic-bar-chart.component.ts +++ b/src/app/pages/e-commerce/traffic-reveal-card/back-side/traffic-bar-chart.component.ts @@ -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; diff --git a/src/app/pages/e-commerce/traffic-reveal-card/traffic-reveal-card.component.html b/src/app/pages/e-commerce/traffic-reveal-card/traffic-reveal-card.component.html index 3280dd8b55..0bdf41e8af 100644 --- a/src/app/pages/e-commerce/traffic-reveal-card/traffic-reveal-card.component.html +++ b/src/app/pages/e-commerce/traffic-reveal-card/traffic-reveal-card.component.html @@ -1,16 +1,16 @@ - + - + - > + diff --git a/src/app/pages/e-commerce/traffic-reveal-card/traffic-reveal-card.component.ts b/src/app/pages/e-commerce/traffic-reveal-card/traffic-reveal-card.component.ts index 0abb9bfc4f..7ee816988c 100644 --- a/src/app/pages/e-commerce/traffic-reveal-card/traffic-reveal-card.component.ts +++ b/src/app/pages/e-commerce/traffic-reveal-card/traffic-reveal-card.component.ts @@ -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); } diff --git a/src/app/pages/e-commerce/user-activity/user-activity.component.ts b/src/app/pages/e-commerce/user-activity/user-activity.component.ts index ceff364570..f4e516ebf6 100644 --- a/src/app/pages/e-commerce/user-activity/user-activity.component.ts +++ b/src/app/pages/e-commerce/user-activity/user-activity.component.ts @@ -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 `, }) -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; }); diff --git a/src/app/pages/e-commerce/visitors-analytics/visitors-analytics-chart/visitors-analytics-chart.component.ts b/src/app/pages/e-commerce/visitors-analytics/visitors-analytics-chart/visitors-analytics-chart.component.ts index 25e9f76690..f2e42be361 100644 --- a/src/app/pages/e-commerce/visitors-analytics/visitors-analytics-chart/visitors-analytics-chart.component.ts +++ b/src/app/pages/e-commerce/visitors-analytics/visitors-analytics-chart/visitors-analytics-chart.component.ts @@ -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; 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, }; } diff --git a/src/app/pages/e-commerce/visitors-analytics/visitors-analytics.component.html b/src/app/pages/e-commerce/visitors-analytics/visitors-analytics.component.html index 8e508e4a78..7abd9956f7 100644 --- a/src/app/pages/e-commerce/visitors-analytics/visitors-analytics.component.html +++ b/src/app/pages/e-commerce/visitors-analytics/visitors-analytics.component.html @@ -8,11 +8,11 @@
- + - + diff --git a/src/app/pages/e-commerce/visitors-analytics/visitors-analytics.component.ts b/src/app/pages/e-commerce/visitors-analytics/visitors-analytics.component.ts index fc3b86c028..d6a26dcef6 100644 --- a/src/app/pages/e-commerce/visitors-analytics/visitors-analytics.component.ts +++ b/src/app/pages/e-commerce/visitors-analytics/visitors-analytics.component.ts @@ -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 { diff --git a/src/app/pages/e-commerce/visitors-analytics/visitors-statistics/visitors-statistics.component.ts b/src/app/pages/e-commerce/visitors-analytics/visitors-statistics/visitors-statistics.component.ts index 80de787016..0b04638084 100644 --- a/src/app/pages/e-commerce/visitors-analytics/visitors-statistics/visitors-statistics.component.ts +++ b/src/app/pages/e-commerce/visitors-analytics/visitors-statistics/visitors-statistics.component.ts @@ -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,