Using Angular and Chart.js to build real-time charts

countevents.component.html

<mat-card>
  <mat-card-title>Number of RSVPs created</mat-card-title>
  <mat-card-subtitle
    >Counted number of events created, within every 10 second
    window</mat-card-subtitle
  >
  <mat-card-content>
    <canvas
      baseChart
      width="600"
      height="400"
      [datasets]="countEventsData"
      [chartType]="countEventsChartType"
      [labels]="countEventsLabels"
      [colors]="countEventsColors"
      [options]="countEventsOptions"
    ></canvas>
  </mat-card-content>
</mat-card>

countevents.component.ts

import { Component, OnInit, OnDestroy } from "@angular/core";
import { SseService } from "src/app/services/sse/sse.service";
import { Label, Color } from "ng2-charts";
import { ChartDataSets, ChartOptions } from "chart.js";
import { CountEvents } from "src/app/model/CountEvents.model";
import { Subscription } from "rxjs";

@Component({
  selector: "app-count-events",
  templateUrl: "./count-events.component.html",
  styleUrls: ["./count-events.component.scss"]
})
export class CountEventsComponent implements OnInit, OnDestroy {
  private countEventsSubscription$: Subscription;
  private eventsOnChartLimit = 20;
  countEventsChartType = "line";
  countEventsData: ChartDataSets[] = [
    { data: [], label: "Number of Events", fill: false }
  ];
  countEventsLabels: Label[] = [];
  countEventsColors: Color[] = [
    {
      borderColor: "#039BE5",
      pointBackgroundColor: "#039BE5"
    }
  ];
  countEventsOptions: ChartOptions = {
    animation: {
      duration: 0
    }
  };
  constructor(private sseService: SseService) {}
  ngOnInit() {
    this.countEventsSubscription$ = this.sseService
      .getServerSentEvent("http://localhost:8082/count-events")
      .subscribe(event => {
        let data = JSON.parse(event.data);
        this.pushEventToChartData(data);
      });
  }
  private pushEventToChartData(event: CountEvents): void {
    if (this.isChartDataFull(this.countEventsData, 20)) {
      this.removeLastElementFromChartDataAndLabel();
    }
    this.countEventsData[0].data.push(event.count);
    this.countEventsLabels.push(
      this.getLabel(event)
    );
  }
  private getLabel(event: CountEvents): string {
    return `${event.window}`;
  }
  private removeLastElementFromChartDataAndLabel(): void {
    this.countEventsData[0].data = this.countEventsData[0].data.slice(1);
    this.countEventsLabels = this.countEventsLabels.slice(1);
  }
  private isChartDataFull(chartData: ChartDataSets[], limit: number): boolean {
    return chartData[0].data.length >= limit;
  }
  ngOnDestroy() {
    this.countEventsSubscription$.unsubscribe();
  }
}

sse.service.ts

  
import { Injectable, NgZone } from "@angular/core";
import { Observable } from "rxjs";

@Injectable({
  providedIn: "root"
})
export class SseService {
  constructor(private _zone: NgZone) {}

  getServerSentEvent(url: string): Observable<any> {
    return Observable.create(observer => {
      const eventSource = this.getEventSource(url);

      eventSource.onmessage = event => {
        this._zone.run(() => {
          observer.next(event);
        });
      };

      eventSource.onerror = error => {
        this._zone.run(() => {
          observer.error(error);
        });
      };
    });
  }

  private getEventSource(url: string): EventSource {
    return new EventSource(url);
  }
}

Where is your src/app/model/CountEvents.model? Can you share this model? Thanks.

Where is your src/app/model/CountEvents.model? Can you share this model? Thanks.

Sure, you can find the snipper below :)

export interface CountEvents {
  _id: string;
  count: number;
  window: {
    start: string;
    end: string;
  };
}

good Morning how can i make a spring boot controller please

Hi,
I am new to Angular and really liked this concept.
I am not able to find the entre source code or maybe i am not able to setup.
Please can you share the project.
Thanks