react-native-hgraph v0.5.0

Introduction

This is a React Native native implementation of the hGraph library. hGraph is a visual representation of a patient's health status, designed to increase awareness of the individual's factors that can affect one's overall health.

react-native-hgraph

Getting started

$ npm install react-native-hgraph --save

$ react-native link react-native-hgraph

You will still need to manually add the SVG package manually. Please follow the steps below.

iOS Manual Installation

Follow the steps bellow:

1. Add RNSVG.xcodeproj from \<React Native Project>/node_modules/react-native-svg/iOS/ to your project

2. Link the libRNSVG.a library in the Linked Frameworks and Libraries in your Target -> General -> Linked Frameworks and Libraries

Android Manual Installation

Follow the steps bellow:

1. Import the react-native-hgraph module: Add the following lines to your settings.gradle file:

include ':react-native-svg'  
project(':react-native-svg').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-svg/android')  
include ':react-native-hgraph'  
project(':react-native-hgraph').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-hgraph/android')

2. Add the compile line in your app gradle file:

implementation project(':react-native-svg')  
implementation project(':react-native-hgraph')

3. Import RNReactNativeHgraphPackage and SvgPackage in the MainApplication.java file:

import io.citizenhealth.RNReactNativeHgraphPackage;  
import com.horcrux.svg.SvgPackage;

and add the new SvgPackage() and new RNReactNativeHgraphPackage() in your getPackages() function in MainApplication.java

protected List<ReactPackage> getPackages() {  
  return Arrays.<ReactPackage>asList(  
      new MainReactPackage(),  
       new SvgPackage(),  
       new RNReactNativeHgraphPackage()  
  );  
}

Common props:

Usage

import  HGraph, {
	hGraphConvert,
	calculateHealthScore
} from  'react-native-hgraph';
...
const  totalCholesterolValue  = (1-0)*Math.random();
const  ldlValue  = (300-0)*Math.random();
const  hdlValue  = (150-0)*Math.random();
const  triglyceridesValue  = (300-0)*Math.random();
const  bloodPressureSystolicValue  = (230-50)*Math.random();
const  bloodPressureDiastolicValue  = (140-35)*Math.random();
const  alcoholUseValue  = (20-0)*Math.random();
const  nicotineUseValue  = (20-0)*Math.random();
const  painLevelValue  = (10-0)*Math.random();
const  waistCircumferenceValue  = (200-0)*Math.random();
const  weightValue  = (400-50)*Math.random();
const  exerciseValue  = (60-0)*Math.random();
const  sleepValue  = (18-0)*Math.random();
const  happinessValue  = (10-0)*Math.random();
const  glucoseValue  = (160-0)*Math.random();
const  otherValue  = (1-0)*Math.random();
const  healthData  = [
hGraphConvert('male', 'totalCholesterol',
{
	id :  'totalCholesterol',
	"value" :  totalCholesterolValue
}),
hGraphConvert('male', 'ldl',
{
	id :  'ldl',
	"value" :  ldlValue
}),
hGraphConvert('male', 'hdl',
{
	id :  'hdl',
	"value" :  hdlValue
}),
hGraphConvert('male', 'triglycerides',
{
	id :  'triglycerides',
	"value" :  triglyceridesValue
}),
hGraphConvert('male', 'bloodPressureSystolic',
{
	id :  'bloodPressureSystolic',
	"value" :  bloodPressureSystolicValue
}),
hGraphConvert('male', 'bloodPressureDiastolic',
{
	id :  'bloodPressureDiastolic',
	"value" :  bloodPressureDiastolicValue
}),
hGraphConvert('male', 'alcoholUse',
{
	id :  'alcoholUse',
	"value" :  alcoholUseValue
}),
hGraphConvert('male', 'nicotineUse',
{
	id :  'nicotineUse',
	"value" :  nicotineUseValue
}),
hGraphConvert('male', 'painLevel',
{
	id :  'painLevel',
	"value" :  painLevelValue
}),
hGraphConvert('male', 'waistCircumference',
{
	id :  'waistCircumference',
	"value" :  waistCircumferenceValue
}),
hGraphConvert('male', 'weight',
{
	id :  'weight',
	"value" :  weightValue
}),
hGraphConvert('male', 'exercise',
{
	id :  'exercise',
	"value" :  exerciseValue
}),
hGraphConvert('male', 'sleep',
{
	id :  'sleep',
	"value" :  sleepValue
}),
hGraphConvert('male', 'happiness',
{
	id :  'happiness',
	"value" :  happinessValue
}),
hGraphConvert('male', 'glucose',
{
	id :  'glucose',
	"value" :  glucoseValue
}),
hGraphConvert('male', 'other',
{
	id :  'other',
	"value" :  otherValue
}),
]
const  healthScore  =  Math.floor(calculateHealthScore(healthData));
...
<HGraph
	width= {200}
	height= {200}
	score={98}
	margin={
		{top:  50,
		right:  100,
		bottom:  50,
		left:  100}}
	showAxisLabel={true}
	scoreFontSize= {50}
	data= {}
/>