DataFlow Dashboard

What it does

Hit Start Stream and a new price, volume and volatility reading arrives every second. Seven line charts, five bar charts and three pie charts update together, next to KPI cards for active streams, data rate, volatility and latency. The data is simulated (a random-walk price), so the focus is on how the front end handles a constant stream. Every 10 seconds a snapshot is saved, and the History page keeps the last 20 in localStorage.

How it works

• A stream service switches between a one-second interval and an empty stream with switchMap, and shares one subscription with shareReplay.
• An NgRx store keeps the last 100 readings. Effects start the stream until a stop action arrives, and save a throttled snapshot every 10 seconds.
• 23 memoized selectors work out the chart data from the latest 60 points: moving average, price change, and volume and volatility buckets.

Keeping it fast

• All 13 components use OnPush change detection, so only components whose inputs changed are checked.
• Charts swap their data in place and call Chart.js update('none') with animation off, instead of being rebuilt every second.
• The Dashboard and History pages are lazy-loaded routes.

Testing

101 Jasmine and Karma tests cover the stream service, the reducer, the selectors, the KPI card and the three chart components.

Stack

Angular 18 · TypeScript · NgRx (store, effects) · RxJS · Chart.js 4 · Jasmine · Karma