Host a BI Report Using ReactJs+Firebase with Auth — Part2 Data + Context API + Interactions

After setting up the web page’s layout, we need to set up the data channel: connect with the data source and then expose some interaction to the end-users.

Code can be found at https://github.com/reneelin1712/simple-BI-report

Part one is here https://reneelin2019.medium.com/host-a-bi-report-using-reactjs-firebase-with-auth-part1-prototype-and-ui-a28ad49ab802

Datasource

Data comes from everywhere. It could be an API provided by some organisation, from your own database, or directly sent from a sensor. In this case, to make things simple, I just created a simple JSON file containing some dummy data, which is a list of JS objects. Connecting with any data source, it needs to be in JSON format.

The data from the Mui example component can be deleted; import the data to the component where you want to use it. Here I import to the top because I want to…