Example of using LightningChart JS in Angular project

Author: Niilo Keinänen

.gitignore

@@ -1,5 +1,7 @@
 # See http://help.github.com/ignore-files/ for more about ignoring files.
 
+node_modules
+
 # Compiled output
 /dist
 /tmp

.npmrc

@@ -0,0 +1,2 @@
+registry=https://registry.npmjs.org
+@arction:registry=https://registry.npmjs.org

README.md

@@ -1,6 +1,15 @@
-# LcjsNgExample
+# LightningChart JS x Angular example
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.2.1.
+- Project generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.2.1
+  - Server side rendering and static site generation enabled.
+- Run adjacent test server with `cd test-server && npm i && node index`
+- Run with `ng serve` (requires globally installed Angular CLI), and open at http://localhost:4200.
+
+For more information, please see [Angular x LightningChart JS documentation](https://lightningchart.com/js-charts/docs/frameworks/angular)
+
+---
+
+All below documentation was automatically generated by Angular CLI:
 
 ## Development server
 

package-lock.json

@@ -21,6 +21,7 @@
     "@angular/platform-server": "^17.2.0",
     "@angular/router": "^17.2.0",
     "@angular/ssr": "^17.2.1",
+    "@arction/lcjs": "^5.1.1",
     "express": "^4.18.2",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
@@ -41,4 +42,4 @@
     "karma-jasmine-html-reporter": "~2.1.0",
     "typescript": "~5.3.2"
   }
-}
+}

package.json

@@ -51,9 +51,9 @@
     line-height: 100%;
     letter-spacing: -0.125rem;
     margin: 0;
