fhir-react 0.2.1 → 0.3.0

package/src/components/resources/Observation/ObservationGraph.js

@@ -1,68 +1,172 @@
 import React from 'react';
 import _get from 'lodash/get';
 import _isNumber from 'lodash/isNumber';
-import './ObservationGraph.css';
 
-const ObservationGraph = props => {
-  if (props.referenceRange && _isNumber(_get(props, 'valueQuantity.value'))) {
-    const tooLow = _get(props, 'referenceRange[0].low.value');
-    const tooHigh = _get(props, 'referenceRange[0].high.value');
+const OBSERVATION_VALUE = 'observationValue';
+const IN_RANGE = 'in range';
+const OUT_OF_RANGE = 'out of range';
+
+const rangeBaseClasses = `border border-1 border-light`;
+
+const colorfulRange = ({
+  width = 1,
+  value = '',
+  rangeClasses = `bg-primary rounded-pill  ${rangeBaseClasses}`,
+}) => {
+  return {
+    width: width,
+    rangeClasses,
+    value,
+  };
+};
+
+const rangeContent = (width, rangeClasses, value, small) => (
+  <div
+    className={`${rangeClasses} text-white text-center font-source`}
+    style={{ width: `${width}%`, lineHeight: '14px', minWidth: '8px' }}
+    key={`range${width}-${Math.random()}`}
+    data-testid={`rangeContent${value && value.replace(/ /g, '')}`}
+  >
+    {!small && value}
+  </div>
+);
+
+const edgeRange = () => rangeContent(2, 'rounded-pill');
+
+const observationValuePoint = (actualValue, unit, small) => {
+  return (
+    <div
+      className={`bg-dark ${rangeBaseClasses} rounded-circle ${
+        small ? 'mx-0' : 'mx-1'
+      }`}
+      style={{ width: small ? '9px' : '17px' }}
+      key={`ValuePoint-${Math.random()}`}
+    >
+      {!small && (
+        <span
+          className={`position-absolute top-0 translate-middle ps-2 ${
+            small ? 'pb-4 fs-1' : 'pb-5 fs-4'
+          } w-max-content`}
+          data-testid="valuePoint"
+        >
+          {`${actualValue} ${unit}`}
+        </span>
+      )}
+    </div>
+  );
+};
+
+const valueIsInRange = (actualValue, tooLow, tooHigh, rangeInOneRow, unit) => {
+  const firstPart = { width: 1, value: '' };
+  const thirdPart = { width: 1, value: '' };
+  if (actualValue === tooLow) {
+    thirdPart.width = 94;
+    thirdPart.value = rangeInOneRow;
+  } else if (actualValue === tooHigh) {
+    firstPart.width = 94;
+    firstPart.value = rangeInOneRow;
+  } else {
+    const actualRangeWidthLeft = Math.round(
+      ((actualValue - tooLow) * 100) / (tooHigh - tooLow),
+    );
+    const actualRangeWidthRight = 95 - 1 - actualRangeWidthLeft;
+
+    firstPart.width = actualRangeWidthLeft;
+    firstPart.value = `<${tooLow} ${unit}`;
+    thirdPart.width = actualRangeWidthRight;
+    thirdPart.value = `>${tooHigh} ${unit}`;
+  }
+
+  return [
+    colorfulRange(firstPart),
+    OBSERVATION_VALUE,
+    colorfulRange(thirdPart),
+  ];
+};
+
+const valueIsOutOfRange = (actualValue, tooLow, tooHigh, rangeInOneRow) => {
+  if (actualValue < tooLow) {
+    const actualRangeWidth = Math.round(
+      ((tooHigh - tooLow) * 100) / (tooHigh - actualValue),
+    );
+    return [
+      OBSERVATION_VALUE,
+      colorfulRange({
+        width: 95 - actualRangeWidth,
+        rangeClasses: 'rounded-pill',
+      }),
+      colorfulRange({ width: actualRangeWidth, value: rangeInOneRow }),
+    ];
+  } else {
+    const actualRangeWidth = Math.round(
+      ((tooHigh - tooLow) * 100) / (actualValue - tooLow),
+    );
+    return [
+      colorfulRange({ width: actualRangeWidth, value: rangeInOneRow }),
+      colorfulRange({
+        width: 95 - actualRangeWidth,
+        rangeClasses: 'rounded-pill',
+      }),
+      OBSERVATION_VALUE,
+    ];
+  }
+};
+
+const ObservationGraph = ({ referenceRange, valueQuantity, small }) => {
+  if (referenceRange && _isNumber(_get(valueQuantity, 'value'))) {
+    const tooLow = _get(referenceRange[0], 'low.value');
+    const tooHigh = _get(referenceRange[0], 'high.value');
+
+    const rangeInOneRow = `${tooLow} ${valueQuantity.unit} - ${tooHigh} ${valueQuantity.unit}`;
+
     if (!tooLow || !tooHigh) return null;
 
-    const actual = props.valueQuantity.value;
-    const maxNum = Math.max(tooHigh, actual);
-    const minNum = Math.min(tooLow, actual);
-    const startAt = (maxNum - minNum) * -0.5 + minNum;
-    const endAt = (maxNum - minNum) * 0.5 + maxNum;
-    const zeroShift = 0 - startAt;
-    const lowBar = Math.round(((zeroShift + tooLow) / endAt) * 100);
-    const rangeBar = Math.round(((zeroShift + tooHigh) / endAt) * 100) - lowBar;
-    const valueBar = Math.round(((zeroShift + actual) / endAt) * 100) + 3;
-    const higherBar = 100 - rangeBar - lowBar;
+    const actualValue = valueQuantity.value;
+    const inRange = actualValue >= tooLow && actualValue <= tooHigh;
+    const graphRanges = inRange
+      ? valueIsInRange(
+          actualValue,
+          tooLow,
+          tooHigh,
+          rangeInOneRow,
+          valueQuantity.unit,
+        )
+      : valueIsOutOfRange(actualValue, tooLow, tooHigh, rangeInOneRow);
+
+    const smallRangeText = inRange ? IN_RANGE : OUT_OF_RANGE;
 
     return (
-      <div className="fhir-resource__ObservationGraph">
+      <div
+        className={`position-relative ${
+          small ? 'w-110 graph-width-sm ms-2 ms-sm-0' : 'my-6'
+        }`}
+      >
+        {small && (
+          <span
+            className={`pb-1 fs-75 font-source d-inline-block`}
+            data-testid="smallRangeText"
+          >
+            {smallRangeText}
+          </span>
+        )}
         <div
-          className="fhir-resource__ObservationGraph__value-wrapper"
-          style={{ left: `${valueBar}%` }}
+          className="d-flex overflow-hidden bg-gray-200 fs-75 rounded-pill"
+          style={{ height: small ? '0.5rem' : '1rem' }}
         >
-          <code className="fhir-resource__ObservationGraph__value-actual">
-            {actual}
-          </code>
-          &nbsp;
-          <span className="fhir-resource__ObservationGraph__value-unit">
-            {props.valueQuantity.unit}
-          </span>
-        </div>
-        <div className="fhir-resource__ObservationGraph__progress">
-          <div
-            className="fhir-resource__ObservationGraph__progress-bar--outside-range"
-            style={{ width: `${lowBar}%` }}
-          >
-            <small>
-              <strong data-testid="tooLow">{`< ${tooLow}`}</strong>
-            </small>
-          </div>
-          <div
-            className="fhir-resource__ObservationGraph__progress-bar--inside-range"
-            role="progressbar"
-            style={{ width: `${rangeBar}%` }}
-            aria-valuenow={actual}
-            aria-valuemin={tooLow}
-            aria-valuemax={tooHigh}
-          ></div>
-          <div
-            className="fhir-resource__ObservationGraph__progress-value"
-            style={{ left: `${valueBar}%` }}
-          ></div>
-          <div
-            className="fhir-resource__ObservationGraph__progress-bar--outside-range"
-            style={{ width: `${higherBar}%` }}
-          >
-            <small>
-              <strong data-testid="tooHigh">{`> ${tooHigh}`}</strong>
-            </small>
-          </div>
+          {edgeRange()}
+          {graphRanges.map(graphRange => {
+            if (graphRange === OBSERVATION_VALUE)
+              return observationValuePoint(
+                actualValue,
+                valueQuantity.unit,
+                small,
+                inRange,
+              );
+
+            const { rangeClasses, width, value } = graphRange;
+            return rangeContent(width, rangeClasses, value, small);
+          })}
+          {edgeRange()}
         </div>
       </div>
     );

package/src/components/resources/Observation/ObservationGraph.test.js

@@ -3,39 +3,41 @@ import { render } from '@testing-library/react';
 import ObservationGraph from './ObservationGraph';
 
 describe('ObservationGraph component', () => {
-  it('should render component correctly with proper props', () => {
-    const defaultProps = {
-      referenceRange: [
-        {
-          low: {
-            unit: '%',
-            code: '%',
-            system: 'http://unitsofmeasure.org',
-            value: 41,
-          },
-          high: {
-            unit: '%',
-            code: '%',
-            system: 'http://unitsofmeasure.org',
-            value: 53,
-          },
-          text: '41 - 53 %',
+  const defaultProps = {
+    referenceRange: [
+      {
+        low: {
+          unit: '%',
+          code: '%',
+          system: 'http://unitsofmeasure.org',
+          value: 41,
+        },
+        high: {
+          unit: '%',
+          code: '%',
+          system: 'http://unitsofmeasure.org',
+          value: 53,
         },
-      ],
-      valueQuantity: {
-        unit: '%',
-        code: '%',
-        system: 'http://unitsofmeasure.org',
-        value: 41,
+        text: '41 - 53 %',
       },
-    };
+    ],
+    valueQuantity: {
+      unit: '%',
+      code: '%',
+      system: 'http://unitsofmeasure.org',
+      value: 41,
+    },
+  };
+  it('should render component correctly with proper props', () => {
     const { container, getByTestId } = render(
       <ObservationGraph {...defaultProps} />,
     );
 
     expect(container).not.toBeNull();
-    expect(getByTestId('tooLow').textContent).toContain('41');
-    expect(getByTestId('tooHigh').textContent).toContain('53');
+    expect(getByTestId('valuePoint').textContent).toContain('41 %');
+    expect(getByTestId('rangeContent41%-53%').textContent).toContain(
+      '41 % - 53 %',
+    );
   });
 
   it('should return empty component without required props', () => {
@@ -45,4 +47,23 @@ describe('ObservationGraph component', () => {
     expect(container).not.toBeNull();
     expect(container.hasChildNodes()).toBeFalsy();
   });
+  it('should render component correctly with small props and in range value', () => {
+    defaultProps.small = true;
+    const { container, getByTestId } = render(
+      <ObservationGraph {...defaultProps} />,
+    );
+
+    expect(container).not.toBeNull();
+    expect(getByTestId('smallRangeText').textContent).toContain('in range');
+  });
+  it('should render component correctly with small props and out of range value', () => {
+    defaultProps.small = true;
+    defaultProps.valueQuantity.value = 39;
+    const { container, getByTestId } = render(
+      <ObservationGraph {...defaultProps} />,
+    );
+
+    expect(container).not.toBeNull();
+    expect(getByTestId('smallRangeText').textContent).toContain('out of range');
+  });
 });

package/src/components/resources/Patient/Patient.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import _get from 'lodash/get';
+import _isEmpty from 'lodash/isEmpty';
 import md5 from 'md5';
 
 import HumanName from '../../datatypes/HumanName';
@@ -8,8 +9,8 @@ import Telecom from '../../datatypes/Telecom';
 import Address from '../../datatypes/Address';
 import Coding from '../../datatypes/Coding';
 import Date from '../../datatypes/Date';
-import { Root, Header, Body, Value, MissingValue, Badge } from '../../ui';
-import './Patient.css';
+import Accordion from '../../containers/Accordion';
+import { Root, Header, MissingValue, Badge, Body } from '../../ui';
 
 export function PatientContact(props) {
   const { fhirData } = props;
@@ -20,7 +21,7 @@ export function PatientContact(props) {
     <div>
       <HumanName fhirData={name} />
       {relationship && (
-        <small className="fhir-resource__Patient__patientContact-relationship">{` (${relationship})`}</small>
+        <small className="text-bold">{` (${relationship})`}</small>
       )}
     </div>
   );
@@ -30,7 +31,7 @@ export function getId(fhirResource) {
   return _get(fhirResource, 'id');
 }
 export function getNames(fhirResource) {
-  return _get(fhirResource, 'name', []);
+  return _get(fhirResource, 'name.0', null);
 }
 export function getBirthDate(fhirResource) {
   return _get(fhirResource, 'birthDate');
@@ -45,7 +46,7 @@ function Patient(props) {
   const id = getId(fhirResource);
   const idHash = md5(id || '');
   const avatarSrc = `http://www.gravatar.com/avatar/${idHash}?s=50&r=any&default=identicon&forcedefault=1`;
-  const patientNames = getNames(fhirResource);
+  const patientName = getNames(fhirResource);
   const patientBirthDate = getBirthDate(fhirResource);
   const patientGender = getGender(fhirResource);
   const patientContact = _get(fhirResource, 'contact[0]');
@@ -57,7 +58,8 @@ function Patient(props) {
     .filter(item => Boolean(_get(item, 'language.coding', null)))
     .map(item => item.language.coding);
   communicationLanguage = _get(communicationLanguage, '0', []);
-  const hasCommunicationLanguage = communicationLanguage.length > 0;
+  const hasCommunicationLanguage = !_isEmpty(communicationLanguage);
+  const hasPatientPhones = !_isEmpty(patientPhones);
   const active = _get(fhirResource, 'active', false);
   const activeStatus = active ? 'active' : 'inactive';
   const deceasedBoolean = _get(fhirResource, 'deceasedBoolean', false);
@@ -68,100 +70,80 @@ function Patient(props) {
     return <HumanName fhirData={patientName} primary={index === 0} />;
   };
 
+  const tableData = [
+    {
+      label: 'Patient contact',
+      testId: 'patientContact',
+      data: patientContact && <PatientContact fhirData={patientContact} />,
+      status: patientContact,
+    },
+    {
+      label: 'Deceased',
+      testId: 'deceasedInfo',
+      data: deceasedDate ? <Date fhirData={deceasedDate} /> : 'yes',
+      status: !patientSimple && isDeceased,
+    },
+    {
+      label: 'Address',
+      testId: 'patientAddress',
+      data: patientAddress && <Address fhirData={patientAddress} />,
+      status: !patientSimple && patientAddress,
+    },
+    {
+      label: 'Telephone',
+      testId: 'patientPhones',
+      data: !hasPatientPhones ? (
+        <MissingValue />
+      ) : (
+        patientPhones.map((telecom, index) => (
+          <Telecom key={index} fhirData={telecom} />
+        ))
+      ),
+      status: !patientSimple,
+    },
+    {
+      label: 'Communication - language',
+      testId: 'communicationLanguage',
+      data:
+        hasCommunicationLanguage &&
+        communicationLanguage.map((item, i) => (
+          <Coding key={`item-${i}`} fhirData={item} />
+        )),
+      status: !patientSimple && hasCommunicationLanguage,
+    },
+  ];
+
   return (
     <Root name="Patient">
-      <Header>
-        <div className="fhir-resource__Patient__patient-block">
-          <div>
-            <img
-              className="fhir-resource__Patient__patient-avatar"
-              src={avatarSrc}
-              alt=""
-            />
-          </div>
-          <div>
-            <div className="fhir-resource__Patient__patient-block">
-              {patientNames.map((patientName, index) => {
-                if (props.thorough === false && index !== 0) {
-                  return null;
-                } else {
-                  return (
-                    <React.Fragment key={index}>
-                      <span data-testid={`patientName-${index}`}>
-                        {renderName
-                          ? renderName({
-                              patientName,
-                              defaultName,
-                              fhirVersion,
-                              id,
-                            })
-                          : defaultName(patientName, index)}
-                      </span>
-                      &nbsp;&nbsp;
-                    </React.Fragment>
-                  );
-                }
-              })}
-            </div>
-            <div>
-              {active && (
-                <Badge data-testid="activeStatus">{activeStatus}</Badge>
-              )}
-              {patientBirthDate && (
-                <span className="fhir-resource__Patient__BirthDate-block">
-                  <strong>
-                    <span data-testid="patientGender">
-                      {patientGender || 'unknown'}
-                    </span>
-                    {', '}
-                    <span data-testid="patientBirthDate">
-                      {patientBirthDate}
-                    </span>
-                  </strong>
-                  <small> (DOB)</small>
+      <Accordion
+        headerContent={
+          <Header
+            resourceName={fhirResource.resourceType}
+            additionalContent={
+              patientBirthDate && (
+                <span className="text-gray-600">
+                  <span data-testid="patientGender" className="text-capitalize">
+                    {patientGender || 'unknown'}
+                  </span>
+                  {', '}
+                  <span data-testid="patientBirthDate">{patientBirthDate}</span>
                 </span>
-              )}
-            </div>
-            <div>
-              {patientContact && <PatientContact fhirData={patientContact} />}
-            </div>
-          </div>
-        </div>
-      </Header>
-      {!patientSimple && (
-        <Body>
-          {isDeceased && (
-            <Value label="Deceased" data-testid="deceasedInfo">
-              {deceasedDate ? <Date fhirData={deceasedDate} /> : 'yes'}
-            </Value>
-          )}
-          {patientAddress && (
-            <Value label="Address" data-testid="patientAddress">
-              <Address fhirData={patientAddress} />
-            </Value>
-          )}
-          {patientPhones && (
-            <Value label="TELEPHONE" data-testid="patientPhones">
-              {patientPhones.map((telecom, index) => (
-                <div key={index}>
-                  <Telecom fhirData={telecom} />
-                </div>
-              ))}
-              {patientPhones.length === 0 && <MissingValue />}
-            </Value>
-          )}
-          {hasCommunicationLanguage && (
-            <Value
-              label="Communication - language"
-              data-testid="communicationLanguage"
-            >
-              {communicationLanguage.map((item, i) => (
-                <Coding key={`item-${i}`} fhirData={item} />
-              ))}
-            </Value>
-          )}
-        </Body>
-      )}
+              )
+            }
+            icon={avatarSrc}
+            badges={
+              active && <Badge data-testid="activeStatus">{activeStatus}</Badge>
+            }
+            title={
+              renderName
+                ? renderName({ patientName, defaultName, fhirVersion, id })
+                : defaultName(patientName, 0)
+            }
+            titleTestID="patientName"
+          />
+        }
+        bodyContent={<Body tableData={tableData} />}
+      />
     </Root>
   );
 }

package/src/components/resources/Patient/Patient.test.js

@@ -17,9 +17,9 @@ describe('should render component correctly', () => {
       <Patient {...defaultProps} />,
     );
 
-    expect(
-      getByTestId('patientName-0').textContent.replace(/\s+/g, ' '),
-    ).toEqual('Jason Argonaut (usual)');
+    expect(getByTestId('patientName').textContent.replace(/\s+/g, ' ')).toEqual(
+      'Jason Argonaut (usual)',
+    );
     expect(getByTestId('patientGender').textContent).toEqual('male');
     expect(getByTestId('patientBirthDate').textContent).toEqual('1985-08-01');
     expect(getByTestId('patientAddress').textContent).toEqual(
@@ -40,9 +40,9 @@ describe('should render component correctly', () => {
       <Patient {...defaultProps} />,
     );
 
-    expect(
-      getByTestId('patientName-0').textContent.replace(/\s+/g, ' '),
-    ).toEqual('John, X Doe (usual)');
+    expect(getByTestId('patientName').textContent.replace(/\s+/g, ' ')).toEqual(
+      'John, X Doe (usual)',
+    );
     expect(getByTestId('patientGender').textContent).toEqual('male');
     expect(getByTestId('patientBirthDate').textContent).toEqual('2014-06-01');
     expect(getByTestId('patientAddress').textContent).toEqual(' 05 99999 ');
@@ -67,9 +67,9 @@ describe('should render component correctly', () => {
       <Patient {...defaultProps} />,
     );
 
-    expect(
-      getByTestId('patientName-0').textContent.replace(/\s+/g, ' '),
-    ).toEqual('Peter, James Chalmers (official)');
+    expect(getByTestId('patientName').textContent.replace(/\s+/g, ' ')).toEqual(
+      'Peter, James Chalmers (official)',
+    );
     expect(getByTestId('patientGender').textContent).toEqual('male');
     expect(getByTestId('patientBirthDate').textContent).toEqual('1974-12-25');
     expect(getByTestId('patientAddress').textContent).toContain(
@@ -87,6 +87,6 @@ describe('should render component correctly', () => {
       fhirResource: example3PatientR4,
     };
     const { getByTestId } = render(<Patient {...defaultProps} />);
-    expect(getByTestId('deceasedInfo').textContent).toEqual('2015-02-14');
+    expect(getByTestId('deceasedInfo').textContent).toEqual('2/14/2015');
   });
 });