Introduction

Forked from (https://www.npmjs.com/package/react-native-hgraph) for the purposes of MedRecord.

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:

| Prop Name | Type | Is Required | Description | Default | | --------- | ---- | ----------- | ----------- | ------- | | data | array | true | An array of objects representing the metrics to display in hGraph (see below) | N/A | | score | number | false | The overall score to display in the center of hGraph | N/A | | width | number | false | The width in pixels hGraph should render at. | 600 | | height | number | false | The height in pixels hGraph should render at. | 600 | | margin | object | false | An object representing the values for margins around hGraph. | { top: 70, right: 100, bottom: 70, left: 100 } | | thresholdMin | number | false | A number value between 0 and 1 (percentage), determining the position the lower threshold of the healthy range renders at. | .25 | | thresholdMax | number | false | A number value between 0 and 1 (percentage), determining the position the upper threshold of the healthy range renders at. | .75 | | donutHoleFactor | number | false | A number value between 0 and 1 (percentage), determining the amount of hGraph's radius that should be cut out forming the hole in the center of the graph. | .4 | | pathColor | string (hex color code) | false | The color of the polygon shape.| "#d2d2d2" | | color | string (hex color code) | false | The color of the points and polygon shape. | '#616363' | | healthyRangeFillColor | string (hex color code) | false | The color of the healthy range band. | '#98bd8e' | | fontSize | number | false | The size (in pixels) of the font for the labels. | 16 | | fontColor | string (hex color code) | false | The color of the labels. | '#000' | | showAxisLabel | boolean | false | Whether or not axis labels should display around hGraph. | true | | axisLabelWrapWidth | number | false | The width (in pixels) that the labels should wrap text at. | 80 (Note: use null for no wrapping) | | axisLabelOffset | number | false | The distance (in pixels) that axis labels should be offset from the outer bounds of hGraph's 'absolute max' radius. | 12 | | areaOpacity | number | false | The opacity of the polygon shape. | 0.25 | | pointRadius | number | false | The radius (in pixels) of the points for metric values. | 10 | | pointLabelWrapWidth | number | false | The width (in pixels) that the point labels should wrap text at. | null (no wrapping) | | pointLabelOffset | number | false | The distance (in pixels) that point labels should be offset from the point. | 8 | | hitboxRadius | number | false | The radius (in pixels) of the point hitboxes. (hGraph overlays a transparent hitbox over each point which can help users accurately click/touch points, particularly on mobile devices.) | Defaults to props.pointRadius size. | showScore | boolean | false | Whether or not to display the overall score in the middle of hGraph. | true | | scoreFontSize | number | false | The size (in pixels) of the font for the overall hGraph score | 120 | | scoreFontColor | string (hex color code) | false | The color of the hGraph score. | '#000' | | zoomFactor | number | false | The multiplier factor hGraph should zoom in. | 2.25 | | zoomTransitionTime | number | false | The amount of time (in milliseconds) the zooming animation should take. | 750 | | zoomOnPointClick | boolean | false | Configure if hGraph should zoom in/focus on a clicked point and display child points in the graph. | true | | onPointClick | function | false | Callback function called when a point is clicked. Function is passed 2 arguments: the data object corresponding to the point clicked, and the event. | N/A | Name | Default | Type | Description ----------------|------------|--------------|--------------

Usage

// LIST OF AVAILABLE METRICS: BODY_MASS_INDEX, BODY_WEIGHT, BODY_HEIGHT, WAIST_HEIGHT_RATIO, HBA1C, BLOOD_GLUCOSE, BLOOD_PRESSURE_SYSTOLIC, BLOOD_PRESSURE_DIASTOLIC, WAIST_CIRCUMFERENCE

import  HGraph, {
	hGraphConvert,
} from  'medrecord-react-native-hgraph';
...
const  healthData  = [
hGraphConvert('male', 'BODY_MASS_INDEX',
{
	id :  'BODY_MASS_INDEX',
	value :  22.5, 
	helpText: 'Normal range',
}),

...
<HGraph
	width= {200}
	height= {200}
	score={98}
	margin={
		{top:  50,
		right:  100,
		bottom:  50,
		left:  100}}
	showAxisLabel={true}
	scoreFontSize= {50}
	data= {healthData}
/>