-    font-family: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-      Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
-      "Segoe UI Symbol";
+    font-family: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI",
+      Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji",
+      "Segoe UI Emoji", "Segoe UI Symbol";
   }
 
   p {
@@ -226,37 +226,32 @@
         </defs>
       </svg>
       <h1>Hello, {{ title }}</h1>
-      <p>Congratulations! Your app is running. 🎉</p>
+      <app-chart></app-chart>
     </div>
     <div class="divider" role="separator" aria-label="Divider"></div>
     <div class="right-side">
       <div class="pill-group">
-        @for (item of [
-          { title: 'Explore the Docs', link: 'https://angular.dev' },
-          { title: 'Learn with Tutorials', link: 'https://angular.dev/tutorials' },
-          { title: 'CLI Docs', link: 'https://angular.dev/tools/cli' },
-          { title: 'Angular Language Service', link: 'https://angular.dev/tools/language-service' },
-          { title: 'Angular DevTools', link: 'https://angular.dev/tools/devtools' },
-        ]; track item.title) {
-          <a
-            class="pill"
-            [href]="item.link"
-            target="_blank"
-            rel="noopener"
+        @for (item of [ { title: 'Explore the Docs', link: 'https://angular.dev'
+        }, { title: 'Learn with Tutorials', link:
+        'https://angular.dev/tutorials' }, { title: 'CLI Docs', link:
+        'https://angular.dev/tools/cli' }, { title: 'Angular Language Service',
+        link: 'https://angular.dev/tools/language-service' }, { title: 'Angular
+        DevTools', link: 'https://angular.dev/tools/devtools' }, ]; track
+        item.title) {
+        <a class="pill" [href]="item.link" target="_blank" rel="noopener">
+          <span>{{ item.title }}</span>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            height="14"
+            viewBox="0 -960 960 960"
+            width="14"
+            fill="currentColor"
           >
-            <span>{{ item.title }}</span>
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              height="14"
-              viewBox="0 -960 960 960"
-              width="14"
-              fill="currentColor"
-            >
-              <path
-                d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z"
-              />
-            </svg>
-          </a>
+            <path
+              d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z"
+            />
+          </svg>
+        </a>
         }
       </div>
       <div class="social-links">
@@ -332,5 +327,4 @@ <h1>Hello, {{ title }}</h1>
 <!-- * * * * * * * * * * End of Placeholder  * * * * * * * * * * * * -->
 <!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
 
-
 <router-outlet />

src/app/app.component.html

@@ -1,12 +1,13 @@
 import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
+import { ChartComponent } from './components/chart/chart.component';
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet],
+  imports: [RouterOutlet, ChartComponent],
   templateUrl: './app.component.html',
-  styleUrl: './app.component.css'
+  styleUrl: './app.component.css',
 })
 export class AppComponent {
   title = 'lcjs-ng-example';

src/app/app.component.ts

@@ -0,0 +1,4 @@
+div {
+  width: 100%;
+  height: 40vh;
+}

src/app/components/chart/chart.component.css

@@ -0,0 +1 @@
+<div [id]="this.containerId"></div>

src/app/components/chart/chart.component.html

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ChartComponent } from './chart.component';
+
+describe('ChartComponent', () => {
+  let component: ChartComponent;
+  let fixture: ComponentFixture<ChartComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ChartComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(ChartComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/chart/chart.component.spec.ts

@@ -0,0 +1,57 @@
+import { Component, OnDestroy, afterNextRender } from '@angular/core';
+import { AxisScrollStrategies, Themes } from '@arction/lcjs';
+import { DataService } from '../../services/data/data.service';
+import { LcContextService } from '../../services/lc-context/lc-context.service';
+
+@Component({
+  selector: 'app-chart',
+  standalone: true,
+  imports: [],
+  templateUrl: './chart.component.html',
+  styleUrl: './chart.component.css',
+})
+export class ChartComponent implements OnDestroy {
+  containerId: string = '';
+  destroyLC?: () => unknown;
+
+  constructor(dataService: DataService, lcContextService: LcContextService) {
+    // Generate random ID to us as the containerId for the chart and the target div id
+    this.containerId = (Math.random() * 1_000_000_000).toFixed(0);
+
+    // Only in browser (not server side); initialize LightningChart JS components
+    afterNextRender(() => {
+      const lc = lcContextService.getLightningChartContext();
+      const container = document.getElementById(
+        this.containerId
+      ) as HTMLDivElement;
+      const chart = lc.ChartXY({ container, theme: Themes.light });
+      const axisX = chart
+        .getDefaultAxisX()
+        .setScrollStrategy(AxisScrollStrategies.progressive)
+        .setDefaultInterval((state) => ({
+          end: state.dataMax ?? 0,
+          start: (state.dataMax ?? 0) - 100,
+          stopAxisAfter: false,
+        }));
+      const areaSeries = chart
+        .addPointLineAreaSeries({ dataPattern: 'ProgressiveX' })
+        .setMaxSampleCount(10_000);
+
+      const dataObservable = dataService.connect();
+      const dataSubscription = dataObservable.subscribe((value) => {
+        areaSeries.appendSample({ y: value });
+      });
+
+      // Cache function that destroys created LC resources
+      this.destroyLC = () => {
+        // NOTE: Important to dispose `chart` here, instead of `lc`. Otherwise we would dispose the shared LC context which may be used by other LC based components
+        chart.dispose();
+        dataSubscription.unsubscribe();
+      };
+    });
+  }
+
+  ngOnDestroy(): void {
+    if (this.destroyLC) this.destroyLC();
+  }
+}

src/app/components/chart/chart.component.ts

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

src/app/services/data/data.service.spec.ts

@@ -0,0 +1,35 @@
+import { Injectable } from '@angular/core';
+import { Observable, Observer } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class DataService {
+  private observable?: Observable<number>;
+
+  constructor() {}
+
+  public connect(): Observable<number> {
+    if (!this.observable) {
+      this.observable = this.create();
+    }
+    return this.observable;
+  }
+
+  private create(): Observable<number> {
+    const ws = new WebSocket('ws://localhost:4201');
+    ws.onopen = () => {
+      console.log('WS connection successful');
+    };
+    const observable = new Observable((obs: Observer<number>) => {
+      ws.onmessage = (msg) => {
+        const value = Number(msg.data);
+        obs.next(value);
+      };
+      ws.onerror = obs.error.bind(obs);
+      ws.onclose = obs.complete.bind(obs);
+      return ws.close.bind(ws);
+    });
+    return observable;
+  }
+}

src/app/services/data/data.service.ts

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

src/app/services/lc-context/lc-context.service.spec.ts

@@ -0,0 +1,22 @@
+import { Injectable } from '@angular/core';
+import { LightningChart, lightningChart } from '@arction/lcjs';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class LcContextService {
+  private lc?: LightningChart;
+
+  constructor() {}
+
+  public getLightningChartContext() {
+    if (this.lc) return this.lc;
+    this.lc = lightningChart({
+      license:
+        // Place your LCJS license key here
+        // This should originate from a environment variable / secret. In development, license is assigned per developer, whereas in staging/production a deployment license is used.
+        '',
+    });
+    return this.lc;
+  }
+}

src/app/services/lc-context/lc-context.service.ts

@@ -0,0 +1,14 @@
+import { WebSocketServer } from "ws";
+
+const wss = new WebSocketServer({ port: 4201 });
+
+wss.on("connection", async (ws) => {
+  let closed = false;
+  ws.onclose = () => {
+    closed = true;
+  };
+  while (!closed) {
+    ws.send(Math.random() * 11);
+    await new Promise((resolve) => setTimeout(resolve, 1000 / 60));
+  }
+});