We are going to make a real-time vitals dashboard to display a patient's SpO2 and blood pressure data. We will use React.js to create modular reactive components that will seamlessly update our dashboard with data we subscribe to using PubNub ( a real-time publish and subscribe system). When vitals data is generated PubNub almost instantly publishes those messages to all the subscribers. With react we can mix and match modular components to create custom dashboards with the vitals we want to display. You can find the code here on github and the standalone application here.

I love coding with React.js because building modular components is very intuitive and time efficient. We can create an individual component that can be reused in our dashboard or even any other project. Let's break down our dashboard in individual components.

Displaying Patient Info from FHIR using React.js

The PatientInfo.js component will display basic information of the patient so we can easily identify them. The patient info will update when we select a different patient. This includes the patients full name, age, and medical record number (MRN). This data will be retrieved using the smart and FHIR api using the patient's ID. The patient object gives us access to the age and name property. We then set react property for these variables using setState which is passed to our react components in order to define our data using this.state.age this.state.name. Now to make this component dynamic we will update the view each time we choose a different patient ID. To make it simple we will create two buttons representing two different patients. onClick for A.A we will pass the patient's ID into the patient define function. Once this function is called it will update the properties of the age and name variables. React uses a virtual DOM which allows fast updates by only updating the components in the DOM that have changed. So only the age mrn and name elements will need to be updated with the new data

The amazing part of react is now that we created this component we can use it anywhere in our react app. If you want to change the data that is being displayed all you need to do is change the properties that are passed through this component.

Real-time Blood pressure and SPO2 Component

The next component we will make will display the current SPO2 reading and update its value when we get a new vitals message. The value will change color if it is under the minimum threshold. Our component will use this.props.spo to display the dynamic SPO2 data of the current state. The SPO2 value changes color using react's inline styling. Instead of your typical if statement we will need to use a ternary operator. So if the SPO2 value is greater than 95 then it will be green else it will be red. Next we will use PubNub to get real-time SPO2 values and have them displayed in our component.

Using PubNub to Publish and subscribe to Patient Vitals

For this example I have created a generator that will publish random vitals data for SPO2 and blood pressure. Using D3's random function generates a random value based of the mean and standard deviation. We will now publish this data to PubNub. The basics of a PubNub message is the message payload and the channel that the message will be published to. From here PubNub will publish this data to all of its subscribers listening on the FHIR channel we created.

Each time a message is sent it gets passed through the success function. The message payload gets deconstructed and we can now set the new state of our SPO2 and Systolic/ Diastolic blood pressure. This function will also add the SPO2 value to our data array for our graph. Once the new state is set it our react components will automaticaly get updated with the new values from the message.

Real-time SPO2 Graph

We can plot our SPO2 data as we receive new messages. This will allow us to see the trend of oxygenation and see if the patient is desating or not. I have also created tolerance lines to indicate if a SPO2 measurement is below normal. First we will create seed data to start our graph and then every new SPO2 measurement gets appended to the data set, in our graph we only display the latest 25 points.