moving to faker stream to prep for signalr

src/app/products/config.ts

@@ -1,3 +1,13 @@
 export const defaultColor: string = 'horizon';
 
-export const hours: string[] = ['Maintenance', 'Production', 'Downtime', 'Scheduled']
+export const hours: string[] = ['Maintenance', 'Production', 'Downtime', 'Scheduled']
+
+export enum Status {
+    Up = "Up",
+    Down = "Down",
+    Stop = "Off",
+}
+export interface LightStatus {
+    name?: string
+    value?: number
+}

src/app/products/light-status/light-status.component.ts

@@ -1,19 +1,15 @@
-import { ContentObserver } from '@angular/cdk/observers';
-import { Component, OnInit } from '@angular/core';
-import { colorSets, MultiSeries, Color } from '@swimlane/ngx-charts';
-import { interval, Subscription } from 'rxjs';
-import { defaultColor } from '../config';
-enum Status {
-  Up = "Up",
-  Down = "Down",
-  Stop = "Off",
-}
+import { AfterContentInit, Component, OnDestroy, OnInit } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { Status } from '../config';
+import { FakerService } from '../services/faker.service';
+
+
 @Component({
   selector: 'cd-light-status',
   templateUrl: './light-status.component.html',
   styleUrls: ['./light-status.component.scss']
 })
