npm - fhir-react - Versions diffs - 0.2.4 → 0.3.3 - Mend

fhir-react 0.2.4 → 0.3.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (138) hide show

package/src/components/resources/Observation/Observation.js CHANGED Viewed

@@ -2,16 +2,17 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import _get from 'lodash/get';
-import _isFinite from 'lodash/isFinite';
+import _isEmpty from 'lodash/isEmpty';
+import Accordion from '../../containers/Accordion';
 import Coding from '../../datatypes/Coding';
 import Date from '../../datatypes/Date';
 import ObservationGraph from './ObservationGraph';
 import {
   Root,
   Header,
-  Title,
   Badge,
   BadgeSecondary,
+  ValueUnit,
   Body,
   Value,
 } from '../../ui';
@@ -23,6 +24,7 @@ const Observation = props => {
   const codeCodingDisplay = _get(fhirResource, 'code.coding.0.display');
   const codeText = _get(fhirResource, 'code.text', '');
   const valueQuantityValue = _get(fhirResource, 'valueQuantity.value', '');
+  const issued = _get(fhirResource, 'issued', '');
   const valueQuantityUnit = _get(fhirResource, 'valueQuantity.unit', '');
   const status = _get(fhirResource, 'status', '');
   const valueCodeableConceptText = _get(
@@ -41,68 +43,84 @@ const Observation = props => {
   let valueQuantityValueNumber = valueQuantityValue;
-  if (
-    _isFinite(Number(props.digitsToRoundForQuantity)) &&
-    valueQuantityValue !== '' &&
-    _isFinite(Number(valueQuantityValue))
-  ) {
-    valueQuantityValueNumber = Number(valueQuantityValue).toFixed(
-      props.digitsToRoundForQuantity,
-    );
-  }
-  const valueQuantityString = `${valueQuantityValueNumber}${valueQuantityUnit}`.trim();
   const subject = _get(fhirResource, 'subject');
+  const tableData = [
+    {
+      label: 'Issued on',
+      testId: 'issuedOn',
+      data: effectiveDate && <Date fhirData={effectiveDate} isBlack />,
+      status: effectiveDate,
+    },
+    {
+      label: 'Subject',
+      testId: 'subject',
+      data: subject && <Reference fhirData={subject} />,
+      status: subject,
+    },
+    {
+      label: 'Coding',
+      testId: 'coding',
+      data: valueCodeableConceptCoding.map((coding, i) => (
+        <Coding fhirData={coding} key={`value-coding-${i}`} />
+      )),
+      status: !_isEmpty(valueCodeableConceptCoding),
+    },
+  ];
   return (
     <Root name="Observation">
-      <Header>
-        <Title>
-          {codeCodingDisplay || codeText}
-          {valueQuantityString && (
-            <>
-              &nbsp;
-              <code data-testid="valueQuantity">{valueQuantityString}</code>
-            </>
-          )}
-        </Title>
-        {status && <Badge data-testid="status">{status}</Badge>}
-        {(valueCodeableConceptText || valueCodeableConceptCodingDisplay) && (
-          <BadgeSecondary data-testid="secondaryStatus">
-            {valueCodeableConceptText || valueCodeableConceptCodingDisplay}
-          </BadgeSecondary>
-        )}
-      </Header>
-      <Body>
-        <ObservationGraph
-          valueQuantity={fhirResource.valueQuantity}
-          referenceRange={fhirResource.referenceRange}
-        />
-        {effectiveDate && (
-          <Value label="Issued on" data-testid="issuedOn">
-            <Date fhirData={effectiveDate} />
-          </Value>
-        )}
-        {subject && (
-          <Value label="Subject" data-testid="subject">
-            <Reference fhirData={subject} />
-          </Value>
-        )}
-        {valueCodeableConceptCoding.map((coding, i) => (
-          <Coding fhirData={coding} key={`value-coding-${i}`} />
-        ))}
-      </Body>
+      <Accordion
+        headerContent={
+          <Header
+            resourceName={fhirResource.resourceType}
+            additionalContent={
+              issued && (
+                <Value label="Start date" data-testid="headerStartDate">
+                  <Date fhirData={issued} isBlack />
+                </Value>
+              )
+            }
+            prefixBadge={
+              <ValueUnit
+                valueQty={valueQuantityValueNumber}
+                valueUnit={valueQuantityUnit}
+              />
+            }
+            additionalBadge={
+              (valueCodeableConceptText ||
+                valueCodeableConceptCodingDisplay) && (
+                <BadgeSecondary data-testid="secondaryStatus">
+                  {valueCodeableConceptText ||
+                    valueCodeableConceptCodingDisplay}
+                </BadgeSecondary>
+              )
+            }
+            badges={status && <Badge data-testid="status">{status}</Badge>}
+            title={codeCodingDisplay || codeText}
+            rightAdditionalContent={
+              <ObservationGraph
+                valueQuantity={fhirResource.valueQuantity}
+                referenceRange={fhirResource.referenceRange}
+                small
+              />
+            }
+          />
+        }
+        bodyContent={
+          <Body tableData={tableData} reverseContent>
+            <ObservationGraph
+              valueQuantity={fhirResource.valueQuantity}
+              referenceRange={fhirResource.referenceRange}
+            />
+          </Body>
+        }
+      />
     </Root>
   );
 };
 Observation.propTypes = {
   fhirResource: PropTypes.shape({}).isRequired,
-  digitsToRoundForQuantity: PropTypes.number,
-};
-Observation.defaultProps = {
-  digitsToRoundForQuantity: 2,
 };
 export default Observation;

package/src/components/resources/Observation/Observation.test.js CHANGED Viewed

@@ -62,14 +62,14 @@ describe('should render component correctly', () => {
     );
     expect(getByTestId('status').textContent).toEqual('final');
     expect(getByTestId('secondaryStatus').textContent).toEqual('YES');
-    expect(getByTestId('issuedOn').textContent).toEqual('2016-05-18');
+    expect(getByTestId('issuedOn').textContent).toEqual('5/18/2016');
     expect(getByTestId('subject').textContent).toContain('Patient/infant');
     expect(queryByText(/373066001/g)).not.toBeNull();
   });
-  test('should round the quantity to default value of digitsToRoundForQuantity props ', () => {
+  test('should display not rounded value', () => {
     const resource = example1ObservationExcessR4;
-    resource.valueQuantity.value = 6.43534535434;
+    resource.valueQuantity.value = 6.443;
     const defaultProps = {
       fhirResource: example1ObservationExcessR4,
@@ -77,20 +77,8 @@ describe('should render component correctly', () => {
     const { getByTestId } = render(<Observation {...defaultProps} />);
     expect(getByTestId('valueQuantity')).not.toBeNull();
-    expect(getByTestId('valueQuantity').textContent).toEqual('6.44mmol/l');
-  });
-  test('should round the quantity to specific value of digitsToRoundForQuantity props ', () => {
-    const resource = example1ObservationExcessR4;
-    resource.valueQuantity.value = 6.43534535434;
-    const defaultProps = {
-      fhirResource: example1ObservationExcessR4,
-      digitsToRoundForQuantity: 3,
-    };
-    const { getByTestId } = render(<Observation {...defaultProps} />);
-    expect(getByTestId('valueQuantity')).not.toBeNull();
-    expect(getByTestId('valueQuantity').textContent).toEqual('6.435mmol/l');
+    expect(getByTestId('valueQuantity').textContent).toEqual('6.443');
+    expect(getByTestId('valueQuantityUnit')).not.toBeNull();
+    expect(getByTestId('valueQuantityUnit').textContent).toEqual('mmol/l');
   });
 });

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

@@ -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 CHANGED Viewed

@@ -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');
+  });
 });