Merge pull request #14 from ESadouski/ESad/live_data

feat(ecDashboard): update earning chert with live data

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

@@ -1,8 +1,8 @@
 import { Injectable } from '@angular/core';
-import { of as observableOf,  Observable } from 'rxjs';
+import { of as observableOf, Observable } from 'rxjs';
 
 export class LiveUpdateChart {
-  liveChart: number[];
+  liveChart: {value: [string, number]}[];
   delta: {
     up: boolean;
     value: number;
@@ -18,11 +18,9 @@ export class PieChart {
 @Injectable()
 export class EarningService {
 
-  private getRandomData(nPoints: number): number[] {
-    return Array.from(Array(nPoints)).map(() => {
-      return Math.round(Math.random() * 1000);
-    });
-  }
+  private currentDate: Date = new Date();
+  private currentValue = Math.random() * 1000;
+  private ONE_DAY = 24 * 3600 * 1000;
 
   private pieChartData = [
     {
@@ -66,16 +64,42 @@ export class EarningService {
     },
   };
 
+  getDefaultLiveChartData(elementsNumber: number) {
+    this.currentDate = new Date();
+    this.currentValue = Math.random() * 1000;
+
+    return Array.from(Array(elementsNumber))
+      .map(item => this.generateRandomLiveChartData());
+  }
+
+  generateRandomLiveChartData() {
+    this.currentDate = new Date(+this.currentDate + this.ONE_DAY);
+    this.currentValue = this.currentValue + Math.random() * 21 - 10;
+
+    return {
+      value: [
+        [this.currentDate.getFullYear(), this.currentDate.getMonth(), this.currentDate.getDate()].join('/'),
+        Math.round(this.currentValue),
+      ],
+    }
+  }
+
   generateRandomEarningLiveUpdateChartData(currency) {
     const data = this.liveUpdateChartData[currency.toLowerCase()];
+    const newValue = this.generateRandomLiveChartData();
 
-    data.liveChart = this.getRandomData(12);
+    data.liveChart.shift();
+    data.liveChart.push(newValue);
 
-    return data;
+    return observableOf(data.liveChart);
   }
 
-  getEarningLiveUpdateChartData(currency: string): Observable<LiveUpdateChart> {
-    return observableOf(this.generateRandomEarningLiveUpdateChartData(currency));
+  getEarningLiveUpdateCardData(currency: string) {
+    const data = this.liveUpdateChartData[currency.toLowerCase()];
+
+    data.liveChart = this.getDefaultLiveChartData(100);
+
+    return observableOf(data);
   }
 
   getEarningPieChartData(): Observable<PieChart[]> {

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

@@ -13,13 +13,13 @@
 <nb-card-body>
   <div class="chart-info">
     <div class="title">Daily Income</div>
-    <div class="value">{{ earningLiveUpdateChartData.dailyIncome | ngxNumberWithCommas }}</div>
+    <div class="value">{{ earningLiveUpdateCardData.dailyIncome | ngxNumberWithCommas }}</div>
     <div class="delta"
-         [class.up]="earningLiveUpdateChartData.delta.up"
-         [class.down]="!earningLiveUpdateChartData.delta.up">
-      {{ earningLiveUpdateChartData.delta.value }}%
+         [class.up]="earningLiveUpdateCardData.delta.up"
+         [class.down]="!earningLiveUpdateCardData.delta.up">
+      {{ earningLiveUpdateCardData.delta.value }}%
     </div>
   </div>
-  <ngx-earning-live-update-chart [liveUpdateChartData]="earningLiveUpdateChartData.liveChart">
+  <ngx-earning-live-update-chart [liveUpdateChartData]="liveUpdateChartData">
   </ngx-earning-live-update-chart>
 </nb-card-body>

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

@@ -1,4 +1,4 @@
-import { Component, Input, OnDestroy } from '@angular/core';
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { NbThemeService } from '@nebular/theme';
 import { takeWhile } from 'rxjs/operators';
 import { EarningService, LiveUpdateChart } from '../../../../@core/data/earning.service';
@@ -8,14 +8,16 @@ import { EarningService, LiveUpdateChart } from '../../../../@core/data/earning.
   styleUrls: ['./earning-card-front.component.scss'],
   templateUrl: './earning-card-front.component.html',
 })
-export class EarningCardFrontComponent implements OnDestroy {
+export class EarningCardFrontComponent implements OnDestroy, OnInit {
   private alive = true;
 
   @Input() selectedCurrency: string = 'Bitcoin';
 
   currencies: string[] = ['Bitcoin', 'Tether', 'Ethereum'];
   currentTheme: string;
-  earningLiveUpdateChartData: LiveUpdateChart;
+  earningLiveUpdateCardData: LiveUpdateChart;
+  liveUpdateChartData: {value: [string, number]}[];
+  timeTicket: any;
 
 
   constructor(private themeService: NbThemeService,
@@ -24,28 +26,47 @@ export class EarningCardFrontComponent implements OnDestroy {
       .pipe(takeWhile(() => this.alive))
       .subscribe(theme => {
         this.currentTheme = theme.name;
-
-        this.getEarningLiveUpdateChartData(this.selectedCurrency);
       });
   }
 
+  ngOnInit() {
+    this.getEarningCardData(this.selectedCurrency);
+  }
+
   changeCurrency(currency) {
     if (this.selectedCurrency !== currency) {
       this.selectedCurrency = currency;
 
-      this.getEarningLiveUpdateChartData(currency);
+      this.getEarningCardData(this.selectedCurrency);
     }
   }
 
-  getEarningLiveUpdateChartData(currency: string) {
-    this.earningService.getEarningLiveUpdateChartData(currency)
+  private getEarningCardData(currency) {
+    this.earningService.getEarningLiveUpdateCardData(currency)
       .pipe(takeWhile(() => this.alive))
-      .subscribe((earningLiveUpdateChartData) => {
-        this.earningLiveUpdateChartData = earningLiveUpdateChartData;
+      .subscribe((earningLiveUpdateCardData) => {
+        this.earningLiveUpdateCardData = earningLiveUpdateCardData;
+        this.liveUpdateChartData = earningLiveUpdateCardData.liveChart;
+
+        this.startReceivingLiveData(currency);
       });
   }
 
+  startReceivingLiveData(currency) {
+    clearInterval(this.timeTicket);
+
+    this.timeTicket = setInterval( () => {
+      this.earningService.generateRandomEarningLiveUpdateChartData(currency)
+        .pipe(takeWhile(() => this.alive))
+        .subscribe((liveUpdateChartData) => {
+          this.liveUpdateChartData = [...liveUpdateChartData];
+        });
+    }, 100);
+  }
+
   ngOnDestroy() {
     this.alive = false;
+
+    clearInterval(this.timeTicket);
   }
 }

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

@@ -18,14 +18,11 @@ export class EarningLiveUpdateChartComponent implements AfterViewInit, OnDestroy
   @Input() liveUpdateChartData: number[];
 
   option: any;
-  themeSubscription: any;
-  timeTicket: any;
   echartsInstance;
 
   constructor(private theme: NbThemeService) {
   }
 
-
   ngOnChanges(): void {
     if (this.option) {
       this.updateChartOptions(this.liveUpdateChartData);
@@ -37,39 +34,16 @@ export class EarningLiveUpdateChartComponent implements AfterViewInit, OnDestroy
   }
 
   ngAfterViewInit() {
-    this.themeSubscription = this.theme.getJsTheme()
+    this.theme.getJsTheme()
       .pipe(
         delay(1),
         takeWhile(() => this.alive),
       )
       .subscribe(config => {
         const earningLineTheme: any = config.variables.earningLine;
 
-        clearInterval(this.timeTicket);
-
         this.setChartOption(earningLineTheme);
-        this.appendRandomData();
-    });
-  }
-
-  appendRandomData() {
-    // TODO: move from this file, set new data as input
-    const newPoints = [...this.liveUpdateChartData];
-
-    this.timeTicket = setInterval( () => {
-      const max = 500;
-      const min = 300;
-      const newItem = Math.floor(Math.random() * (max - min + 1) + min);
-
-      newPoints.shift();
-      newPoints.push(newItem);
-
-      this.echartsInstance.setOption({
-        series: [{
-          data: newPoints,
-        }],
       });
-    }, 700);
   }
 
   setChartOption(earningLineTheme) {
@@ -81,9 +55,19 @@ export class EarningLiveUpdateChartComponent implements AfterViewInit, OnDestroy
         bottom: 0,
       },
       xAxis: {
-        type: 'category',
-        boundaryGap: false,
-        data: this.liveUpdateChartData,
+        type: 'time',
+        axisLine: {
+          show: false,
+        },
+        axisLabel: {
+          show: false,
+        },
+        axisTick: {
+          show: false,
+        },
+        splitLine: {
+          show: false,
+        },
       },
       yAxis: {
         boundaryGap: [0, '5%'],
@@ -142,20 +126,14 @@ export class EarningLiveUpdateChartComponent implements AfterViewInit, OnDestroy
   }
 
   updateChartOptions(chartData: number[]) {
-    clearInterval(this.timeTicket);
-
     this.echartsInstance.setOption({
       series: [{
         data: chartData,
       }],
     });
-
-    this.appendRandomData();
   }
 
   ngOnDestroy() {
     this.alive = false;
-
-    clearInterval(this.timeTicket);
   }
 }