-export class LightStatusComponent implements OnInit {
+export class LightStatusComponent implements OnInit, OnDestroy, AfterContentInit {
   multi!: any[];
   // options
   showXAxis: boolean = true;
@@ -32,114 +28,29 @@ export class LightStatusComponent implements OnInit {
   subscription!: Subscription;
   status = [Status.Up, Status.Stop, Status.Down];
 
+  newLightStatus$ = this.fakerService.newLightStatus$
+    .subscribe((val) => this.multi = [...this.multi, val]);
+
   maxLength: number = 100;
-  constructor() {
-    this.multi = this.getData();
 
+  constructor(private fakerService: FakerService) { }
+  ngAfterContentInit(): void {
+    this.fakerService.generateFakeLightStatus();
+    this.fakerService.startFakeLightStatusStream();
+  }
+  ngOnDestroy(): void {
+    this.fakerService.stopFakeLightStatusGeneration();
   }
   formatDate(date: string) {
     const monday = new Date(date);
     return monday.getSeconds();
   }
   ngOnInit(): void {
-    this.subscription = interval(1500).subscribe(() => this.multi = this.updateData());
+    this.multi = this.fakerService.getData();
   }
 
-  updateData(): MultiSeries {
-    const currentDate = new Date(this.seed,
-      Math.floor(Math.random() * 12),
-      Math.floor(Math.random() * 30),
-      Math.floor(Math.random() * 24),
-      Math.floor(Math.random() * 60),
-      Math.floor(Math.random() * 60))
-
-    if (this.multi.length > this.maxLength)
-      this.multi.shift()
-
-    const newEntry = {
-      name: currentDate.toLocaleString(),
-      series: [
-        {
-          name: Status.Up,
-          value: 0,
-        },
-        {
-          name: Status.Stop,
-          value: 0,
-        },
-        {
-          name: Status.Down,
-          value: 0,
-        }
-      ]
-    }
-    const index = Math.floor(Math.random() * 3);
-    newEntry.series[index].value = 1;
-    this.seed += 1;
-
-    return [...this.multi, newEntry];
-  }
   onSelect(event: any) {
     console.log(event);
   }
-  getData(): MultiSeries {
 
-    const first = new Date(2011, 10, 30, 1, 10, 10).toLocaleString();
-    const second = new Date(2012, 10, 30, 1, 11, 10).toLocaleString();
-    const third = new Date(2013, 10, 30, 1, 12, 10).toLocaleString();
-    return [
-      {
-        "name": first,
-        "series": [
-          {
-            "name": Status.Up,
-            "value": 1
-          },
-          {
-            "name": Status.Stop,
-            "value": 0
-          },
-          {
-            "name": Status.Down,
-            "value": 0
-          }
-        ]
-      },
-
-      {
-        "name": second,
-        "series": [
-          {
-            "name": Status.Up,
-            "value": 0
-          },
-          {
-            "name": Status.Stop,
-            "value": 1
-          },
-          {
-            "name": Status.Down,
-            "value": 0
-          }
-        ]
-      },
-
-      {
-        "name": third,
-        "series": [
-          {
-            "name": Status.Up,
-            "value": 1
-          },
-          {
-            "name": Status.Stop,
-            "value": 0
-          },
-          {
-            "name": Status.Down,
-            "value": 0
-          }
-        ]
-      }]
-  }
 }

src/app/products/product-bar-chart/product-bar-chart.component.ts

@@ -27,6 +27,8 @@ export class ProductBarChartComponent implements OnInit, OnDestroy, AfterContent
   colorScheme: any;
   subscription!: Subscription;
   view: [number, number] | undefined;
+
+
   constructor(private orderService: OrderService) {
     this.setColorScheme(defaultColor);
 
@@ -44,7 +46,6 @@ export class ProductBarChartComponent implements OnInit, OnDestroy, AfterContent
   ngOnInit(): void {
     this.subscription = interval(1000)
       .pipe(
-        tap(x => console.log(x)),
         switchMap(val => this.getDataSource())
       ).subscribe(result => this.single = [...result]);
   }
@@ -55,7 +56,7 @@ export class ProductBarChartComponent implements OnInit, OnDestroy, AfterContent
     console.log(event);
   }
   getDataSource() {
-    const data: any[] = [];
+
     return this.orderService.getRandomOrders(10)
       .pipe(
         mergeMap(res => res),

src/app/products/services/faker.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { FakerService } from './faker.service';
+
+describe('FakerService', () => {
+  let service: FakerService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(FakerService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/products/services/faker.service.ts

@@ -0,0 +1,118 @@
+import { Injectable } from '@angular/core';
+import { MultiSeries, Series } from '@swimlane/ngx-charts';
+import { interval, Subject, Subscription } from 'rxjs';
+import { LightStatus, Status } from '../config';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class FakerService {
+
+
+  private newLightStatusSubject = new Subject<Series>();
+
+  newLightStatus$ = this.newLightStatusSubject.asObservable();
+
+  private ligthStatusSubscription = new Subscription();
+
+  private seed: number = 2014;
+
+  constructor() { }
+
+  startFakeLightStatusStream() {
+    this.ligthStatusSubscription =
+      interval(1000).subscribe(() => this.generateFakeLightStatus());
+  }
+  stopFakeLightStatusGeneration() {
+    this.ligthStatusSubscription.unsubscribe()
+  }
+  generateFakeLightStatus(): void {
+    const currentDate = new Date(this.seed,
+      Math.floor(Math.random() * 12),
+      Math.floor(Math.random() * 30),
+      Math.floor(Math.random() * 24),
+      Math.floor(Math.random() * 60),
+      Math.floor(Math.random() * 60))
+
+    const newEntry = {
+      name: currentDate.toLocaleString(),
+      series: [
+        {
+          name: Status.Up,
+          value: 0,
+        },
+        {
+          name: Status.Stop,
+          value: 0,
+        },
+        {
+          name: Status.Down,
+          value: 0,
+        }
+      ]
+    }
+    const index = Math.floor(Math.random() * 3);
+    newEntry.series[index].value = 1;
+    this.newLightStatusSubject.next(newEntry);
+  }
+  getData(): MultiSeries {
+
+    const first = new Date(2011, 10, 30, 1, 10, 10).toLocaleString();
+    const second = new Date(2012, 10, 30, 1, 11, 10).toLocaleString();
+    const third = new Date(2013, 10, 30, 1, 12, 10).toLocaleString();
+    return [
+      {
+        "name": first,
+        "series": [
+          {
+            "name": Status.Up,
+            "value": 1
+          },
+          {
+            "name": Status.Stop,
+            "value": 0
+          },
+          {
+            "name": Status.Down,
+            "value": 0
+          }
+        ]
+      },
+
+      {
+        "name": second,
+        "series": [
+          {
+            "name": Status.Up,
+            "value": 0
+          },
+          {
+            "name": Status.Stop,
+            "value": 1
+          },
+          {
+            "name": Status.Down,
+            "value": 0
+          }
+        ]
+      },
+
+      {
+        "name": third,
+        "series": [
+          {
+            "name": Status.Up,
+            "value": 1
+          },
+          {
+            "name": Status.Stop,
+            "value": 0
+          },
+          {
+            "name": Status.Down,
+            "value": 0
+          }
+        ]
+      }]
+  }
+}