Laboratory

Introduction

A laboratory panel contains the results from a single test on blood, urine, or other specimen supplied by the patient. Each of these tests results in several FHIR Observations that needs to be displayed with the appropriate labels and in a specific order. These components accept FHIR Observations, places the appropriate values in the correct order, and renders them in a clean and compact display.

Import lab panel components from the core component package:

1import "@commure/components-core/lib/style.css"; // Once at the top of your application
2import {
3  LiverFunctionTests,
4  CompleteBloodCount,
5  BasicMetabolicPanel
6} from "@commure/components-core";

LiverFunctionTests

Liver function tests, or LFTs, are measurements from a blood test that provides information about the state of a patient's liver. These measurements are used to support or rule out some diseases, or monitor function caused by medical conditions or interventions.

<FhirDataQuery queryString="Observation?category=laboratory">
  {({ data, error, loading }) => {
    const resources = data && data.entry ? data.entry.map(e => e.resource) : [];
    return <LiverFunctionTests resources={resources} hidePanelTitle />;
  }}
</FhirDataQuery>
<FhirDataQuery queryString="Observation?category=laboratory">
  {({ data, error, loading }) => {
    const resources = data && data.entry ? data.entry.map(e => e.resource) : [];
    return <LiverFunctionTests resources={resources} hidePanelTitle />;
  }}
</FhirDataQuery>
Hide code

API Reference

Prop Name	Required?	Type	Description
hideDateTime	false	boolean	Whether the datetime of the panel should be hidden.
hidePanelTitle	false	boolean	Whether the panel title should be hidden.
observationProps	false	{ [observation: string]: { decimalPlaces: number; hideUnit: boolean; [key: string]: any; }; }	Props to be passed to each Observation that gets rendered.
order	false	string[]	The order in which the Observations should be listed visually.
panelTitle	false	string	Title to render at the top of the Component.
resources	true	Observation[]	An array of Observation FHIR resources, each in json format.

CompleteBloodCount

A complete blood count, or CBC, is a blood test that contains measurements that provide information about the content of a patient's blood. These measurements are used to monitor overall health, support or rule out some diseases, or monitor inflammation and other changes caused by medical conditions or treatments.

<FhirDataQuery queryString="Observation?category=laboratory">
  {({ data, error, loading }) => {
    const resources = data && data.entry ? data.entry.map(e => e.resource) : [];
    return <CompleteBloodCount resources={resources} hidePanelTitle />;
  }}
</FhirDataQuery>
<FhirDataQuery queryString="Observation?category=laboratory">
  {({ data, error, loading }) => {
    const resources = data && data.entry ? data.entry.map(e => e.resource) : [];
    return <CompleteBloodCount resources={resources} hidePanelTitle />;
  }}
</FhirDataQuery>
Hide code

API Reference

Prop Name	Required?	Type	Description
hideDateTime	false	boolean	Whether the datetime of the panel should be hidden.
hidePanelTitle	false	boolean	Whether the panel title should be hidden.
observationProps	false	{ [observation: string]: { decimalPlaces: number; hideUnit: boolean; [key: string]: any; }; }	Props to be passed to each Observation that gets rendered.
order	false	string[]	The order in which the Observations should be listed visually.
panelTitle	false	string	Title to render at the top of the Component.
resources	true	Observation[]	An array of Observation FHIR resources, each in json format.

BasicMetabolicPanel

A basic metabolic panel, or BMP, is a common blood test that provides broad information about a patient's health. These measurements communicate information about a patient's fluid status, organ function, electrolyte imbalance, and more.

<FhirDataQuery queryString="Observation?category=laboratory">
  {({ data, error, loading }) => {
    const resources = data && data.entry ? data.entry.map(e => e.resource) : [];
    return <BasicMetabolicPanel resources={resources} hidePanelTitle />;
  }}
</FhirDataQuery>
<FhirDataQuery queryString="Observation?category=laboratory">
  {({ data, error, loading }) => {
    const resources = data && data.entry ? data.entry.map(e => e.resource) : [];
    return <BasicMetabolicPanel resources={resources} hidePanelTitle />;
  }}
</FhirDataQuery>
Hide code

API Reference

Prop Name	Required?	Type	Description
hideDateTime	false	boolean	Whether the datetime of the panel should be hidden.
hidePanelTitle	false	boolean	Whether the panel title should be hidden.
observationProps	false	{ [observation: string]: { decimalPlaces: number; hideUnit: boolean; [key: string]: any; }; }	Props to be passed to each Observation that gets rendered.
order	false	string[]	The order in which the Observations should be listed visually.
panelTitle	false	string	Title to render at the top of the Component.
resources	true	Observation[]	An array of Observation FHIR resources, each in json format.

Related Reading

FHIR Observation Resource

Glossary of Medical Terms

Data Type Display Components