Skip to content

Instantly share code, notes, and snippets.

@rajvansia

rajvansia/PatientInfo.js

Last active August 12, 2016 11:51
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rajvansia/c413464297985ab482200973d170cac2 to your computer and use it in GitHub Desktop.
Save rajvansia/c413464297985ab482200973d170cac2 to your computer and use it in GitHub Desktop.
Download ZIP
react-fhir-pubnub
Raw
app.js
"use strict";
import React from 'react';
import ReactDOM from 'react-dom';
import {PulseOx} from './components/PulseOx'
import {BloodPressure} from './components/BloodPressure'
import {PatientInfo} from './components/PatientInfo'
import {PatientVitals} from './components/PatientVitals'
import {PatientVitalsSp} from './components/PatientVitalsSp'
import {PatientVitalsBp} from './components/PatientVitalsBp'
import {Graph} from './components/SpGraph'
const channel = 'fhir';
let name=""
let formatted=""
let mrnum=""
let age = 0
let dob = ""
let idd = ""
let spo = 0;
let sys = 140;
let dia = 90;
let dataGraph =[]
let upper = []
let lower = []
const pubnub = PUBNUB({
publish_key : 'pub-c-3f8a91d6-9bed-4650-baba-c08df033f657',
subscribe_key : 'sub-c-b6b3acea-5147-11e6-8b3b-02ee2ddab7fe',
ssl: true
})
const n = 20,
random = d3.random.normal(96, 2),
data = d3.range(n).map(random),
randomSys = d3.random.normal(120, 5),
randomDia = d3.random.normal(80, 5)
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
data: [],
spo: 0,
fullname:"",
mrn: "",
age: 0,
idd: "9995679",
dia: 0,
sys: 0,
dataGraph : [94,92,95,96,99,100,96,99,98,96,99],
upper: [100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100],
lower: [95,95,95,95,95,95,95,95,95,95,95,95,95,95,95,95,95,95,95,95,95,95,95,95,95]
}
this.handleClick = this.handleClick.bind(this)
this.vitalsClick = this.vitalsClick.bind(this)
}
// mount before component load
componentWillMount() {
// get inital state of patient information
this.getPatient("9995679")
// subscribe
pubnub.subscribe({
channel : channel,
message: (message, envelope, channelOrGroup, time, channel) => {
console.log(
"Message Received." + "\n" +
"Channel or Group : " + JSON.stringify(channelOrGroup) + "\n" +
"Channel : " + JSON.stringify(channel) + "\n" +
"Message : " + JSON.stringify(message) + "\n" +
"Time : " + time + "\n" +
"Raw Envelope : " + JSON.stringify(envelope)
)
this.success(message)
}
});
}
// function to get the patient data from fhir api and set its state
getPatient(idd){
let demo = {
serviceUrl: "https://fhir-open-api-dstu2.smarthealthit.org", //allows you to connect to your smar server and query a patient
patientId: idd // josuah p willams hca-pat-55 1137192
};
// Create a FHIR client (server URL, patient id in `demo`)
let smart = FHIR.client(demo),
pt = smart.patient;
pt.read()
.then( (p)=> {
name = p.name[0];
formatted = name.given.join(" ") + " " + name.family;
mrnum = p.id
dob = new XDate(p.birthDate);
age = Math.floor(dob.diffYears(new XDate()));
this.fetchProfile(formatted, mrnum, age);
console.log(age)
});
}
fetchProfile(formatted, mrnnum, age) {
this.setState({
fullname: formatted,
mrn: mrnum,
age: age
});
}
success(message) {
this.setState({
spo: message.spo,
dia: message.dia,
sys: message.sys,
dataGraph : this.state.dataGraph.concat([ message.spo ])
});
}
// on click start generating random patient data
vitalsClick(start){
if(start==="start") {
let vitalsim = setInterval( _ =>{
// create random patient vital data
spo = Math.floor(random());
sys = Math.floor(randomSys());
dia = Math.floor(randomDia());
// Publish new data to pubnub channel for data to be consumed by subscribers
pubnub.publish({
channel : channel,
message :{
spo:spo,
dia: dia,
sys: sys
}
});
}, 2000 )
this.setState({
vitalsim: vitalsim
})
}
else{
// stop generating random data by clearing interval
clearInterval(this.state.vitalsim);
console.log("stop")
}
}
handleClick(iddd){
this.getPatient(iddd)
}
render() {
return <div>
<div className="row page-title text-center" >
<h3>Choose a Patient:</h3>
<button className="patientButton" onClick={()=>this.handleClick("9995679")}>
<b className="patientText"> A.A</b>
</button>
<button className="patientButton" onClick={()=>this.handleClick("99912345")}>
<b className="patientText"> A.V</b>
</button>
<button className="patientButton" onClick={()=>this.vitalsClick("start")}>
<b className="patientText"> Start</b>
</button>
<button className="patientButton" onClick={()=>this.vitalsClick("stop")}>
<b className="patientText"> Stop</b>
</button>
</div>
<PatientVitals mrn={this.state.mrn} age={this.state.age} fullname={this.state.fullname} spo={this.state.spo} dia={this.state.dia} sys={this.state.sys} dataGraph={this.state.dataGraph} lower={this.state.lower} upper={this.state.upper} />
<PatientVitalsSp mrn={this.state.mrn} age={this.state.age} fullname={this.state.fullname} spo={this.state.spo} />
<PatientVitalsBp mrn={this.state.mrn} age={this.state.age} fullname={this.state.fullname} dia={this.state.dia} sys={this.state.sys} />
</div>
}
}
ReactDOM.render(<App />, document.getElementById('app'))
Raw
PatientInfo.js
"use strict";
import React from 'react';
import ReactDOM from 'react-dom';
export class PatientInfo extends React.Component {
render () {
return (
<div>
<span className="patientInfo"><strong>Name: </strong>{this.props.fullname} |<strong>Age: </strong>{this.props.age} |<strong>MRN:{this.props.mrn} </strong></span>
<p className="heading"></p>
</div>
);
}
}
Raw
PulseOx.js
"use strict";
import React from 'react';
import ReactDOM from 'react-dom';
const styleHigh = {
color: 'red'
};
const styleNormal = {
color: "rgb(0,255,0)"
};
export class PulseOx extends React.Component {
render () {
return (
<div>
<span className="streamerName">SPO2</span>
<span style={this.props.spo>=95 ? styleNormal : styleHigh} className="number">{this.props.spo}%</span>
</div>
);
}
}
Raw
SpGraph.js
import React from 'react';
const styleGreen= {
stroke: "rgb(0, 255, 0)"
}
const Sparkline = props => {
let points =props.dataGraph.map( (y, x) => ( `${x * 20},${y*6}` ) ).join(' ');
let upper = props.upper.map( (y, x) => ( `${x * 20},${y*6}` ) ).join(' ');
let lower = props.lower.map( (y, x) => ( `${x * 20},${y*6}` ) ).join(' ');
return <svg viewBox="0 0 500 100" width="500" height="100">
<g transform="translate(0,625) scale(1,-1)">
<polyline points={ points } stroke="#23fbbd" fill="none" strokeWidth="5" strokeLinecap="round" />
<polyline points={ upper } style={styleGreen} fill="none" strokeWidth="2" strokeLinecap="round" strokeDasharray="9" />
<polyline points={ lower } stroke="red" fill="none" strokeWidth="2" strokeLinecap="round" strokeDasharray="9" />
</g>
</svg>
};
export class Graph extends React.Component {
render () {
return <Sparkline dataGraph={ this.props.dataGraph.slice(-25) } upper={this.props.upper} lower={this.props.lower}/>;
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment