Live Filtering the Stream
Explore how to implement live filtering on stock data streams by combining multiple checkbox observables using RxJS. Learn to maintain cached data and dynamically update filters with operators like combineLatest and merge. This lesson guides you through creating reusable streams, grouping observables, and optimizing real-time filtering without losing in-flight data.
At this point, the stock graph shows four different stocks. We want to make the display of each stock configurable, which requires a live filter. We can’t write a static one and call it a day.
Live filtering
One solution is to simply recreate the entire observable stream on every click but that has the consequence of eliminating any data we’ve already cached.
Instead, we opt for a series of merges that, while still complicated, allow dynamic filtering of all values on the graph without losing any in-flight data.
First, we need an observable of all updates to the stock filter.
There are four checkboxes on the side of the graph, one for each stock to filter. We need to listen in to each one, and map to the latest value, along with a signifier that indicates what stock is attached to that new value.
After we have four streams, we need to combine them into ...