021 - RxJS, Firestore and D3

Date: Sept 6th 2020

In this little experiment, I want to create a D3 chart using data from a Firebase project I'm working on, but do it using RxJS so that the data is updated in realtime, but without calling all the values at ones. The problem I've been having is that when I am calling the component before using GraphQL it would re-read all the documents I was querying, resulting in massive document reads. Instead I would like to call them once at the begining and then listen for when new values are added and then update the chart.

RxJS in React (w/Hooks)

Following a simple tutorial, lets stick together a simple autocomplete search funtion. This should take in an input and then list possible results:

Search Pokemon Name:

Matching Pokemon:

[]

Firestore Observables with RxFire

With that done, its now time to look at how to get infomation from Firestore. What I want to have is a list off all the readings for a certain device which will update when a new reading comes in.


          const db = firebase.firestore(); //Initialize Firestore

          const dataObservable = collectionData(
            db.collection('mimirReading')
            .where('deviceId', '==', 'fFrU8brLxN5Wea7PQwJg')
            .orderBy('timestamp', 'desc')
            .limit(48) );

            useObservable(dataObservable, setReadings);  //Subscribe to the Observable and update state
            

Last Five Readings:

Charts:

Selected IAQ: []

Conclusion:

After making a tester D3 chart and hooking it up to the observable it was actually super smooth to watch it update and add a new data point to the end. As I currently have it it still only gets the last 48 readings, and I'm not sure how to structure it to simply add an extra datapoint onto the end. But I think this is a great start. I have some more bits to add before I'm happy but I think this will work well for dashboards and certainly reducing the amoun of calls done by a lot.

Contact

Thank you for visiting my page, I hope you found something of interest here. As this site is primariliy for my own experimentations and documentation, I'm always thrilled to hear how people experiances it. If you have any questions or comments, feel free to fill out the contact. I m looking forward to hearing from you!

Alternatively, if you would like to follow along with me on some of my other social media platforms, you can find them in the links below.