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;