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

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({

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<string[]> {
+    return observableOf(this.countriesCategories);
+  }
+
+  getCountriesCategoriesData(): Observable<number[]> {
+    return observableOf(this.generateRandomData(this.countriesCategoriesLength));
+  }
+}

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({

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,
+    }));
   }
 
-  // TODO: observables
-  getData() {
-    return this.data;
+  getListData(): Observable<Electricity[]> {
+    return observableOf(this.listData);
+  }
+
+  getChartData(): Observable<ElectricityChart[]> {
+    return observableOf(this.chartData);
   }
 }

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);
   }
 }

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<Camera[]> {
+    return observableOf(this.cameras);
+  }
+}

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<number> {
+    return observableOf(this.value);
+  }
+}

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<number[]> {
+    return observableOf(this.statsBarData);
+  }
+}

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<ProgressInfo[]> {
+    return observableOf(this.progressInfoData);
+  }
+}

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<Temperature> {
+    return observableOf(this.temperatureDate);
+  }
+
+  getHumidityData(): Observable<Temperature> {
+    return observableOf(this.humidityDate);
+  }
+}

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<number[]> {
+    return observableOf(this.data);
+  }
+}

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);
     });
   }
 

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<any> {
     return observableOf(this.users);
   }
 
-  getUserArray(): Observable<any[]> {
-    return observableOf(this.userArray);
+  getContacts(): Observable<Contacts[]> {
+    return observableOf(this.contacts);
   }
 
-  getUser(): Observable<any> {
-    counter = (counter + 1) % this.userArray.length;
-    return observableOf(this.userArray[counter]);
+  getRecentUsers(): Observable<RecentUsers[]> {
+    return observableOf(this.recentUsers);
   }
 }

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<number[]> {
+    return observableOf(this.innerLinePoints);
+  }
+
+  getOutlineLineChartData(): Observable<OutlineData[]> {
+    return observableOf(this.generateOutlineLineData());
+  }
+
+  getPieChartData(): Observable<number> {
+    return observableOf(this.pieChartValue);
+  }
+}

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,
+};

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',

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',

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({

src/app/pages/dashboard/contacts/contacts.component.html

@@ -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>

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;
   }
 }

src/app/pages/dashboard/dashboard.component.html

@@ -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>

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() {

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<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),

src/app/pages/dashboard/electricity/electricity.component.html

@@ -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>

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<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;
   }
 }

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',

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;
+  }
 }

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;

src/app/pages/dashboard/temperature/temperature.component.html

@@ -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 }">

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;
   }
 }

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,
             },
           ],
         });

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';
         </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;
   }
 }

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',

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',

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({

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() {

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',

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,
             },
           ],
         });

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

@@ -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>

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;
+  }
 }

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',

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;
+  }
 }

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;
 

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

@@ -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>

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);
   }

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
     </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;
       });

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<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,
     };
   }
 

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

@@ -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>

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 {

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,