VitalsWidget

Records patient vital signs as FHIR Observation resources. Supports heart rate, blood pressure, and other vital measurements with validation.

Usage

import { VitalsWidget } from '@clinikapi/react';

<VitalsWidget
  proxyUrl="/api/clinik"
  patientId="pt_abc123"
  theme="light"
/>

Props

Prop	Type	Required	Description
`proxyUrl`	`string`	Yes	Backend proxy URL
`patientId`	`string`	Yes	Patient ID
`theme`	`'light' \| 'dark'`	No	Color theme

Form Fields

Field	Validation	FHIR Mapping
Heart Rate	20-250 bpm	Observation (LOINC 8867-4)
Blood Pressure	Required format	Observation (LOINC 85354-9) with systolic/diastolic components

Supported Observation Fields

The widget creates observations using the enriched Observation schema:

status — always final
code — LOINC vital sign code
patientId — patient reference
category — vital-signs
valueQuantity — numeric value with unit
component — for multi-component observations (e.g. BP systolic/diastolic)
interpretation — H (high), L (low), N (normal)
referenceRange — normal reference ranges
effectiveDateTime — when the measurement was taken
issued — when this version was made available

Proxy Action

The widget sends observations.create with:

{
  "action": "observations.create",
  "data": {
    "patientId": "pt_abc123",
    "status": "final",
    "code": { "system": "http://loinc.org", "code": "8867-4", "display": "Heart rate" },
    "category": "vital-signs",
    "valueQuantity": { "value": 72, "unit": "bpm" },
    "effectiveDateTime": "2025-01-15T10:00:00Z"
  }
}

​VitalsWidget

​Usage

​Props

​Form Fields

​Supported Observation Fields

​Proxy Action