hgraph-os / hgraph Goto Github PK

View Code? Open in Web Editor NEW

292.0 36.0 60.0 12.57 MB

hGraph is an open source javascript library for visualizing health data.

Home Page: http://www.hgraph.org

License: Apache License 2.0

JavaScript 100.00%

healthcare design ux open-source patient-health-data visualization wellness care-plan data-viz patient-health-record

hgraph's Introduction

hGraph: Your health in one picture.

hGraph is an open source javascript library for visualizing health data.
hGraph is a React component using D3.

Demos

React Demo
Patient Demo
Hospital Demo

Installation

This package can be found on npm and installed like so:

$ yarn add hgraph-react
# or
$ npm install hgraph-react

The hGraph component is packaged using webpack.

Usage

hGraph Component Props

Most props are not required and have sensible defaults built in, as listed below.

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 (hScore) 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
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 (hScore) 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

hGraph Metric Object Properties

Property Name	Type	Is Required	Description
id	string	true	A unique (compared to all other metrics) identifier string for the metric.
label	string	true	The axis display label for the metric.
value	number	true	The patient's recorded value for the metric.
healthyMin	number	true	The minimum value possible to still be considered a healthy value.
healthyMax	number	true	The maximum value possible to still be considered a healthy value.
absoluteMin	number	true	A reasonable minimum possible value for this metric. Note: values below this absolute minimum will be clamped to the min.)
absoluteMax	number	true	A reasonable maximum possible value for this metric. Note: values above this absolute maximum will be clamped to the max.
unitLabel	string	true	The units the metric is measured in, displayed with the metric value.
children	array	false	Optional array of child metrics that comprise this metric. Children metrics should conform to hGraph Metric Objects properties. Children are shown when a point is clicked and hGraph is in the "zoomed in" state.

hMetrics

Set of health metrics to be displayed on the hGraph. A default set is provided but can be tailored to your installation.

(steps to edit coming)

hRanges

Defines the healthy range for hMetrics. A default set is provided but should be tailored to your installation.

(steps to edit coming)

hScore (notional)

hScore is an algorithm for scoring a person's health and can be displayed at the center of the hGraph. hScore is currently a concept and has not been developed.

Synthetic Patient Data

For development and demo’s, we’ve used Synthea for generating synthetic patient data to display in hGraph.

(steps to include coming)

Notable Repos

A React Native port is available from Citizen Health.
hGraph on FHIR (Fast Healthcare Interoperability Resources): https://github.com/symptomatic/hgraph-on-fhir
hGraph + Spider chart demo, repo

Project

Roadmap

Code of Conduct

hGraph has adopted a Code of Conduct that we expect project participants to adhere to.
Please read the full text so that you can understand what actions will and will not be tolerated.

Contributing Guidelines

We encourage you to contribute to hGraph!
See the contributing guidelines for how to proceed.

Core Contributors

Founders/Designers: GoInvo is a digital design studio in Boston, crafting the future of healthcare through strategy, creativity, and vision.

Contact Us

[email protected]
Open Office Hours

License

hGraph is Apache 2.0 licensed.

For guidance integrating hGraph into your product or service, contact us at [email protected].

hgraph's People

Contributors

Stargazers

Watchers

Forkers

andrewfaria jmandel iddl bsalinas bloemker joytafty hexren fitoop bquarant alixaxel darrenmeehan halfnhav andycasey xuanhan863 arthurvondyck smtechnocrat cggaurav neovahealth mohan2020 slupin johannmg izekel loganarnett marcusrogerio pandahisham vcarlisler hwrd wellbin nagyist karna1995 sinujackson hotmili bryant1410 brennenhodge citizenhealth ongtzewei sandrews millsvonmilski hamzamu mukira echiyembekeza neo4reo shalevy1 jibrel lakshay2807 reloadbrain dianasaurus-debug hellogareth alielmaksoud mannyabraham danielruuth gregoryperkins aproposnix hifans infoadisan

hgraph's Issues

hMixer: Make "Submissions" button a link

also place that below "Feedback" and use the label "View Submissions"

hMixer: eliminate the doximity popup on load... lets request sign in upon submitting if not signed in

Update green color within healthy range circular/draggable handles to match the other greens

hMixer: Allow ability to use numerical keyboard to enter patient values

hMixer: Switch google fonts to Vollkorn - http://www.google.com/fonts#UsePlace:use/Collection:Vollkorn

"Submit hScore" button is pinned at bottom of screen so it'll always be in view

Delete the hovering "score" grey ball

not the one that is tied to the patient value input field

>= 1280px screen width show the larger hGraph on the right. (see png, #1)

Ability to add and disable metrics from the hGraph

This will allow people to define what metrics are important at the top level... allowing them to deviate from the default metrics we have provided.

May also need to give them ability to edit the x-axis of the metric(s) they add

Make the grey score ball that is tied to the patient value draggable as well.

Submitting an hScore for a demographic will display it as checked off

Export my hScore(s)

Calculate + display the amount completed based on the demographics submitted

hMixer: Add subject to "feedback" mailto: .... "hScore Mixer Feedback"

hMixer: Exercise use hours/week

"Organization" view of hScores

hMixer: hScore number go crazy high into thousands or even into negatives

Related to #18

hMixer: Update green colors to #97be8c

Add concept of a "play area" when mixing vs a formal submission

hMixer: unable to drag healthy range as a block (not just the end points) and see numbers disappear (see attached)

hMixer: craft an opening slide explaining what hScore is + scaling to creating hScore/healthy ranges for the numerous metrics (think male+female for LDL, or age ranges for sleep) + add/subtract core metrics

Ability to switch demographics by clicking on them to view and/or edit

Add hGraph website to this repo.

Update x-axis for Exercise range: 0-60+ hrs

hMixer: Alcohol use drinks/week

hMixer: Click submissions link needs to bring user to top of page.

hMixer: clicking into an input field will highlight the entire value to type over it

Link to more info about hScore, hGraph and the contributors

hMixer: Update to "Waist Circumference" for label

hMixer: Upon opening a past submission by someone else, maybe have a label up at the top of the person that submitted it when viewing their hScore

hMixer: Waist C. use Inches instead of CM

Separate hScores for demographics: Male+Child, Male+Adult, Female+Child, Female+Adult.

hMixer: vertically align measurement label "mg/dl..." (push down few pixels) with the x-axis labels

hMixer: Hitting tab from a patient value will switch to the next patient value to input

>= 1280px screen width include metric labels for the dots + patient values in the large hGraph on the right (see png, #1)

Exercise

Sleep

Happiness

Triglycerides

LDL

HDL

Glucose

Systolic Blood Pressure

Diastolic Blood Pressure

Alcohol

Smoking

Pain

Target for horizontal scrolling patient value is blocking the bottom half of the input field, therefore unable to enter input field

unless you click on the top half of the input field (osx, chrome).

< 1280px screen width shrink graph into the patient synthesizer/selector column at the top (see png, #2)… in this view the hGraph is pinned at top and always visible

Revise layout to match new comp (see png)

hMixer: Issue when making a super high patient value beyond the x-axis will place the circle dot way out... could use a max distance to plot the dot outside the hGraph green circle

(function (i, s, o, g, r, a, m) {
    i['GoogleAnalyticsObject'] = r;
    i[r] = i[r] || function () {
        (i[r].q = i[r].q || []).push(arguments)
    },
    i[r].l = 1 * new Date();
    a = s.createElement(o),
    m = s.getElementsByTagName(o)[0];
    a.async = 1;
    a.src = g;
    m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-10273473-9', 'hscoremixer.org');
ga('send', 'pageview');