Inside an Insurance Telematics Dashboard: Signals + SignalStore, WebSocket KPIs, and Role‑Based Views That Scale

When a Million Trips Hit Your Dashboard at Once

I led the rewrite on Angular 20+ using Signals and SignalStore, PrimeNG for UI, Nx for structure, and typed WebSockets for the stream. We separated concerns: typed ingestion, a resilient realtime store, derived KPIs, and role-based views. That alone removed most of the jitter and confusion.

Why Real-Time Telematics Dashboards Matter to Insurance Teams in 2025

Architecture in Angular 20+: Signals, SignalStore, and Typed Telemetry

TypeScript (SignalStore)

Code: SignalStore for Telemetry KPIs and Reconnect

import { computed } from '@angular/core';
import { patchState, signalStore, withMethods, withState } from '@ngrx/signals';
import { webSocket, WebSocketSubject } from 'rxjs/webSocket';
import { catchError, retry } from 'rxjs/operators';
import { of } from 'rxjs';

export type TelemetryEvent = {
  ts: number; vin: string; speed: number; accel: number;
  harshBrake: boolean; location: { lat: number; lng: number };
};

interface TelemetryState {
  connected: boolean;
  events: TelemetryEvent[];              // capped global buffer
  byVin: Record<string, TelemetryEvent[]>; // capped per-VIN buffers
}

const initialState: TelemetryState = { connected: false, events: [], byVin: {} };

export const TelemetryStore = signalStore(
  { providedIn: 'root' },
  withState(initialState),
  withMethods((store) => {
    let socket: WebSocketSubject<TelemetryEvent> | undefined;

    const connect = (url: string) => {
      socket = webSocket<TelemetryEvent>({ url, deserializer: e => JSON.parse(e.data) });
      socket.pipe(
        retry({ delay: (_err, i) => Math.min(1000 * 2 ** i, 15000) })
      ).subscribe({
        next: (evt) => {
          patchState(store, {
            connected: true,
            events: [...store.events(), evt].slice(-5000),
            byVin: {
              ...store.byVin(),
              [evt.vin]: [...(store.byVin()[evt.vin] ?? []), evt].slice(-500)
            }
          });
        },
        error: () => patchState(store, { connected: false }),
        complete: () => patchState(store, { connected: false })
      });
    };

    const disconnect = () => { socket?.complete(); patchState(store, { connected: false }); };

    const harshBrakeRate5m = computed(() => {
      const cutoff = Date.now() - 5 * 60_000;
      const recent = store.events().filter(e => e.ts > cutoff);
      const brakes = recent.filter(e => e.harshBrake).length;
      const trips = new Set(recent.map(e => e.vin)).size || 1;
      return +(brakes / trips).toFixed(3);
    });

    const avgSpeed1k = computed(() => {
      const sample = store.events().slice(-1000).map(e => e.speed);
      return sample.length ? sample.reduce((a,b)=>a+b,0)/sample.length : 0;
    });

    const kpi = computed(() => ({ harshBrakeRate5m: harshBrakeRate5m(), avgSpeed1k: avgSpeed1k() }));

    return { connect, disconnect, kpi };
  })
);

Code: Virtualization and Role-Based Routing

<p-card header="Fleet KPIs">
  <div class="kpi-grid">
    <div class="kpi">
      <span class="label">Harsh Brake Rate (5m)</span>
      <span class="value" [class.bad]="store.kpi().harshBrakeRate5m > 0.12">
        {{ store.kpi().harshBrakeRate5m | percent:'1.0-2' }}
      </span>
    </div>
    <p-chart type="line" [data]="speedData()" [options]="chartOpts"></p-chart>
  </div>
</p-card>

<p-table [value]="events()" [virtualScroll]="true" [rows]="50" [scrollHeight]="'400px'">
  <ng-template pTemplate="header">
    <tr><th>VIN</th><th>Speed</th><th>Time</th></tr>
  </ng-template>
  <ng-template pTemplate="body" let-row>
    <tr>
      <td>{{ row.vin }}</td>
      <td>{{ row.speed }}</td>
      <td>{{ row.ts | date:'shortTime' }}</td>
    </tr>
  </ng-template>
</p-table>

// routes.ts
import { Routes, CanMatch, Route } from '@angular/router';
import { Injectable } from '@angular/core';

export const routes: Routes = [
  { path: 'driver', loadComponent: () => import('./driver').then(m => m.DriverView), data: { roles: ['driver'] } },
  { path: 'fleet', loadComponent: () => import('./fleet').then(m => m.FleetView), data: { roles: ['manager'] } },
  { path: 'underwriting', loadComponent: () => import('./uw').then(m => m.UwView), data: { roles: ['underwriter','actuary'] } },
];

@Injectable({ providedIn: 'root' })
export class RbacGuard implements CanMatch {
  constructor(private auth: AuthService) {}
  canMatch(route: Route) {
    const roles = (route.data?.['roles'] as string[]) ?? [];
    return roles.some(r => this.auth.hasRole(r));
  }
}

Case Notes: From Jittery Charts to Coachable KPIs

Observability, CI, and Safe Deploys

name: ci
on:
  push:
    branches: [main]
  pull_request:
jobs:
  build-test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v3
        with: { version: 9 }
      - run: pnpm install
      - run: npx nx affected -t lint test build --parallel=3
  lighthouse:
    needs: build-test
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: pnpm dlx @lhci/cli autorun --upload.target=temporary-public-storage

When to Hire an Angular Developer for Legacy Rescue

Related: see how we stabilize vibe-coded apps with Nx and Signals at gitPlumbers (70% delivery velocity increase).

Measurable Results and What to Instrument Next

If you’re planning a 2025 roadmap and need a remote Angular developer with Fortune 100 experience, let’s talk about Signals adoption, typed streams, and safe rollouts.

FAQs: Insurance Telematics + Angular

Q: How long does a telematics dashboard take to build? A: 6–10 weeks for MVP with real-time KPIs if APIs exist; 4–8 more for RBAC and production hardening.

Q: Do we need NgRx? A: For real-time views I prefer Signals + SignalStore; NgRx still fits for audit-heavy workflows.

Q: Can you work with .NET or Node backends? A: Yes—I've shipped both, plus Firebase for analytics and previews.