Is it possible to continually produce sine wave information using an Angular service and then integrate it into a component?

Question

Is it possible to continually produce sine wave information using an Angular service and then integrate it into a component?

I am working on a component that uses an injected service to fetch static mock data. I want to enhance this by adding the capability to generate new data at various intervals and send this time series data to the component as it is created.

However, I'm struggling to find a way to achieve this.

The only thing I am certain of is that the data object for the component must remain immutable.

If anyone could point me in the right direction, I would greatly appreciate it. At one point, I considered using a service worker, but that seemed excessive for a simple mock-up. In the future, this service will interact with data sources over the internet using streams. But for now, I just need to simulate a stream of data flowing from the service to the component for UI development and prototyping purposes.

plotter.component.ts:

import { Component, OnInit } from '@angular/core';

import { MockDataService } from '../../services/mock-data/mock-data.service';

@Component({
  selector: 'app-plotter',
  templateUrl: './plotter.component.html',
  styleUrls: ['./plotter.component.css']
})
export class PlotterComponent implements OnInit {

  single: any[];
  multi: any[];

  // rt needs to be an immutable object array
  // rt needs to be updated with data from MockDataService
  rt: any[];

  view: any[] = [700, 400];

  // options
  showXAxis = true;
  showYAxis = true;
  gradient = false;
  showLegend = true;
  showXAxisLabel = true;
  xAxisLabel = 'Country';
  showYAxisLabel = true;
  yAxisLabel = 'Population';

  colorScheme = {
    domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA']
  };

  autoScale = true;

  constructor(private mockDataService: MockDataService) {
    this.single = mockDataService.getSingle();
    this.multi = mockDataService.getMulti();
  }

  ngOnInit() {

  }

  onSelect(event) {
    console.log(event);
  }

}

mock-data.service.ts

import { Injectable } from '@angular/core';
import { single, multi } from '../../mock-data/plot-data';

@Injectable({
  providedIn: 'root'
})
export class MockDataService {

  constructor() { }

  getSingle() {
    return single;
  }

  getMulti() {
    return multi;
  }

  // Generate sine wave data here
  sineWave(pAmplitude, pFrequency) {

  }

}

angular typescript

Answer 1

Answer №1

To ensure seamless updates to your arrays, consider storing them in a Subject or BehaviorSubject. By returning this as an Observable and subscribing to it, any changes made using the setter in the service will automatically update the component's copy of the arrays.

plotter.component.ts:

import { Component, OnInit } from '@angular/core';
import { MockDataService } from '../../services/mock-data/mock-data.service';
import { timer, Subscription } from 'rxjs';

@Component({
  selector: 'app-plotter',
  templateUrl: './plotter.component.html',
  styleUrls: ['./plotter.component.css']
})
export class PlotterComponent implements OnInit {
  /*
   The timer function accepts a second argument to determine frequency of value emission.
   In this case, the method calls occur initially after 1 second and subsequent calls happen every 10 seconds.
  */
  const source = timer(1000, 10000);
  let subscription: Subscription;

  single: any[];
  multi: any[];

  pAmplitude: number = 0;
  pFrequency: number = 0;

  // rt should be an immutable object array
  // Update rt with data from MockDataService
  rt: any[];

  view: any[] = [700, 400];

  // options
  showXAxis = true;
  showYAxis = true;
  gradient = false;
  showLegend = true;
  showXAxisLabel = true;
  xAxisLabel = 'Country';
  showYAxisLabel = true;
  yAxisLabel = 'Population';

  colorScheme = {
    domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA']
  };

  // line, area
  autoScale = true;

  constructor(private mockDataService: MockDataService) { }

  ngOnInit() {
      this.mockDataService.getSingle().subscribe( data => {
          this.single = data;
      });

      this.mockDataService.getMulti().subscribe( data => {
          this.multi = data;
      });

      this.startPolling();
  }

  ngOnDestroy(): {
      this.subscription.unsubscribe();
  }

  startPolling(): void {
      this.subscription = source.subscribe(
          () => {
                  // Increment values of both variables then
                  // Invoke the service method passing in the updated variables
                  this.pFrequency += 12;
                  this.pAmplitude += 24;
                  this.mockDataService.sineWave(this.pAmplitude, this.pFrequency); 
                }
      );
  }

  onSelect(event) {
    console.log(event);
  }

}

mock-data.service.ts

import { Injectable } from '@angular/core';
import { single, multi } from '../../mock-data/plot-data';
import { Observable, BehaviorSubject, } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class MockDataService {

  private single: BehaviorSubject<any[]> = new BehaviorSubject([]);
  private multi: BehaviorSubject<any[]> = new BehaviorSubject([]);

  constructor() { 
  }

  getSingle(): Observable<any[]> {
    return single.asObservable();
  }

  setSingle(data: any[]): void {
      this.single.next(data);
  }

  getMulti(): Observable<any[]> {
    return multi.asObservable();
  }

  setMulti(data: any[]): void {
      this.multi.next(data);
  }

  // Generate sine wave data here
  sineWave(pAmplitude, pFrequency) {
      console.log('set new pAmplitude: ', pAmplitude);
      console.log('set new pFrequency: ', pFrequency);
  }

}

