fhir-react 0.2.4 → 0.3.0

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

@@ -1,15 +1,14 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-
 import ExplanationOfBenefit from './ExplanationOfBenefit';
-import { nbspRegex } from '../../../testUtils';
-import fhirVersions from '../fhirResourceVersions';
+import React from 'react';
 import dstu2Example1 from '../../../fixtures/dstu2/resources/explanationOfBenefit/example1.json';
+import example1R4 from '../../../fixtures/r4/resources/explanationOfBenefit/personPrimaryCoverage.json';
 import example1Stu3 from '../../../fixtures/stu3/resources/explanationOfBenefit/example1.json';
 import example2Stu3 from '../../../fixtures/stu3/resources/explanationOfBenefit/example2.json';
-import example1R4 from '../../../fixtures/r4/resources/explanationOfBenefit/personPrimaryCoverage.json';
 import exampleC4BB from '../../../fixtures/r4/resources/explanationOfBenefit/c4bbExample.json';
 import exampleC4BBExtendedDiagnosis from '../../../fixtures/r4/resources/explanationOfBenefit/c4bbExtendedDiagnosis.json';
+import fhirVersions from '../fhirResourceVersions';
+import { nbspRegex } from '../../../testUtils';
+import { render } from '@testing-library/react';
 
 describe('should render ExplanationOfBenefit component properly', () => {
   it('should render with DSTU2 source data', () => {
@@ -24,7 +23,7 @@ describe('should render ExplanationOfBenefit component properly', () => {
     expect(container).not.toBeNull();
 
     expect(getByTestId('title').textContent).toContain('Claim settled as ');
-    expect(getByTestId('created').textContent).toContain('2014-08-16');
+    expect(getByTestId('created').textContent).toContain('8/16/2014');
     expect(getByTestId('insurer').textContent).toContain('Organization/2');
   });
 
@@ -40,13 +39,11 @@ describe('should render ExplanationOfBenefit component properly', () => {
     expect(container).not.toBeNull();
 
     expect(getByTestId('title').textContent).toContain('Claim settled as ');
-    expect(getByTestId('created').textContent).toContain('2014-08-16');
+    expect(getByTestId('created').textContent).toContain('8/16/2014');
+    expect(getByTestId('metricAmount').textContent).toContain('$135.57');
     expect(
-      getByTestId('totalCost').textContent.replace(nbspRegex, ' '),
-    ).toEqual('135.57 USD');
-    expect(
-      getByTestId('totalBenefit').textContent.replace(nbspRegex, ' '),
-    ).toContain('96 USD');
+      getByTestId('planDiscount').textContent.replace(nbspRegex, ' '),
+    ).toContain('$96.00');
     expect(getByTestId('hasServices').textContent).toContain('(1200)');
   });
 
@@ -72,15 +69,19 @@ describe('should render ExplanationOfBenefit component properly', () => {
       fhirVersion: fhirVersions.R4,
     };
 
-    const { container, getByTestId, queryByTestId } = render(
-      <ExplanationOfBenefit {...defaultProps} />,
-    );
+    const {
+      container,
+      getByTestId,
+      queryByTestId,
+      getAllByTestId,
+      getAllByRole,
+    } = render(<ExplanationOfBenefit {...defaultProps} />);
     expect(container).not.toBeNull();
 
     expect(getByTestId('title').textContent).toEqual(
       'Claim settled as per contract.',
     );
-    expect(getByTestId('created').textContent).toEqual('2014-08-16');
+    expect(getByTestId('created').textContent).toEqual('8/16/2014');
     expect(getByTestId('insurer').textContent).toEqual('Organization/3');
     expect(getByTestId('provider').textContent).toEqual('Practitioner/1');
     expect(getByTestId('totalSum').textContent).toContain('135.57');
@@ -89,38 +90,43 @@ describe('should render ExplanationOfBenefit component properly', () => {
     expect(getByTestId('insurance').textContent).toEqual('Coverage/9876B1');
 
     expect(queryByTestId('hasServices')).not.toBeNull();
-    const tablesContent = [];
-    getByTestId('hasServices')
-      .querySelectorAll('.fhir-ui__TableRow')
-      .forEach(el => {
-        const tds = [];
-        el.querySelectorAll('.fhir-ui__TableCell').forEach(item => {
-          tds.push(String(item.textContent).trim());
-        });
-        tablesContent.push(tds);
-      });
-    // table header
-    expect(tablesContent[0]).toEqual([
+
+    // checking if text content of each header cell is equal to mocked data
+    const headerCells = getAllByRole('columnheader')
+      .slice(0, 4)
+      .map(x => x.textContent);
+    expect(headerCells).toEqual([
       'Service',
       'Service date',
       'Quantity',
       'Item cost',
     ]);
 
-    // table 1st row
-    expect(tablesContent[1]).toEqual([
-      '(1205)',
-      '2014-08-16',
-      '-',
+    // checking if text content of each column is equal to mocked data
+    const explanationService = getAllByTestId('explanation.service').map(
+      n => n.textContent,
+    );
+    const expectedArray = ['(1205)', '(group)'];
+    explanationService.forEach((x, i) => expect(x).toContain(expectedArray[i]));
+
+    const explanationServicedDate = getAllByTestId(
+      'explanation.servicedDate',
+    ).map(n => n.textContent);
+    expect(explanationServicedDate).toEqual(['8/16/2014', '8/16/2014']);
+
+    const explanationQuantity = getAllByTestId('explanation.quantity').map(
+      n => n.textContent,
+    );
+    expect(explanationQuantity).toEqual(['-', '-']);
+
+    const explanationItemCost = getAllByTestId('explanation.itemCost').map(
+      n => n.textContent,
+    );
+    expect(explanationItemCost).toEqual([
       `135.57${String.fromCharCode(160)}USD`,
-    ]);
-    // table 2nd row
-    expect(tablesContent[2]).toEqual([
-      '(group)',
-      '2014-08-16',
-      '-',
       `200${String.fromCharCode(160)}USD`,
     ]);
+
     expect(queryByTestId('hasInformation')).toBeNull();
     expect(queryByTestId('totalBenefit')).toBeNull();
     expect(queryByTestId('totalCost')).toBeNull();
@@ -156,12 +162,17 @@ describe('should render ExplanationOfBenefit component properly', () => {
       withCarinBBProfile: true,
     };
 
-    const { container, getByTestId, queryByTestId, queryAllByTestId } = render(
-      <ExplanationOfBenefit {...defaultProps} />,
-    );
+    const {
+      container,
+      getByTestId,
+      queryByTestId,
+      queryAllByTestId,
+      getAllByTestId,
+      getAllByRole,
+    } = render(<ExplanationOfBenefit {...defaultProps} />);
     expect(container).not.toBeNull();
 
-    expect(getByTestId('created').textContent).toEqual('2017-01-05');
+    expect(getByTestId('created').textContent).toEqual('1/5/2017');
     expect(getByTestId('identifier').textContent).toContain(
       'c145d3fe-d56e-dc26-75e9-01e90672f506',
     );
@@ -176,7 +187,7 @@ describe('should render ExplanationOfBenefit component properly', () => {
       'Organization/iAxXvHiphwGGAL48m3B7XXtKlLZg6yXnC1ch84x1up',
     );
     expect(getByTestId('billablePeriod').textContent).toEqual(
-      'From: 2017-01-05; To: 2018-01-05',
+      'From: 1/5/2017; To: 1/5/2018',
     );
     expect(getByTestId('patient').textContent).toEqual(
       'Patient/f56391c2-dd54-b378-46ef-87c1643a2ba0',
@@ -193,29 +204,35 @@ describe('should render ExplanationOfBenefit component properly', () => {
       'clmrecvddate',
     );
     expect(getByTestId('supportingInfo.timingDate').textContent).toEqual(
-      '2017-01-05',
-    );
-
-    const tablesContent = [];
-    getByTestId('hasServices')
-      .querySelectorAll('.fhir-ui__TableRow')
-      .forEach(el => {
-        const tds = [];
-        el.querySelectorAll('.fhir-ui__TableCell').forEach(item => {
-          tds.push(String(item.textContent).trim());
-        });
-        tablesContent.push(tds);
-      });
-    // table header
-    expect(tablesContent[0]).toEqual([
+      '1/5/2017',
+    );
+
+    // checking if text content of each header cell is equal to mocked data
+    const headerCells = getAllByRole('columnheader')
+      .slice(0, 4)
+      .map(x => x.textContent);
+    expect(headerCells).toEqual([
       'Service',
       'Service date',
       'Quantity',
       'Item cost',
     ]);
 
-    // table 1st row
-    expect(tablesContent[1][0]).toContain('(185345009)');
+    // checking if text content of first column is equal to mocked data
+    const explanationService = getAllByTestId('explanation.service').map(
+      n => n.textContent,
+    );
+    const expectedArray = [
+      'Encounter for symptom (185345009)',
+      'Acute bronchitis (disorder) (10509002)',
+      'Measurement of respiratory function (procedure) (23426006)',
+    ];
+    const replaceWhitespaces = text => text.replace(/\s+/g, ' ');
+    explanationService.forEach((x, i) => {
+      expect(replaceWhitespaces(x)).toEqual(
+        replaceWhitespaces(expectedArray[i]),
+      );
+    });
 
     expect(queryAllByTestId('items.level')).not.toBeNull();
     expect(queryAllByTestId('items.sequence')).not.toBeNull();

package/src/components/resources/ExplanationOfBenefit/Items.js

@@ -18,7 +18,7 @@ import Period from '../../datatypes/Period';
 const Items = ({ fhirData: items = [] }) => {
   if (items.length === 0) return null;
   return (
-    <ValueSection label="Items" data-testid="items">
+    <ValueSection label="Items" data-testid="items" marginTop>
       <Table>
         <thead>
           <TableRow>
@@ -33,7 +33,7 @@ const Items = ({ fhirData: items = [] }) => {
             <TableHeader>Net</TableHeader>
           </TableRow>
         </thead>
-        <tbody>
+        <tbody className="border-top-0">
           {items.map((item, idx) => (
             <Item key={idx} item={item} level={0} parentSequences={[]} />
           ))}

package/src/components/resources/ExplanationOfBenefit/PriceLabel.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { parseValueIntoMonetaryValueOfGivenCurrency } from '../../../utils';
+
+const PriceLabel = ({ ...props }) => {
+  const { totalCost } = props;
+
+  return (
+    <h3
+      className="fw-bold fs-2 mb-0 w-90 title-width-sm"
+      data-testid="headerPrice"
+    >
+      {parseValueIntoMonetaryValueOfGivenCurrency(
+        totalCost.value,
+        totalCost.code,
+      )}
+    </h3>
+  );
+};
+
+export default PriceLabel;

package/src/components/resources/ExplanationOfBenefit/Related.js

@@ -15,17 +15,17 @@ const Related = ({ fhirData }) => {
     return (
       <div key={`total-${index}`}>
         {claim && (
-          <Value label="Claim" data-testid="claim">
+          <Value label="Claim" data-testid="claim" dirColumn>
             <Reference fhirData={claim} />
           </Value>
         )}
         {relationship && (
-          <Value label="Relationship" data-testid="relationship">
+          <Value label="Relationship" data-testid="relationship" dirColumn>
             <CodeableConcept fhirData={relationship} />
           </Value>
         )}
         {reference && (
-          <Value label="Reference" data-testid="reference">
+          <Value label="Reference" data-testid="reference" dirColumn>
             <Identifier fhirData={reference} />
           </Value>
         )}

package/src/components/resources/ExplanationOfBenefit/SupportingInfo.js

@@ -19,24 +19,34 @@ const SupportingInfo = ({ fhirData }) => {
         <ValueSection
           label={`Supporting information ${sequence}.`}
           data-testid="supportingInfo"
+          marginTop
         >
           {category && (
-            <Value label="Category" data-testid="supportingInfo.category">
+            <Value
+              dirColumn
+              label="Category"
+              data-testid="supportingInfo.category"
+            >
               <CodeableConcept fhirData={category} />
             </Value>
           )}
           {code && (
-            <Value label="Code" data-testid="supportingInfo.code">
+            <Value dirColumn label="Code" data-testid="supportingInfo.code">
               <CodeableConcept fhirData={code} />
             </Value>
           )}
           {timingDate && (
-            <Value label="Date" data-testid="supportingInfo.timingDate">
+            <Value
+              dirColumn
+              label="Date"
+              data-testid="supportingInfo.timingDate"
+            >
               <Date fhirData={timingDate} />
             </Value>
           )}
           {timingPeriodStart && (
             <Value
+              dirColumn
               label="Start date"
               data-testid="supportingInfo.timingPeriodStart"
             >
@@ -45,6 +55,7 @@ const SupportingInfo = ({ fhirData }) => {
           )}
           {timingPeriodEnd && (
             <Value
+              dirColumn
               label="End date"
               data-testid="supportingInfo.timingPeriodEnd"
             >

package/src/components/resources/ExplanationOfBenefit/TotalGraph.js

@@ -0,0 +1,68 @@
+import React from 'react';
+
+import { Value } from '../../ui/index';
+import { ValueSection } from '../../ui/index';
+import ExplanationOfBenefitGraph from '../ExplanationOfBenefitGraph/ExplanationOfBenefitGraph';
+import { parseValueIntoMonetaryValueOfGivenCurrency } from '../../../utils';
+
+const TotalGraph = ({ fhirData }) => {
+  const { totalCost, totalBenefit } = fhirData;
+
+  // currently supported format: STU3
+  const getChartData = () => {
+    if (totalCost && totalBenefit) {
+      return [
+        {
+          id: 'youPaid',
+          label: 'You paid',
+          value: totalCost.value - totalBenefit.value,
+          color: '#0D6EFD',
+        },
+        {
+          id: 'planDiscount',
+          label: 'Plan discount',
+          value: totalBenefit.value,
+          color: '#FFC107',
+        },
+      ];
+    }
+  };
+
+  return (
+    <ValueSection label="Total" data-testid="total" marginTop>
+      <div className="bg-light my-3 py-2 d-flex flex-column flex-sm-row">
+        <div className="graph-width-sm">
+          <ExplanationOfBenefitGraph
+            pieChartProperties={{ isInteractive: false }}
+            data={getChartData({ totalCost, totalBenefit })}
+            margin={{ top: 20, bottom: 20 }}
+          />
+        </div>
+        <div className="my-sm-auto">
+          <div className="row justify-content-center">
+            {getChartData({ totalCost, totalBenefit }).map((item, index) => (
+              <div
+                key={`graph-legend-item-${index}`}
+                style={{ minWidth: 160 }}
+                className="d-flex mb-2 px-3 w-auto"
+              >
+                <span
+                  className="me-2 rounded-pill mt-3 mb-2 my-sm-0"
+                  style={{ width: 4, background: item.color }}
+                />
+                <Value dirColumn label={item.label} data-testid={item.id}>
+                  {parseValueIntoMonetaryValueOfGivenCurrency(
+                    item.value,
+                    totalBenefit.code,
+                  )}
+                </Value>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </ValueSection>
+  );
+};
+
+export default TotalGraph;

package/src/components/resources/ExplanationOfBenefitGraph/ExplanationOfBenefitGraph.js

@@ -0,0 +1,89 @@
+import React from 'react';
+
+import { Root } from '../../ui';
+import { ResponsivePie } from '@nivo/pie';
+import PropTypes from 'prop-types';
+
+const ExplanationOfBenefitGraph = props => {
+  const {
+    data,
+    totalLabel,
+    height,
+    margin,
+    enableValueLabels,
+    enableLinkLabels,
+    pieChartProperties,
+  } = props;
+
+  const getTotalAmount = () => {
+    const total = data.reduce((n, { value }) => n + value, 0);
+    return `$${Number(total).toFixed(2)}`;
+  };
+
+  const getValidMargin = margin => {
+    const resultMargin = {};
+    if (margin) {
+      if ('top' in margin) resultMargin.top = margin.top;
+      if ('right' in margin) resultMargin.right = margin.right;
+      if ('bottom' in margin) resultMargin.bottom = margin.bottom;
+      if ('left' in margin) resultMargin.left = margin.left;
+    }
+    return resultMargin;
+  };
+
+  const CenteredMetric = () => (
+    <div className="position-absolute d-flex flex-column w-100 translate-middle-y top-50">
+      <h6 className="text-secondary" data-testid="metricText">
+        {totalLabel || 'Total'}
+      </h6>
+      <h5 className="fw-bold text-dark" data-testid="metricAmount">
+        {getTotalAmount()}
+      </h5>
+    </div>
+  );
+
+  return (
+    <Root name="ExplanationOfBenefitGraph">
+      {/* according to nivo library documentation, to keep Pie Chart svg aligned, 'height' prop has to be constant */}
+      <div
+        style={{ height: height || 200 }}
+        className="position-relative text-center"
+        data-testid="responsivePie"
+      >
+        <ResponsivePie
+          data={data}
+          margin={getValidMargin(margin)}
+          colors={{ datum: 'data.color' }}
+          enableArcLabels={enableValueLabels || false}
+          enableArcLinkLabels={enableLinkLabels || false}
+          innerRadius={0.88}
+          activeOuterRadiusOffset={1}
+          borderWidth={0.1}
+          borderColor={{ from: 'color', modifiers: [['darker', 0.2]] }}
+          {...pieChartProperties}
+        />
+        <CenteredMetric />
+      </div>
+    </Root>
+  );
+};
+
+ExplanationOfBenefitGraph.propTypes = {
+  data: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.string.isRequired,
+      label: PropTypes.string.isRequired,
+      value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+        .isRequired,
+      color: PropTypes.string.isRequired,
+    }),
+  ).isRequired,
+  height: PropTypes.string,
+  margin: PropTypes.shape({}),
+  enableValueLabels: PropTypes.bool,
+  enableLinkLabels: PropTypes.bool,
+  totalLabel: PropTypes.string,
+  pieChartProperties: PropTypes.shape({}),
+};
+
+export default ExplanationOfBenefitGraph;

package/src/components/resources/ExplanationOfBenefitGraph/ExplanationOfBenefitGraph.stories.js

@@ -0,0 +1,78 @@
+import React from 'react';
+
+import ExplanationOfBenefitGraph from './ExplanationOfBenefitGraph';
+
+export default { title: 'ExplanationOfBenefitGraph' };
+
+const CHART_DATA = [
+  {
+    id: 'a',
+    label: 'a',
+    value: 35,
+    color: '#3498DB',
+  },
+  {
+    id: 'b',
+    label: 'b',
+    value: 200,
+    color: '#17A589',
+  },
+  {
+    id: 'c',
+    label: 'c',
+    value: 76,
+    color: '#D4AC0D',
+  },
+  {
+    id: 'd',
+    label: 'd',
+    value: 76,
+    color: '#EDBB99',
+  },
+];
+
+export const DefaultExplanationOfBenefitGraph = () => {
+  return (
+    <ExplanationOfBenefitGraph
+      data={CHART_DATA}
+      margin={{ top: 10, bottom: 10 }}
+    />
+  );
+};
+
+export const ExplanationOfBenefitGraphWithCustomCenteredMetric = () => {
+  return <ExplanationOfBenefitGraph data={CHART_DATA} totalLabel="Custom" />;
+};
+
+export const ExplanationOfBenefitGraphWithHeightAndMargin = () => {
+  return (
+    <ExplanationOfBenefitGraph
+      data={CHART_DATA}
+      margin={{ top: 40, bottom: 40 }}
+      height={250}
+    />
+  );
+};
+
+export const ExplanationOfBenefitGraphWithLabels = () => {
+  return (
+    <ExplanationOfBenefitGraph
+      data={CHART_DATA}
+      margin={{ top: 20, bottom: 20 }}
+      enableLinkLabels
+      enableValueLabels
+    />
+  );
+};
+
+export const ExplanationOfBenefitGraphWithPieChartProperties = () => {
+  return (
+    <ExplanationOfBenefitGraph
+      data={CHART_DATA}
+      margin={{ top: 20, bottom: 20 }}
+      enableLinkLabels
+      enableValueLabels
+      pieChartProperties={{ startAngle: 90, cornerRadius: 15, borderWidth: 4 }}
+    />
+  );
+};

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

@@ -0,0 +1,51 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import ExplanationOfBenefitGraph from './ExplanationOfBenefitGraph';
+
+const CHART_DATA = [
+  {
+    id: 'a',
+    label: 'a',
+    value: 35,
+    color: '#3498DB',
+  },
+  {
+    id: 'b',
+    label: 'b',
+    value: 200,
+    color: '#17A589',
+  },
+  {
+    id: 'c',
+    label: 'c',
+    value: 76,
+    color: '#D4AC0D',
+  },
+  {
+    id: 'd',
+    label: 'd',
+    value: 76,
+    color: '#EDBB99',
+  },
+];
+
+describe('should render ExplanationOfBenefitGraph properly', () => {
+  it('should render with ExplanationOfBenefitGraph data', () => {
+    const defaultProps = {
+      data: CHART_DATA,
+      totalLabel: 'Custom',
+    };
+
+    const { container, getByTestId } = render(
+      <ExplanationOfBenefitGraph {...defaultProps} />,
+    );
+    expect(container).not.toBeNull();
+
+    expect(getByTestId('responsivePie')).not.toBeNull();
+    expect(getByTestId('metricText').textContent).toContain('Custom');
+    const totalValue = CHART_DATA.reduce((n, { value }) => n + value, 0);
+    expect(getByTestId('metricAmount').textContent).toContain(
+      `$${Number(totalValue).toFixed(2)}`,
+    );
+  });
+});

package/src/components/resources/ExplanationOfBenefitGraph/index.js

@@ -0,0 +1,3 @@
+import ExplanationOfBenefitGraph from './ExplanationOfBenefitGraph';
+
+export default ExplanationOfBenefitGraph;

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

@@ -70,7 +70,7 @@ describe('should render Goal component properly', () => {
       'Peter James Chalmers',
     );
 
-    expect(getByTestId('statusDate').textContent).toEqual('2016-02-14');
+    expect(getByTestId('statusDate').textContent).toEqual('2/14/2016');
 
     expect(getByTestId('description').textContent).toEqual(
       'Target weight is 160 to 180 lbs.',