Linking Charts with RxJS

Frontend Fishbowl Demo

02/25/2019

Cameron Yick / Team Dataviz

External Demo: Victory Charts

// chart.js

// VanillaJS (Pseudocode method inside some charting class)
handleBrushMove(event) {
   const { start, end } = event.selection;
   controlledChart.setChartSelection(start, end); 
}

Pros:

- Fast to set up

 

Cons:

- Controller and controlled strongly coupled

// React-Redux
handleBrushMove(event) {
   const { start, end } = event.selection;

   // setChartSelection is a redux action,
   // modifies some shared state in Redux
   this.props.setChartSelection(start, end); 

  // Now controller and controlled component 
  // both use mapStateToProps to 
  // pull selection from Redux Store
}

Pros

- Controller and Controlled are decoupled

 

Cons

- Requires react/redux boilerplate

Introducing RxJS!

  • Observable = value that changes over time
  • "Lodash" for Observables
    • Declaratively describe behavior
    • Push things into a stream
    • Let things subscribe to changes on that stream
    • Merge/throttle/combine streams as necessary

 

 

Internal Demo


// Create a thing that can be watched
// Convention to end observables with $
const chartSelection$ = new Subject();

// Inside your handler, stream can be injected
handleBrushMove(event) {
   const { start, end } = event.selection;
   chartSelection$.next({ start, end })
}

// Meanwhile, in another file...
chartSelection$.subscribe(selection => {
   const { start, end } = selection;
   minimap.moveTo(start, end);
})

// Add more subscriptions freely!
// Introduce throttle, debounce, merge (hotkeys) in a file
// decoupled from the rest of your charting logic...

Further RxJS Resources

RxJS and Minimaps

By Cameron Yick

RxJS and Minimaps

  • 953

More from Cameron Yick