Answer 2

To ensure seamless updates to your arrays, consider storing them in a Subject or BehaviorSubject. By returning this as an Observable and subscribing to it, any changes made using the setter in the service will automatically update the component's copy of the arrays.

plotter.component.ts:

import { Component, OnInit } from '@angular/core';
import { MockDataService } from '../../services/mock-data/mock-data.service';
import { timer, Subscription } from 'rxjs';

@Component({
  selector: 'app-plotter',
  templateUrl: './plotter.component.html',
  styleUrls: ['./plotter.component.css']
})
export class PlotterComponent implements OnInit {
  /*
   The timer function accepts a second argument to determine frequency of value emission.
   In this case, the method calls occur initially after 1 second and subsequent calls happen every 10 seconds.
  */
  const source = timer(1000, 10000);
  let subscription: Subscription;

  single: any[];
  multi: any[];

  pAmplitude: number = 0;
  pFrequency: number = 0;

  // rt should be an immutable object array
  // Update rt with data from MockDataService
  rt: any[];

  view: any[] = [700, 400];

  // options
  showXAxis = true;
  showYAxis = true;
  gradient = false;
  showLegend = true;
  showXAxisLabel = true;
  xAxisLabel = 'Country';
  showYAxisLabel = true;
  yAxisLabel = 'Population';

  colorScheme = {
    domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA']
  };

  // line, area
  autoScale = true;

  constructor(private mockDataService: MockDataService) { }

  ngOnInit() {
      this.mockDataService.getSingle().subscribe( data => {
          this.single = data;
      });

      this.mockDataService.getMulti().subscribe( data => {
          this.multi = data;
      });

      this.startPolling();
  }

  ngOnDestroy(): {
      this.subscription.unsubscribe();
  }

  startPolling(): void {
      this.subscription = source.subscribe(
          () => {
                  // Increment values of both variables then
                  // Invoke the service method passing in the updated variables
                  this.pFrequency += 12;
                  this.pAmplitude += 24;
                  this.mockDataService.sineWave(this.pAmplitude, this.pFrequency); 
                }
      );
  }

  onSelect(event) {
    console.log(event);
  }

}

mock-data.service.ts

import { Injectable } from '@angular/core';
import { single, multi } from '../../mock-data/plot-data';
import { Observable, BehaviorSubject, } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class MockDataService {

  private single: BehaviorSubject<any[]> = new BehaviorSubject([]);
  private multi: BehaviorSubject<any[]> = new BehaviorSubject([]);

  constructor() { 
  }

  getSingle(): Observable<any[]> {
    return single.asObservable();
  }

  setSingle(data: any[]): void {
      this.single.next(data);
  }

  getMulti(): Observable<any[]> {
    return multi.asObservable();
  }

  setMulti(data: any[]): void {
      this.multi.next(data);
  }

  // Generate sine wave data here
  sineWave(pAmplitude, pFrequency) {
      console.log('set new pAmplitude: ', pAmplitude);
      console.log('set new pFrequency: ', pFrequency);
  }

}

Is it possible to continually produce sine wave information using an Angular service and then integrate it into a component?

Answer №1

Similar questions

Retrieving array-like form data in a TypeScript file

The import of my library using package.json exports is failing due to TypeScript compilation errors

Exploring the utilization of CSS host selectors with Angular4 to target direct child elements

When utilizing Angular 2, this message is triggered when a function is invoked from the Observable

operating efficiently even when producing an incorrect output type

Unable to set dimensions for an image within an input field using TypeScript

Navigating to a Nested Route in Angular 4

Having trouble adding @angular/fire to my Angular project

Exploring a collection of objects in your Angular 4 Firebase database via iteration

Guide to creating a generic that captures the prop types of a given component

What is the best way to create a props interface that includes state and setState values that are being

Is it necessary to cancel the subscription of httpClient in the component?

Array filtering functions similarly to marketplace filtering tools

What's the best way to add animation to the send icon while hovering over the button?

Angular - Restarting the inactivity redirection feature upon moving to a different page

leveraging the import statement in conjunction with SystemJs

"Troubleshooting: Issue with component not refreshing in app.component.html

Checking for GitHub API connectivity issues with GitHub can be done by verifying whether the GitHub API is

Identifying JavaScript Errors in a Web Page: A Guide to Cypress

Ways to exit a forEach loop when a specific condition is satisfied and obtain a string or break statement