refactor(@core): refactor data services for better integration (#1997)

With this change all components, which used data services before, now use abstract classes of service interfaces, mock services extend interface services, CoreModule contains code to inject a needed implementation of some service.

src/app/@core/core.module.ts

@@ -5,13 +5,52 @@ import { NbSecurityModule, NbRoleProvider } from '@nebular/security';
 import { of as observableOf } from 'rxjs';
 
 import { throwIfAlreadyLoaded } from './module-import-guard';
-import { DataModule } from './data/data.module';
 import {
   AnalyticsService,
   LayoutService,
   PlayerService,
   StateService,
 } from './utils';
+import { UserData } from './data/users';
+import { ElectricityData } from './data/electricity';
+import { SmartTableData } from './data/smart-table';
+import { UserActivityData } from './data/user-activity';
+import { OrdersChartData } from './data/orders-chart';
+import { ProfitChartData } from './data/profit-chart';
+import { TrafficListData } from './data/traffic-list';
+import { EarningData } from './data/earning';
+import { OrdersProfitChartData } from './data/orders-profit-chart';
+import { TrafficBarData } from './data/traffic-bar';
+import { ProfitBarAnimationChartData } from './data/profit-bar-animation-chart';
+import { TemperatureHumidityData } from './data/temperature-humidity';
+import { SolarData } from './data/solar';
+import { TrafficChartData } from './data/traffic-chart';
+import { StatsBarData } from './data/stats-bar';
+import { CountryOrderData } from './data/country-order';
+import { StatsProgressBarData } from './data/stats-progress-bar';
+import { VisitorsAnalyticsData } from './data/visitors-analytics';
+import { SecurityCamerasData } from './data/security-cameras';
+
+import { UserService } from './mock/users.service';
+import { ElectricityService } from './mock/electricity.service';
+import { SmartTableService } from './mock/smart-table.service';
+import { UserActivityService } from './mock/user-activity.service';
+import { OrdersChartService } from './mock/orders-chart.service';
+import { ProfitChartService } from './mock/profit-chart.service';
+import { TrafficListService } from './mock/traffic-list.service';
+import { EarningService } from './mock/earning.service';
+import { OrdersProfitChartService } from './mock/orders-profit-chart.service';
+import { TrafficBarService } from './mock/traffic-bar.service';
+import { ProfitBarAnimationChartService } from './mock/profit-bar-animation-chart.service';
+import { TemperatureHumidityService } from './mock/temperature-humidity.service';
+import { SolarService } from './mock/solar.service';
+import { TrafficChartService } from './mock/traffic-chart.service';
+import { StatsBarService } from './mock/stats-bar.service';
+import { CountryOrderService } from './mock/country-order.service';
+import { StatsProgressBarService } from './mock/stats-progress-bar.service';
+import { VisitorsAnalyticsService } from './mock/visitors-analytics.service';
+import { SecurityCamerasService } from './mock/security-cameras.service';
+import { MockDataModule } from './mock/mock-data.module';
 
 const socialLinks = [
   {
@@ -31,6 +70,28 @@ const socialLinks = [
   },
 ];
 
+const DATA_SERVICES = [
+  { provide: UserData, useClass: UserService },
+  { provide: ElectricityData, useClass: ElectricityService },
+  { provide: SmartTableData, useClass: SmartTableService },
+  { provide: UserActivityData, useClass: UserActivityService },
+  { provide: OrdersChartData, useClass: OrdersChartService },
+  { provide: ProfitChartData, useClass: ProfitChartService },
+  { provide: TrafficListData, useClass: TrafficListService },
+  { provide: EarningData, useClass: EarningService },
+  { provide: OrdersProfitChartData, useClass: OrdersProfitChartService },
+  { provide: TrafficBarData, useClass: TrafficBarService },
+  { provide: ProfitBarAnimationChartData, useClass: ProfitBarAnimationChartService },
+  { provide: TemperatureHumidityData, useClass: TemperatureHumidityService },
+  { provide: SolarData, useClass: SolarService },
+  { provide: TrafficChartData, useClass: TrafficChartService },
+  { provide: StatsBarData, useClass: StatsBarService },
+  { provide: CountryOrderData, useClass: CountryOrderService },
+  { provide: StatsProgressBarData, useClass: StatsProgressBarService },
+  { provide: VisitorsAnalyticsData, useClass: VisitorsAnalyticsService },
+  { provide: SecurityCamerasData, useClass: SecurityCamerasService },
+];
+
 export class NbSimpleRoleProvider extends NbRoleProvider {
   getRole() {
     // here you could provide any role based on any auth flow
@@ -39,7 +100,8 @@ export class NbSimpleRoleProvider extends NbRoleProvider {
 }
 
 export const NB_CORE_PROVIDERS = [
-  ...DataModule.forRoot().providers,
+  ...MockDataModule.forRoot().providers,
+  ...DATA_SERVICES,
   ...NbAuthModule.forRoot({
 
     strategies: [

src/app/@core/data/country-order.ts

@@ -0,0 +1,6 @@
+import { Observable } from 'rxjs';
+
+export abstract class CountryOrderData {
+  abstract getCountriesCategories(): Observable<string[]>;
+  abstract getCountriesCategoriesData(country: string): Observable<number[]>;
+}

src/app/@core/data/earning.ts

@@ -0,0 +1,21 @@
+import { Observable } from 'rxjs';
+
+export interface LiveUpdateChart {
+  liveChart: { value: [string, number] }[];
+  delta: {
+    up: boolean;
+    value: number;
+  };
+  dailyIncome: number;
+}
+
+export interface PieChart {
+  value: number;
+  name: string;
+}
+
+export abstract class EarningData {
+  abstract getEarningLiveUpdateCardData(currency: string): Observable<any[]>;
+  abstract getEarningCardData(currency: string): Observable<LiveUpdateChart>;
+  abstract getEarningPieChartData(): Observable<PieChart[]>;
+}

src/app/@core/data/electricity.ts

@@ -0,0 +1,25 @@
+import { Observable } from 'rxjs';
+
+export interface Month {
+  month: string;
+  delta: string;
+  down: boolean;
+  kWatts: string;
+  cost: string;
+}
+
+export interface Electricity {
+  title: string;
+  active?: boolean;
+  months: Month[];
+}
+
+export interface ElectricityChart {
+  label: string;
+  value: number;
+}
+
+export abstract class ElectricityData {
+  abstract getListData(): Observable<Electricity[]>;
+  abstract getChartData(): Observable<ElectricityChart[]>;
+}

src/app/@core/data/orders-chart.ts

@@ -0,0 +1,8 @@
+export interface OrdersChart {
+  chartLabel: string[];
+  linesData: number[][];
+}
+
+export abstract class OrdersChartData {
+  abstract getOrdersChartData(period: string): OrdersChart;
+}

src/app/@core/data/orders-profit-chart.ts

@@ -0,0 +1,14 @@
+import { Observable } from 'rxjs';
+import { OrdersChart } from './orders-chart';
+import { ProfitChart  } from './profit-chart';
+
+export interface OrderProfitChartSummary {
+  title: string;
+  value: number;
+}
+
+export abstract class OrdersProfitChartData {
+  abstract getOrderProfitChartSummary(): Observable<OrderProfitChartSummary[]>;
+  abstract getOrdersChartData(period: string): Observable<OrdersChart>;
+  abstract getProfitChartData(period: string): Observable<ProfitChart>;
+}

src/app/@core/data/profit-bar-animation-chart.ts

@@ -0,0 +1,5 @@
+import { Observable } from 'rxjs';
+
+export abstract class ProfitBarAnimationChartData {
+  abstract getChartData(): Observable<{ firstLine: number[]; secondLine: number[]; }>;
+}

src/app/@core/data/profit-chart.ts

@@ -0,0 +1,8 @@
+export interface ProfitChart {
+  chartLabel: string[];
+  data: number[][];
+}
+
+export abstract class ProfitChartData {
+  abstract getProfitChartData(period: string): ProfitChart;
+}

src/app/@core/data/security-cameras.ts

@@ -0,0 +1,10 @@
+import { Observable } from 'rxjs';
+
+export interface Camera {
+  title: string;
+  source: string;
+}
+
+export abstract class SecurityCamerasData {
+  abstract getCamerasData(): Observable<Camera[]>;
+}

src/app/@core/data/smart-table.ts

@@ -0,0 +1,4 @@
+
+export abstract class SmartTableData {
+  abstract getData(): any[];
+}

src/app/@core/data/solar.ts

@@ -0,0 +1,5 @@
+import { Observable } from 'rxjs';
+
+export abstract class SolarData {
+  abstract getSolarData(): Observable<number>;
+}

src/app/@core/data/stats-bar.ts

@@ -0,0 +1,5 @@
+import { Observable } from 'rxjs';
+
+export abstract class StatsBarData {
+  abstract getStatsBarData(): Observable<number[]>;
+}

src/app/@core/data/stats-progress-bar.ts

@@ -0,0 +1,12 @@
+import { Observable } from 'rxjs';
+
+export interface ProgressInfo {
+  title: string;
+  value: number;
+  activeProgress: number;
+  description: string;
+}
+
+export abstract class StatsProgressBarData {
+  abstract getProgressInfoData(): Observable<ProgressInfo[]>;
+}

src/app/@core/data/temperature-humidity.ts

@@ -0,0 +1,12 @@
+import { Observable } from 'rxjs';
+
+export interface Temperature {
+  value: number;
+  min: number;
+  max: number;
+}
+
+export abstract class TemperatureHumidityData {
+  abstract getTemperatureData(): Observable<Temperature>;
+  abstract getHumidityData(): Observable<Temperature>;
+}

src/app/@core/data/traffic-bar.ts

@@ -0,0 +1,11 @@
+import { Observable } from 'rxjs';
+
+export interface TrafficBar {
+  data: number[];
+  labels: string[];
+  formatter: string;
+}
+
+export abstract class TrafficBarData {
+  abstract getTrafficBarData(period: string): Observable<TrafficBar>;
+}

src/app/@core/data/traffic-chart.ts

@@ -0,0 +1,5 @@
+import { Observable } from 'rxjs';
+
+export abstract class TrafficChartData {
+  abstract getTrafficChartData(): Observable<number[]>;
+}

src/app/@core/data/traffic-list.ts

@@ -0,0 +1,20 @@
+import { Observable } from 'rxjs';
+
+export interface TrafficList {
+  date: string;
+  value: number;
+  delta: {
+    up: boolean;
+    value: number;
+  };
+  comparison: {
+    prevDate: string;
+    prevValue: number;
+    nextDate: string;
+    nextValue: number;
+  };
+}
+
+export abstract class TrafficListData {
+  abstract getTrafficListData(period: string): Observable<TrafficList>;
+}

src/app/@core/data/user-activity.ts

@@ -0,0 +1,12 @@
+import { Observable } from 'rxjs';
+
+export interface UserActive {
+  date: string;
+  pagesVisitCount: number;
+  deltaUp: boolean;
+  newVisits: number;
+}
+
+export abstract class UserActivityData {
+  abstract getUserActivityData(period: string): Observable<UserActive[]>;
+}

src/app/@core/data/users.ts

@@ -0,0 +1,21 @@
+import { Observable } from 'rxjs';
+
+export interface User {
+  name: string;
+  picture: string;
+}
+
+export interface Contacts {
+  user: User;
+  type: string;
+}
+
+export interface RecentUsers extends Contacts {
+  time: number;
+}
+
+export abstract class UserData {
+  abstract getUsers(): Observable<User[]>;
+  abstract getContacts(): Observable<Contacts[]>;
+  abstract getRecentUsers(): Observable<RecentUsers[]>;
+}

src/app/@core/data/visitors-analytics.ts

@@ -0,0 +1,12 @@
+import { Observable } from 'rxjs';
+
+export interface OutlineData {
+  label: string;
+  value: number;
+}
+
+export abstract class VisitorsAnalyticsData {
+  abstract getInnerLineChartData(): Observable<number[]>;
+  abstract getOutlineLineChartData(): Observable<OutlineData[]>;
+  abstract getPieChartData(): Observable<number>;
+}

src/app/@core/mock/README.md

@@ -0,0 +1 @@
+Application-wise data providers.

src/app/@core/mock/country-order.service.ts

@@ -1,8 +1,9 @@
 import { Injectable } from '@angular/core';
 import { of as observableOf, Observable } from 'rxjs';
+import { CountryOrderData } from '../data/country-order';
 
 @Injectable()
-export class CountryOrderService {
+export class CountryOrderService extends CountryOrderData {
 
   private countriesCategories = [
     'Sofas',
@@ -22,7 +23,7 @@ export class CountryOrderService {
     return observableOf(this.countriesCategories);
   }
 
-  getCountriesCategoriesData(): Observable<number[]> {
+  getCountriesCategoriesData(country: string): Observable<number[]> {
     return observableOf(this.generateRandomData(this.countriesCategoriesLength));
   }
 }

src/app/@core/mock/earning.service.ts

@@ -1,22 +1,9 @@
 import { Injectable } from '@angular/core';
 import { of as observableOf, Observable } from 'rxjs';
-
-export class LiveUpdateChart {
-  liveChart: { value: [string, number] }[];
-  delta: {
-    up: boolean;
-    value: number;
-  };
-  dailyIncome: number;
-}
-
-export class PieChart {
-  value: number;
-  name: string;
-}
+import { LiveUpdateChart, PieChart, EarningData } from '../data/earning';
 
 @Injectable()
-export class EarningService {
+export class EarningService extends EarningData {
 
   private currentDate: Date = new Date();
   private currentValue = Math.random() * 1000;
@@ -92,7 +79,7 @@ export class EarningService {
     };
   }
 
-  generateRandomEarningData(currency) {
+  getEarningLiveUpdateCardData(currency): Observable<any[]> {
     const data = this.liveUpdateChartData[currency.toLowerCase()];
     const newValue = this.generateRandomLiveChartData();
 
@@ -102,7 +89,7 @@ export class EarningService {
     return observableOf(data.liveChart);
   }
 
-  getEarningLiveUpdateCardData(currency: string) {
+  getEarningCardData(currency: string): Observable<LiveUpdateChart> {
     const data = this.liveUpdateChartData[currency.toLowerCase()];
 
     data.liveChart = this.getDefaultLiveChartData(150);

src/app/@core/mock/electricity.service.ts

@@ -1,27 +1,9 @@
 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;
-}
+import { Electricity, ElectricityChart, ElectricityData } from '../data/electricity';
 
 @Injectable()
-export class ElectricityService {
+export class ElectricityService extends ElectricityData {
 
   private listData: Electricity[] = [
     {
@@ -96,6 +78,7 @@ export class ElectricityService {
   chartData: ElectricityChart[];
 
   constructor() {
+    super();
     this.chartData = this.chartPoints.map((p, index) => ({
       label: (index % 5 === 3) ? `${Math.round(index / 5)}` : '',
       value: p,

src/app/@core/mock/mock-data.module.ts

@@ -53,10 +53,10 @@ const SERVICES = [
     ...SERVICES,
   ],
 })
-export class DataModule {
+export class MockDataModule {
   static forRoot(): ModuleWithProviders {
     return <ModuleWithProviders>{
-      ngModule: DataModule,
+      ngModule: MockDataModule,
       providers: [
         ...SERVICES,
       ],

src/app/@core/mock/orders-chart.service.ts

@@ -1,13 +1,9 @@
 import { Injectable } from '@angular/core';
 import { PeriodsService } from './periods.service';
-
-export class OrdersChart {
-  chartLabel: string[];
-  linesData: number[][];
-}
+import { OrdersChart, OrdersChartData } from '../data/orders-chart';
 
 @Injectable()
-export class OrdersChartService {
+export class OrdersChartService extends OrdersChartData {
 
   private year = [
     '2012',
@@ -22,6 +18,7 @@ export class OrdersChartService {
   private data = { };
 
   constructor(private period: PeriodsService) {
+    super();
     this.data = {
       week: this.getDataForWeekPeriod(),
       month: this.getDataForMonthPeriod(),

src/app/@core/mock/orders-profit-chart.service.ts

@@ -1,15 +1,11 @@
 import { of as observableOf,  Observable } from 'rxjs';
 import { Injectable } from '@angular/core';
-import { OrdersChart, OrdersChartService } from './orders-chart.service';
-import { ProfitChart, ProfitChartService } from './profit-chart.service';
-
-export class OrderProfitChartSummary {
-  title: string;
-  value: number;
-}
+import { OrdersChart, OrdersChartData } from '../data/orders-chart';
+import { OrderProfitChartSummary, OrdersProfitChartData } from '../data/orders-profit-chart';
+import { ProfitChart, ProfitChartData } from '../data/profit-chart';
 
 @Injectable()
-export class OrdersProfitChartService {
+export class OrdersProfitChartService extends OrdersProfitChartData {
 
   private summary = [
     {
@@ -30,8 +26,9 @@ export class OrdersProfitChartService {
     },
   ];
 
-  constructor(private ordersChartService: OrdersChartService,
-              private profitChartService: ProfitChartService) {
+  constructor(private ordersChartService: OrdersChartData,
+              private profitChartService: ProfitChartData) {
+    super();
   }
 
   getOrderProfitChartSummary(): Observable<OrderProfitChartSummary[]> {

src/app/@core/mock/profit-bar-animation-chart.service.ts

@@ -1,12 +1,14 @@
 import { Injectable } from '@angular/core';
 import { of as observableOf,  Observable } from 'rxjs';
+import { ProfitBarAnimationChartData } from '../data/profit-bar-animation-chart';
 
 @Injectable()
-export class ProfitBarAnimationChartService {
+export class ProfitBarAnimationChartService extends ProfitBarAnimationChartData {
 
   private data: any;
 
   constructor() {
+    super();
     this.data = {
       firstLine: this.getDataForFirstLine(),
       secondLine: this.getDataForSecondLine(),

src/app/@core/mock/profit-chart.service.ts

@@ -1,13 +1,9 @@
 import { Injectable } from '@angular/core';
 import { PeriodsService } from './periods.service';
-
-export class ProfitChart {
-  chartLabel: string[];
-  data: number[][];
-}
+import { ProfitChart, ProfitChartData } from '../data/profit-chart';
 
 @Injectable()
-export class ProfitChartService {
+export class ProfitChartService extends ProfitChartData {
 
   private year = [
     '2012',
@@ -22,6 +18,7 @@ export class ProfitChartService {
   private data = { };
 
   constructor(private period: PeriodsService) {
+    super();
     this.data = {
       week: this.getDataForWeekPeriod(),
       month: this.getDataForMonthPeriod(),

src/app/@core/mock/security-cameras.service.ts

@@ -1,13 +1,9 @@
 import { Injectable } from '@angular/core';
 import { of as observableOf, Observable } from 'rxjs';
-
-export class Camera {
-  title: string;
-  source: string;
-}
+import { Camera, SecurityCamerasData } from '../data/security-cameras';
 
 @Injectable()
-export class SecurityCamerasService {
+export class SecurityCamerasService extends SecurityCamerasData {
 
   private cameras: Camera[] = [
     {

src/app/@core/mock/smart-table.service.ts

@@ -1,7 +1,8 @@
 import { Injectable } from '@angular/core';
+import { SmartTableData } from '../data/smart-table';
 
 @Injectable()
-export class SmartTableService {
+export class SmartTableService extends SmartTableData {
 
   data = [{
     id: 1,

src/app/@core/mock/solar.service.ts

@@ -1,8 +1,9 @@
 import { Injectable } from '@angular/core';
 import { of as observableOf,  Observable } from 'rxjs';
+import { SolarData } from '../data/solar';
 
 @Injectable()
-export class SolarService {
+export class SolarService extends SolarData {
   private value = 42;
 
   getSolarData(): Observable<number> {

src/app/@core/mock/stats-bar.service.ts

@@ -1,8 +1,9 @@
 import { Injectable } from '@angular/core';
 import { of as observableOf, Observable } from 'rxjs';
+import { StatsBarData } from '../data/stats-bar';
 
 @Injectable()
-export class StatsBarService {
+export class StatsBarService extends StatsBarData {
 
   private statsBarData: number[] = [
     300, 520, 435, 530,

src/app/@core/mock/stats-progress-bar.service.ts

@@ -1,15 +1,9 @@
 import { Injectable } from '@angular/core';
 import { of as observableOf, Observable } from 'rxjs';
-
-export class ProgressInfo {
-  title: string;
-  value: number;
-  activeProgress: number;
-  description: string;
-}
+import { ProgressInfo, StatsProgressBarData } from '../data/stats-progress-bar';
 
 @Injectable()
-export class StatsProgressBarService {
+export class StatsProgressBarService extends StatsProgressBarData {
   private progressInfoData: ProgressInfo[] = [
     {
       title: 'Today’s Profit',

src/app/@core/mock/temperature-humidity.service.ts

@@ -1,14 +1,9 @@
 import { Injectable } from '@angular/core';
 import { of as observableOf,  Observable } from 'rxjs';
-
-export class Temperature {
-  value: number;
-  min: number;
-  max: number;
-}
+import { TemperatureHumidityData, Temperature } from '../data/temperature-humidity';
 
 @Injectable()
-export class TemperatureHumidityService {
+export class TemperatureHumidityService extends TemperatureHumidityData {
 
   private temperatureDate: Temperature = {
     value: 24,

src/app/@core/mock/traffic-bar.service.ts

@@ -1,19 +1,15 @@
 import { Injectable } from '@angular/core';
 import { of as observableOf,  Observable } from 'rxjs';
 import { PeriodsService } from './periods.service';
-
-export class TrafficBar {
-  data: number[];
-  labels: string[];
-  formatter: string;
-}
+import { TrafficBarData, TrafficBar } from '../data/traffic-bar';
 
 @Injectable()
-export class TrafficBarService {
+export class TrafficBarService extends TrafficBarData {
 
   private data = { };
 
   constructor(private period: PeriodsService) {
+    super();
     this.data = {
       week: this.getDataForWeekPeriod(),
       month: this.getDataForMonthPeriod(),

src/app/@core/mock/traffic-chart.service.ts

@@ -1,9 +1,9 @@
 import { Injectable } from '@angular/core';
 import { of as observableOf,  Observable } from 'rxjs';
-
+import { TrafficChartData } from '../data/traffic-chart';
 
 @Injectable()
-export class TrafficChartService {
+export class TrafficChartService extends TrafficChartData {
 
   private data: number[] = [
     300, 520, 435, 530,

src/app/@core/mock/traffic-list.service.ts

@@ -1,29 +1,16 @@
 import { Injectable } from '@angular/core';
 import { of as observableOf,  Observable } from 'rxjs';
 import { PeriodsService } from './periods.service';
-
-export class TrafficList {
-  date: string;
-  value: number;
-  delta: {
-    up: boolean;
-    value: number;
-  };
-  comparison: {
-    prevDate: string;
-    prevValue: number;
-    nextDate: string;
-    nextValue: number;
-  };
-}
+import { TrafficList, TrafficListData } from '../data/traffic-list';
 
 @Injectable()
-export class TrafficListService {
+export class TrafficListService extends TrafficListData {
 
   private getRandom = (roundTo: number) => Math.round(Math.random() * roundTo);
   private data = {};
 
   constructor(private period: PeriodsService) {
+    super();
     this.data = {
       week: this.getDataWeek(),
       month: this.getDataMonth(),

src/app/@core/mock/user-activity.service.ts

@@ -1,16 +1,10 @@
 import { Injectable } from '@angular/core';
 import { of as observableOf,  Observable } from 'rxjs';
 import { PeriodsService } from './periods.service';
-
-export class UserActive {
-  date: string;
-  pagesVisitCount: number;
-  deltaUp: boolean;
-  newVisits: number;
-}
+import { UserActive, UserActivityData } from '../data/user-activity';
 
 @Injectable()
-export class UserActivityService {
+export class UserActivityService extends UserActivityData {
 
   private getRandom = (roundTo: number) => Math.round(Math.random() * roundTo);
   private generateUserActivityRandomData(date) {
@@ -25,6 +19,7 @@ export class UserActivityService {
   data = {};
 
   constructor(private periods: PeriodsService) {
+    super();
     this.data = {
       week: this.getDataWeek(),
       month: this.getDataMonth(),

src/app/@core/mock/users.service.ts

@@ -1,23 +1,9 @@
-
 import { of as observableOf,  Observable } from 'rxjs';
 import { Injectable } from '@angular/core';
-
-class User {
-  name: string;
-  picture: string;
-}
-
-export class Contacts {
-  user: User;
-  type: string;
-}
-
-export class RecentUsers extends Contacts {
-  time: number;
-}
+import { Contacts, RecentUsers, UserData } from '../data/users';
 
 @Injectable()
-export class UserService {
+export class UserService extends UserData {
 
   private time: Date = new Date;
 

src/app/@core/mock/visitors-analytics.service.ts

@@ -1,16 +1,13 @@
 import { Injectable } from '@angular/core';
 import { of as observableOf, Observable } from 'rxjs';
 import { PeriodsService } from './periods.service';
-
-export class OutlineData {
-  label: string;
-  value: number;
-}
+import { OutlineData, VisitorsAnalyticsData } from '../data/visitors-analytics';
 
 @Injectable()
-export class VisitorsAnalyticsService {
+export class VisitorsAnalyticsService extends VisitorsAnalyticsData {
 
   constructor(private periodService: PeriodsService) {
+    super();
   }
 
   private pieChartValue = 75;

src/app/@theme/components/header/header.component.ts

@@ -1,7 +1,7 @@
 import { Component, Input, OnInit } from '@angular/core';
 
 import { NbMenuService, NbSidebarService } from '@nebular/theme';
-import { UserService } from '../../../@core/data/users.service';
+import { UserData } from '../../../@core/data/users';
 import { AnalyticsService } from '../../../@core/utils';
 import { LayoutService } from '../../../@core/utils';
 
@@ -20,7 +20,7 @@ export class HeaderComponent implements OnInit {
 
   constructor(private sidebarService: NbSidebarService,
               private menuService: NbMenuService,
-              private userService: UserService,
+              private userService: UserData,
               private analyticsService: AnalyticsService,
               private layoutService: LayoutService) {
   }

src/app/@theme/layouts/sample/sample.layout.ts

@@ -19,7 +19,6 @@ import { StateService } from '../../../@core/utils';
     <nb-layout [center]="layout.id === 'center-column'" windowMode>
       <nb-layout-header fixed>
         <ngx-header [position]="sidebar.id === 'start' ? 'normal': 'inverse'"></ngx-header>
-        <ngx-toggle-settings-button></ngx-toggle-settings-button>
       </nb-layout-header>
 
       <nb-sidebar class="menu-sidebar"
@@ -58,6 +57,7 @@ import { StateService } from '../../../@core/utils';
         <ngx-theme-settings></ngx-theme-settings>
       </nb-sidebar>
     </nb-layout>
+    <ngx-toggle-settings-button></ngx-toggle-settings-button>
   `,
 })
 export class SampleLayoutComponent implements OnDestroy {

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

@@ -3,7 +3,7 @@ import { NbThemeService, NbMediaBreakpoint, NbMediaBreakpointsService } from '@n
 import { takeWhile } from 'rxjs/operators';
 import { forkJoin } from 'rxjs';
 
-import { Contacts, RecentUsers, UserService } from '../../../@core/data/users.service';
+import { Contacts, RecentUsers, UserData } from '../../../@core/data/users';
 
 @Component({
   selector: 'ngx-contacts',
@@ -19,7 +19,7 @@ export class ContactsComponent implements OnDestroy {
   breakpoint: NbMediaBreakpoint;
   breakpoints: any;
 
-  constructor(private userService: UserService,
+  constructor(private userService: UserData,
               private themeService: NbThemeService,
               private breakpointService: NbMediaBreakpointsService) {
     this.breakpoints = this.breakpointService.getBreakpointsMap();

src/app/pages/dashboard/dashboard.component.ts

@@ -1,7 +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';
+import { SolarData } from '../../@core/data/solar';
 
 interface CardSettings {
   title: string;
@@ -77,7 +77,7 @@ export class DashboardComponent implements OnDestroy {
   };
 
   constructor(private themeService: NbThemeService,
-              private solarService: SolarService) {
+              private solarService: SolarData) {
     this.themeService.getJsTheme()
       .pipe(takeWhile(() => this.alive))
       .subscribe(theme => {

src/app/pages/dashboard/electricity/electricity-chart/electricity-chart.component.ts

@@ -2,7 +2,7 @@ import { delay, takeWhile } from 'rxjs/operators';
 import { AfterViewInit, Component, Input, OnDestroy } from '@angular/core';
 import { NbThemeService } from '@nebular/theme';
 import { LayoutService } from '../../../../@core/utils';
-import { ElectricityChart } from '../../../../@core/data/electricity.service';
+import { ElectricityChart } from '../../../../@core/data/electricity';
 
 @Component({
   selector: 'ngx-electricity-chart',

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

@@ -1,7 +1,7 @@
 import { Component, OnDestroy } from '@angular/core';
 import { NbThemeService } from '@nebular/theme';
 
-import { Electricity, ElectricityChart, ElectricityService } from '../../../@core/data/electricity.service';
+import { Electricity, ElectricityChart, ElectricityData } from '../../../@core/data/electricity';
 import { takeWhile } from 'rxjs/operators';
 import { forkJoin } from 'rxjs';
 
@@ -23,7 +23,7 @@ export class ElectricityComponent implements OnDestroy {
   currentTheme: string;
   themeSubscription: any;
 
-  constructor(private electricityService: ElectricityService,
+  constructor(private electricityService: ElectricityData,
               private themeService: NbThemeService) {
     this.themeService.getJsTheme()
       .pipe(takeWhile(() => this.alive))
@@ -36,7 +36,7 @@ export class ElectricityComponent implements OnDestroy {
       this.electricityService.getChartData(),
     )
       .pipe(takeWhile(() => this.alive))
-      .subscribe(([listData, chartData]) => {
+      .subscribe(([listData, chartData]: [Electricity[], ElectricityChart[]] ) => {
         this.listData = listData;
         this.chartData = chartData;
       });

src/app/pages/dashboard/security-cameras/security-cameras.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnDestroy } from '@angular/core';
-import { Camera, SecurityCamerasService } from '../../../@core/data/security-cameras.service';
+import { Camera, SecurityCamerasData } from '../../../@core/data/security-cameras';
 import { takeWhile } from 'rxjs/operators';
 
 @Component({
@@ -15,7 +15,7 @@ export class SecurityCamerasComponent implements OnDestroy {
   selectedCamera: Camera;
   isSingleView = false;
 
-  constructor(private securityCamerasService: SecurityCamerasService) {
+  constructor(private securityCamerasService: SecurityCamerasData) {
     this.securityCamerasService.getCamerasData()
       .pipe(takeWhile(() => this.alive))
       .subscribe((cameras: Camera[]) => {

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

@@ -1,6 +1,6 @@
 import { Component, OnDestroy } from '@angular/core';
 import { NbThemeService } from '@nebular/theme';
-import { Temperature, TemperatureHumidityService } from '../../../@core/data/temperature-humidity.service';
+import { Temperature, TemperatureHumidityData } from '../../../@core/data/temperature-humidity';
 import { takeWhile } from 'rxjs/operators';
 import { forkJoin } from 'rxjs';
 
@@ -27,7 +27,7 @@ export class TemperatureComponent implements OnDestroy {
   themeSubscription: any;
 
   constructor(private theme: NbThemeService,
-              private temperatureHumidityService: TemperatureHumidityService) {
+              private temperatureHumidityService: TemperatureHumidityData) {
     this.theme.getJsTheme()
       .pipe(takeWhile(() => this.alive))
       .subscribe(config => {

src/app/pages/dashboard/traffic/traffic.component.ts

@@ -1,7 +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';
+import { TrafficChartData } from '../../../@core/data/traffic-chart';
 
 @Component({
   selector: 'ngx-traffic',
@@ -36,7 +36,7 @@ export class TrafficComponent implements OnDestroy {
   currentTheme: string;
 
   constructor(private themeService: NbThemeService,
-              private trafficChartService: TrafficChartService) {
+              private trafficChartService: TrafficChartData) {
     this.themeService.getJsTheme()
       .pipe(takeWhile(() => this.alive))
       .subscribe(theme => {

src/app/pages/e-commerce/charts-panel/charts-panel.component.ts

@@ -3,9 +3,9 @@ import { takeWhile } from 'rxjs/operators';
 
 import { OrdersChartComponent } from './charts/orders-chart.component';
 import { ProfitChartComponent } from './charts/profit-chart.component';
-import { OrdersChart } from '../../../@core/data/orders-chart.service';
-import { ProfitChart } from '../../../@core/data/profit-chart.service';
-import { OrdersProfitChartService, OrderProfitChartSummary } from '../../../@core/data/orders-profit-chart.service';
+import { OrdersChart } from '../../../@core/data/orders-chart';
+import { ProfitChart } from '../../../@core/data/profit-chart';
+import { OrderProfitChartSummary, OrdersProfitChartData } from '../../../@core/data/orders-profit-chart';
 
 @Component({
   selector: 'ngx-ecommerce-charts',
@@ -24,7 +24,7 @@ export class ECommerceChartsPanelComponent implements OnDestroy {
   @ViewChild('ordersChart') ordersChart: OrdersChartComponent;
   @ViewChild('profitChart') profitChart: ProfitChartComponent;
 
-  constructor(private ordersProfitChartService: OrdersProfitChartService) {
+  constructor(private ordersProfitChartService: OrdersProfitChartData) {
     this.ordersProfitChartService.getOrderProfitChartSummary()
       .pipe(takeWhile(() => this.alive))
       .subscribe((summary) => {

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

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

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

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

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

@@ -1,7 +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';
+import { CountryOrderData } from '../../../@core/data/country-order';
 
 @Component({
   selector: 'ngx-country-orders',
@@ -34,7 +34,7 @@ export class CountryOrdersComponent implements OnDestroy {
 
   constructor(private themeService: NbThemeService,
               private breakpointService: NbMediaBreakpointsService,
-              private countryOrderService: CountryOrderService) {
+              private countryOrderService: CountryOrderData) {
     this.breakpoints = this.breakpointService.getBreakpointsMap();
     this.themeService.onMediaQueryChange()
       .pipe(takeWhile(() => this.alive))
@@ -51,7 +51,7 @@ export class CountryOrdersComponent implements OnDestroy {
   selectCountryById(countryName: string) {
     this.countryName = countryName;
 
-    this.countryOrderService.getCountriesCategoriesData()
+    this.countryOrderService.getCountriesCategoriesData(countryName)
       .pipe(takeWhile(() => this.alive))
       .subscribe((countryData) => {
         this.countryData = countryData;

src/app/pages/e-commerce/earning-card/back-side/earning-card-back.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnDestroy } from '@angular/core';
-import { EarningService, PieChart } from '../../../../@core/data/earning.service';
+import { PieChart, EarningData } from '../../../../@core/data/earning';
 import { takeWhile } from 'rxjs/operators';
 
 @Component({
@@ -16,7 +16,7 @@ export class EarningCardBackComponent implements OnDestroy {
   value: number;
   defaultSelectedCurrency: string = 'Bitcoin';
 
-  constructor(private earningService: EarningService ) {
+  constructor(private earningService: EarningData ) {
     this.earningService.getEarningPieChartData()
       .pipe(takeWhile(() => this.alive))
       .subscribe((earningPieChartData) => {

src/app/pages/e-commerce/earning-card/front-side/earning-card-front.component.ts

@@ -2,7 +2,7 @@ import { Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { NbThemeService } from '@nebular/theme';
 import { interval , Subscription } from 'rxjs';
 import { switchMap, takeWhile } from 'rxjs/operators';
-import { EarningService, LiveUpdateChart } from '../../../../@core/data/earning.service';
+import { LiveUpdateChart, EarningData } from '../../../../@core/data/earning';
 
 @Component({
   selector: 'ngx-earning-card-front',
@@ -21,7 +21,7 @@ export class EarningCardFrontComponent implements OnDestroy, OnInit {
   liveUpdateChartData: { value: [string, number] }[];
 
   constructor(private themeService: NbThemeService,
-              private earningService: EarningService) {
+              private earningService: EarningData) {
     this.themeService.getJsTheme()
       .pipe(takeWhile(() => this.alive))
       .subscribe(theme => {
@@ -42,9 +42,9 @@ export class EarningCardFrontComponent implements OnDestroy, OnInit {
   }
 
   private getEarningCardData(currency) {
-    this.earningService.getEarningLiveUpdateCardData(currency)
+    this.earningService.getEarningCardData(currency)
       .pipe(takeWhile(() => this.alive))
-      .subscribe((earningLiveUpdateCardData) => {
+      .subscribe((earningLiveUpdateCardData: LiveUpdateChart) => {
         this.earningLiveUpdateCardData = earningLiveUpdateCardData;
         this.liveUpdateChartData = earningLiveUpdateCardData.liveChart;
 
@@ -60,9 +60,9 @@ export class EarningCardFrontComponent implements OnDestroy, OnInit {
     this.intervalSubscription = interval(200)
       .pipe(
         takeWhile(() => this.alive),
-        switchMap(() => this.earningService.generateRandomEarningData(currency)),
+        switchMap(() => this.earningService.getEarningLiveUpdateCardData(currency)),
       )
-      .subscribe((liveUpdateChartData) => {
+      .subscribe((liveUpdateChartData: any[]) => {
         this.liveUpdateChartData = [...liveUpdateChartData];
       });
   }

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

@@ -1,5 +1,5 @@
 import { Component, OnDestroy } from '@angular/core';
-import { StatsBarService } from '../../../../@core/data/stats-bar.service';
+import { StatsBarData } from '../../../../@core/data/stats-bar';
 import { takeWhile } from 'rxjs/operators';
 
 @Component({
@@ -13,7 +13,7 @@ export class StatsCardBackComponent implements OnDestroy {
 
   chartData: number[];
 
-  constructor(private statsBarData: StatsBarService) {
+  constructor(private statsBarData: StatsBarData) {
     this.statsBarData.getStatsBarData()
       .pipe(takeWhile(() => this.alive))
       .subscribe((data) => {

src/app/pages/e-commerce/profit-card/front-side/stats-card-front.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { ProfitBarAnimationChartService } from '../../../../@core/data/profit-bar-animation-chart.service';
+import { ProfitBarAnimationChartData } from '../../../../@core/data/profit-bar-animation-chart';
 import { takeWhile } from 'rxjs/operators';
 
 @Component({
@@ -13,7 +13,7 @@ export class StatsCardFrontComponent {
 
   linesData: { firstLine: number[]; secondLine: number[] };
 
-  constructor(private profitBarAnimationChartService: ProfitBarAnimationChartService) {
+  constructor(private profitBarAnimationChartService: ProfitBarAnimationChartData) {
     this.profitBarAnimationChartService.getChartData()
       .pipe(takeWhile(() => this.alive))
       .subscribe((linesData) => {

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

@@ -1,5 +1,5 @@
 import { Component, OnDestroy } from '@angular/core';
-import { ProgressInfo, StatsProgressBarService } from '../../../@core/data/stats-progress-bar.service';
+import { ProgressInfo, StatsProgressBarData } from '../../../@core/data/stats-progress-bar';
 import { takeWhile } from 'rxjs/operators';
 
 @Component({
@@ -13,7 +13,7 @@ export class ECommerceProgressSectionComponent implements OnDestroy {
 
   progressInfoData: ProgressInfo[];
 
-  constructor(private statsProgressBarService: StatsProgressBarService) {
+  constructor(private statsProgressBarService: StatsProgressBarData) {
     this.statsProgressBarService.getProgressInfoData()
       .pipe(takeWhile(() => this.alive))
       .subscribe((data) => {

src/app/pages/e-commerce/traffic-reveal-card/front-side/traffic-front-card.component.ts

@@ -2,7 +2,7 @@ import { Component, Input, OnDestroy } from '@angular/core';
 import { NbThemeService } from '@nebular/theme';
 import { takeWhile } from 'rxjs/operators';
 
-import { TrafficList } from '../../../../@core/data/traffic-list.service';
+import { TrafficList } from '../../../../@core/data/traffic-list';
 
 @Component({
   selector: 'ngx-traffic-front-card',

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

@@ -1,7 +1,7 @@
 import { Component, OnDestroy } from '@angular/core';
-import { TrafficList, TrafficListService } from '../../../@core/data/traffic-list.service';
+import { TrafficList, TrafficListData } from '../../../@core/data/traffic-list';
+import { TrafficBarData, TrafficBar } from '../../../@core/data/traffic-bar';
 import { takeWhile } from 'rxjs/operators';
-import { TrafficBar, TrafficBarService } from '../../../@core/data/traffic-bar.service';
 
 @Component({
   selector: 'ngx-traffic-reveal-card',
@@ -17,8 +17,8 @@ export class TrafficRevealCardComponent implements OnDestroy {
   revealed = false;
   period: string = 'week';
 
-  constructor(private trafficListService: TrafficListService,
-              private trafficBarService: TrafficBarService) {
+  constructor(private trafficListService: TrafficListData,
+              private trafficBarService: TrafficBarData) {
     this.getTrafficFrontCardData(this.period);
     this.getTrafficBackCardData(this.period);
   }

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

@@ -2,7 +2,7 @@ import { Component, OnDestroy } from '@angular/core';
 import { NbThemeService } from '@nebular/theme';
 import { takeWhile } from 'rxjs/operators';
 
-import { UserActivityService, UserActive } from '../../../@core/data/user-activity.service';
+import { UserActivityData, UserActive } from '../../../@core/data/user-activity';
 
 @Component({
   selector: 'ngx-user-activity',
@@ -59,7 +59,7 @@ export class ECommerceUserActivityComponent implements OnDestroy {
   currentTheme: string;
 
   constructor(private themeService: NbThemeService,
-              private userActivityService: UserActivityService) {
+              private userActivityService: UserActivityData) {
     this.themeService.getJsTheme()
       .pipe(takeWhile(() => this.alive))
       .subscribe(theme => {

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

@@ -2,7 +2,7 @@ import { delay, takeWhile } from 'rxjs/operators';
 import { AfterViewInit, Component, Input, OnDestroy } from '@angular/core';
 import { NbThemeService } from '@nebular/theme';
 import { LayoutService } from '../../../../@core/utils';
-import { OutlineData } from '../../../../@core/data/visitors-analytics.service';
+import { OutlineData } from '../../../../@core/data/visitors-analytics';
 
 @Component({
   selector: 'ngx-visitors-analytics-chart',

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

@@ -1,7 +1,7 @@
 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 { OutlineData, VisitorsAnalyticsData } from '../../../@core/data/visitors-analytics';
 import { forkJoin } from 'rxjs';
 
 
@@ -18,7 +18,7 @@ export class ECommerceVisitorsAnalyticsComponent implements OnDestroy {
   visitorsAnalyticsData: { innerLine: number[]; outerLine: OutlineData[]; };
 
   constructor(private themeService: NbThemeService,
-              private visitorsAnalyticsChartService: VisitorsAnalyticsService) {
+              private visitorsAnalyticsChartService: VisitorsAnalyticsData) {
     this.themeService.getJsTheme()
       .pipe(takeWhile(() => this.alive))
       .subscribe(theme => {

src/app/pages/tables/smart-table/smart-table.component.ts

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 import { LocalDataSource } from 'ng2-smart-table';
 
-import { SmartTableService } from '../../../@core/data/smart-table.service';
+import { SmartTableData } from '../../../@core/data/smart-table';
 
 @Component({
   selector: 'ngx-smart-table',
@@ -59,7 +59,7 @@ export class SmartTableComponent {
 
   source: LocalDataSource = new LocalDataSource();
 
-  constructor(private service: SmartTableService) {
+  constructor(private service: SmartTableData) {
     const data = this.service.getData();
     this.source.load(data);
   }

src/app/pages/tables/tables.module.ts

@@ -3,7 +3,6 @@ import { Ng2SmartTableModule } from 'ng2-smart-table';
 
 import { ThemeModule } from '../../@theme/theme.module';
 import { TablesRoutingModule, routedComponents } from './tables-routing.module';
-import { SmartTableService } from '../../@core/data/smart-table.service';
 
 @NgModule({
   imports: [
@@ -14,8 +13,5 @@ import { SmartTableService } from '../../@core/data/smart-table.service';
   declarations: [
     ...routedComponents,
   ],
-  providers: [
-    SmartTableService,
-  ],
 })
 export class TablesModule { }