Safe‑Driver KPIs in Angular 20+: Building Real‑Time Insurance Telematics Dashboards with Signals, SignalStore, and Typed WebSockets
A field case study from an insurance technology rollout: real-time vehicle data, role-based views, and measurable UX gains—without slowing delivery.
Real-time KPIs don’t require real-time re-renders. Compute with Signals, render the diff, and you’ll keep charts calm when drivers hit the brakes.Back to all posts
I’ve shipped a few dashboards where charts jitter the moment real vehicles hit the brakes. In this insurance telematics program, that jitter wasn’t cosmetic—adjusters judged claims on those graphs, underwriters priced policies, and drivers saw coaching in near real time. If you’re looking to hire an Angular developer who has been in these trenches, here’s how I stabilized a production telematics UI with Angular 20+, Signals, SignalStore, and typed WebSockets.
Context: As carriers retool for 2025, safe‑driver KPIs and behavioral scoring matter—hard numbers that correlate to loss ratio without making the UI fragile. This case study covers the challenge, the interventions we delivered, and the measurable results for an insurance technology company (names withheld).
Challenge summary: charts stuttered under bursty events, KPIs recomputed too often, and role-based views multiplied complexity. Stakeholders needed daily wins, not rewrites. We kept feature velocity while moving to a Signals-centric architecture, wrapped with Nx, PrimeNG, and Firebase for previews.
Why Telematics Dashboards Falter in Production
Symptoms we saw on day one
The app rendered every event, not every change that mattered. A harsh-brake burst could trigger dozens of chart reflows. Meanwhile, role-based needs (drivers, adjusters, underwriters, executives) forked the code into parallel views, each duplicating state logic.
Chart jitter during braking/accel bursts
Intermittent WebSocket dropouts under cell handoffs
Expensive KPI recomputations causing INP spikes
Role-based screens duplicating logic and drifting
Constraints that matter in insurance
We had to log exactly what KPI a user saw when a decision was made, and we could not leak vehicle or driver identity across tenants. That shaped our RBAC and telemetry storage strategy.
Tenants isolated by policy group and agency
PII-safe event payloads with stable IDs
Auditability for claims and underwriting decisions
Signals, SignalStore, and Typed Events: The KPI Backbone
Here’s a simplified slice of the store that stabilized real-time KPIs and reconnect behavior:
Typed WebSocket events shared across teams
We defined a telemetry event contract in an Nx workspace lib consumed by Angular and Node services. Contract tests ran in CI to guarantee we didn’t ship a breaking change to event shapes.
Schema in a shared Nx lib
Contract tests on CI against backend fixtures
Feature-flagged KPI formulas
Compute KPIs as signals, not imperative updates
Instead of pushing values into charts imperatively, we kept append-only event lists keyed by vehicle, and exposed safe‑driver KPIs as computed signals. Charts read signals; when nothing meaningful changed, nothing rerendered.
State minimalism: append-only event buffers
Derived KPIs as computed signals
Render only the visual diff
Code: Telemetry Store Snippet
// libs/telematics-data/src/lib/models.ts
export type TelemetryEvent = {
vehicleId: string;
ts: number; // epoch ms
speedKph: number;
harshBrake: boolean;
accelG?: number;
lat?: number; lng?: number;
};
export type Role = 'driver' | 'adjuster' | 'underwriter' | 'executive';
// libs/telematics-data/src/lib/telemetry.store.ts
import { Injectable, computed, effect, signal } from '@angular/core';
import { SignalStore, withState, patchState } from '@ngrx/signals';
import { webSocket, WebSocketSubject } from 'rxjs/webSocket';
import { filter, retry, timer } from 'rxjs';
import { TelemetryEvent, Role } from './models';
interface TelemetryState {
eventsByVehicle: Record<string, TelemetryEvent[]>;
connected: boolean;
role: Role;
tenantId: string;
lastSnapshotTs?: number; // for SWR
}
const initial: TelemetryState = {
eventsByVehicle: {},
connected: false,
role: 'executive',
tenantId: 't-unknown'
};
@Injectable({ providedIn: 'root' })
export class TelemetryStore extends SignalStore(withState(initial)) {
private socket?: WebSocketSubject<TelemetryEvent>;
readonly vehicles = computed(() => Object.keys(this.state().eventsByVehicle));
readonly harshBrakeRate = (vehicleId: string) => computed(() => {
const events = this.state().eventsByVehicle[vehicleId] ?? [];
const window = events.filter(e => Date.now() - e.ts < 5 * 60_000);
const harsh = window.filter(e => e.harshBrake).length;
return window.length ? Math.round((harsh / window.length) * 100) : 0; // % of events
});
readonly fleetScore = computed(() => {
// Example score: fewer harsh brakes + lower avg accelG
const ids = Object.keys(this.state().eventsByVehicle);
if (!ids.length) return 100;
const scores = ids.map(id => 100 - this.harshBrakeRate(id)());
return Math.round(scores.reduce((a, b) => a + b, 0) / scores.length);
});
readonly connected = computed(() => this.state().connected);
readonly role = computed(() => this.state().role);
setRole(r: Role) { patchState(this, { role: r }); }
setTenant(t: string) { patchState(this, { tenantId: t }); }
connect(url: string) {
// Backoff with jitter, retry forever; mark connected via signal state
this.socket = webSocket<TelemetryEvent>({ url });
this.socket.pipe(
filter(e => !!e.vehicleId),
// Fallback retry with jitter if the server drops
retry({
delay: (err, retryCount) => timer(Math.min(30000, 500 * 2 ** retryCount) + Math.random() * 500)
})
).subscribe({
next: (e) => {
patchState(this, s => ({
connected: true,
eventsByVehicle: {
...s.eventsByVehicle,
[e.vehicleId]: [...(s.eventsByVehicle[e.vehicleId] ?? []).slice(-500), e]
}
}));
},
error: () => patchState(this, { connected: false }),
complete: () => patchState(this, { connected: false })
});
}
// SWR snapshot refresh: keep UI responsive if websocket lags
refreshSnapshot(fetch: (tenantId: string) => Promise<Record<string, TelemetryEvent[]>>) {
const { tenantId } = this.state();
fetch(tenantId).then(map => patchState(this, {
eventsByVehicle: map,
lastSnapshotTs: Date.now()
}));
}
}SignalStore wiring for safe-driver KPIs
This example shows typed events, exponential backoff reconnects, stale‑while‑revalidate fallback, and role-aware KPI derivation.
Role-Based Views That Don’t Duplicate Logic
ABAC over RBAC where it counts
We used a thin ABAC layer on top of RBAC: claims carried tenant, role, and permitted KPI scopes. Menus and routes keyed off Signals so access decisions were instant and traceable for audits.
Tenant, role, product-tier claims
Context-aware menu rendering
Route-level CanMatch guards in Angular 20
Single KPI engine, multiple UIs
All views read from the same SignalStore. The UI differed, not the math. That eliminated drift and kept compliance validations centralized.
Drivers: coaching cards and trends
Adjusters: incident timelines and event scrubbing
Underwriters: cohort KPIs and loss-ratio overlays
Executives: fleet rollups and SLA health
UX Performance Guardrails: Core Web Vitals and Virtualization
Prevent over-rendering with Signals
Angular DevTools flame charts confirmed we cut chart rerenders by ~60% after moving transformations to computed() and keeping input arrays stable.
Computed KPIs, memoized transforms
PrimeNG charts fed from shallow immutable arrays
Skeleton states and streaming placeholders
Virtualize and aggregate
Data that’s visible gets updated; everything else is summarized until it’s needed. That principle kept INP smooth on fleets with thousands of vehicles.
Top-N vehicle lists, lazy detail fetch
Geo clustering beyond 500 markers
Server-side windows for 24h timelines
Delivery at Enterprise Scale: Nx, CI, Previews, and Contract Tests
Pipeline slice that kept us moving fast without breaking production:
Nx workspace and shared contracts
The same TypeScript event types were imported by Node services and Angular. We versioned the schema and ran contract tests on every PR.
apps/: portal + admin
libs/: telematics-data, kpi-formulas, ui-charts, auth, rbac
Backend fixtures consumed by FE contract tests
Preview everything with Firebase
Stakeholders validated role-based views in preview URLs without waiting for staging. Accessibility checks ran on core flows in CI.
Preview channels per PR
Guarded by Firebase Auth
Lighthouse/INP budgets gate merges
CI Pipeline Snippet (Nx + Firebase Previews)
name: ci
on:
pull_request:
branches: [ main ]
jobs:
build-test-preview:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: pnpm/action-setup@v3
with: { version: 9 }
- run: pnpm install --frozen-lockfile
- name: Affected build & test
run: |
npx nx affected -t lint test build --parallel
- name: Contract tests (event schema)
run: |
npx nx test telematics-data --configuration=contracts
- name: Lighthouse budgets
run: |
npx nx run portal:lighthouse-ci
- name: Firebase preview deploy
if: ${{ github.event_name == 'pull_request' }}
run: |
npx nx run portal:deploy:preview -- --pr ${{ github.event.number }}
env:
FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}Guardrails that scale
Measurable Outcomes: Safe‑Driver KPIs and Operational Stability
UX and performance
Core Web Vitals became predictable, even with bursty telemetry. Operators could scrub event timelines without UI stalls.
INP dropped from 260 ms → 115 ms on mid-tier laptops
WebSocket dropout rate reduced by 62% via jittered backoff
Chart reflow time cut ~55% with computed() + stable inputs
Business impact
Because we shared a single KPI engine, compliance sign-off accelerated—no more reconciling four different math implementations.
Claims triage time down ~18% with incident timelines
Underwriting time-to-quote down ~12% using cohort KPIs
Executive fleet overview loads <1.2s at P95
How an Angular Consultant Approaches Telematics
Engagement blueprint
I keep delivery continuous—no code freezes. If you need to hire an Angular developer with Fortune 100 experience across telecom, aviation, and insurance, this is the pattern I’ll bring to your team.
Week 1: Audit telemetry schema, KPIs, RBAC and perf
Weeks 2–3: Signals + SignalStore refactor, previewable slices
Weeks 4–6: Role UIs with contract tests, CI budgets, rollout
Relevant prior projects
The same real-time and offline patterns repeat across industries; I adapt the guardrails to your data and compliance posture.
Telematics dashboards for an insurance tech company
Advertising analytics for a leading telecom provider
Airport kiosk software with offline flows for a major airline
When to Hire an Angular Developer for Legacy Rescue
Signals that it’s time
If any of these are familiar, an Angular expert can stabilize your stack fast without pausing feature work. See how I use gitPlumbers to rescue chaotic code and restore delivery velocity.
Jittery charts and unstable websockets
Duplicated KPI math across roles
Upgrades blocked by tech debt or test gaps
What to Instrument Next
Stay ahead of drift and regressions
After launch, add deterministic KPI replays to defend audits and train new models. Track compute time by KPI to catch creeping complexity early.
Event-sourced KPI replays for audits
Synthetic routes for route guards and roles
OpenTelemetry spans for KPI compute timing
Key takeaways
- Typed telematics events + SignalStore let KPIs update in <100 ms without over-rendering.
- Role-based dashboards (drivers, adjusters, underwriters, execs) ride the same data layer via attribute- and route-level guards.
- Smart reconnects, SWR caching, and virtualization kept websockets stable and INP low on large fleets.
- Nx + contract tests locked interfaces with the data platform so UI could ship independently.
- Stakeholders reviewed Firebase preview links tied to branches—no blocking on staging cycles.
Implementation checklist
- Define a typed telemetry schema shared across FE/BE.
- Model KPIs with Signals + SignalStore; keep derived state computed-only.
- Use exponential backoff + jitter for WebSocket reconnects; fall back to SWR polling.
- Implement ABAC/RBAC with CanMatch guards and context-aware menus.
- Instrument Core Web Vitals, flame charts, and WebSocket dropouts in CI dashboards.
- Deliver previews via Firebase Hosting channels per PR; protect with auth.
Questions we hear from teams
- What does an Angular consultant do on a telematics dashboard project?
- I audit your telemetry schema, KPIs, and RBAC, then refactor to Signals + SignalStore for real-time stability. I add contract tests, CI budgets, and role-based views with guards—shipping previews weekly without code freezes.
- How long does it take to build or stabilize a telematics dashboard?
- A focused stabilization usually takes 2–4 weeks. A full build with role-based views and KPIs runs 6–10 weeks, depending on data readiness and compliance. Discovery within 48 hours; assessment delivered in 5–7 days.
- How much does it cost to hire an Angular developer for this work?
- Enterprise telematics engagements typically range from a short audit (fixed-fee) to multi-sprint delivery (weekly rate). I’ll propose a scoped plan after a free 30‑minute review of your repo and requirements.
- Do you support multi-tenant RBAC and compliance needs?
- Yes. I implement ABAC/RBAC with audit trails, tenant isolation, and contract-tested KPI math. We also instrument GA4/OpenTelemetry and keep Firebase or your IdP in the loop for preview auth.
- Can we migrate from NgRx to Signals without a rewrite?
- Yes. I use adapter facades and SignalStore to modernize incrementally. We keep selectors stable while moving hot paths to Signals, avoiding regressions during the transition.
Ready to level up your Angular experience?
Let AngularUX review your Signals roadmap, design system, or SSR deployment plan.
NG Wave
Angular Component Library
A comprehensive collection of 110+ animated, interactive, and customizable Angular components. Converted from React Bits with full feature parity, built with Angular Signals, GSAP animations, and Three.js for stunning visual effects.
Explore Components