{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "vitals-tracker-chart", "title": "Vitals Tracker Chart", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/vitals-tracker-chart/vitals-tracker-chart.component.ts", "content": "// Patient biometrics and vitals telemetry dashboard: multi-day trend sparklines,\n// device sync status, 7-day vitals table with risk indicators, configurable clinical\n// thresholds, automated alert protocol, and a quick-entry logging dialog.\n// Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, signal } from '@angular/core'\nimport {\n Activity,\n Bell,\n CheckCircle2,\n Droplets,\n Heart,\n LucideAngularModule,\n Minus,\n Plus,\n RefreshCw,\n ShieldCheck,\n Sliders,\n Stethoscope,\n TrendingDown,\n Wind,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport {\n UiDialogComponent,\n UiDialogContentComponent,\n UiDialogDescriptionComponent,\n UiDialogFooterComponent,\n UiDialogHeaderComponent,\n UiDialogTitleComponent,\n} from '@/ui/dialog/dialog.component'\nimport { UiInputComponent } from '@/ui/input/input.component'\nimport { UiLabelComponent } from '@/ui/label/label.component'\nimport { UiProgressComponent } from '@/ui/progress/progress.component'\nimport {\n UiSelectComponent,\n UiSelectContentComponent,\n UiSelectItemComponent,\n UiSelectTriggerComponent,\n UiSelectValueComponent,\n} from '@/ui/select/select.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\nimport { UiSwitchComponent } from '@/ui/switch/switch.component'\nimport {\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n} from '@/ui/table/table.component'\nimport { UiTextareaComponent } from '@/ui/textarea/textarea.component'\n\nexport interface DailyVitalLog {\n id: string\n date: string\n isToday?: boolean\n morningBP: string\n morningPulse: number\n eveningBP: string\n eveningPulse: number\n avgBP: string\n systolicVal: number\n diastolicVal: number\n fastingGlucose: number\n glucoseStatus: 'optimal' | 'normal' | 'elevated'\n spo2: number\n riskStatus: 'optimal' | 'normal' | 'elevated'\n riskLabel: string\n notes?: string\n}\n\nconst initialLogs: DailyVitalLog[] = [\n {\n id: 'vital-1',\n date: 'Aug 21 (Today)',\n isToday: true,\n morningBP: '120/76',\n morningPulse: 66,\n eveningBP: '122/78',\n eveningPulse: 68,\n avgBP: '121/77',\n systolicVal: 121,\n diastolicVal: 77,\n fastingGlucose: 94,\n glucoseStatus: 'optimal',\n spo2: 99,\n riskStatus: 'optimal',\n riskLabel: 'Optimal',\n notes: 'Resting morning reading taken pre-breakfast.',\n },\n {\n id: 'vital-2',\n date: 'Aug 20',\n morningBP: '124/80',\n morningPulse: 70,\n eveningBP: '122/79',\n eveningPulse: 69,\n avgBP: '123/80',\n systolicVal: 123,\n diastolicVal: 80,\n fastingGlucose: 94,\n glucoseStatus: 'optimal',\n spo2: 98,\n riskStatus: 'normal',\n riskLabel: 'Normal',\n },\n {\n id: 'vital-3',\n date: 'Aug 19',\n morningBP: '126/82',\n morningPulse: 71,\n eveningBP: '125/80',\n eveningPulse: 70,\n avgBP: '126/81',\n systolicVal: 126,\n diastolicVal: 81,\n fastingGlucose: 97,\n glucoseStatus: 'normal',\n spo2: 99,\n riskStatus: 'normal',\n riskLabel: 'Normal',\n },\n {\n id: 'vital-4',\n date: 'Aug 18',\n morningBP: '132/84',\n morningPulse: 74,\n eveningBP: '130/82',\n eveningPulse: 73,\n avgBP: '131/83',\n systolicVal: 131,\n diastolicVal: 83,\n fastingGlucose: 101,\n glucoseStatus: 'elevated',\n spo2: 98,\n riskStatus: 'elevated',\n riskLabel: 'Elevated',\n notes: 'Mild post-work stress reported by patient.',\n },\n {\n id: 'vital-5',\n date: 'Aug 17',\n morningBP: '128/82',\n morningPulse: 72,\n eveningBP: '126/80',\n eveningPulse: 71,\n avgBP: '127/81',\n systolicVal: 127,\n diastolicVal: 81,\n fastingGlucose: 98,\n glucoseStatus: 'normal',\n spo2: 99,\n riskStatus: 'normal',\n riskLabel: 'Normal',\n },\n {\n id: 'vital-6',\n date: 'Aug 16',\n morningBP: '122/78',\n morningPulse: 69,\n eveningBP: '124/80',\n eveningPulse: 70,\n avgBP: '123/79',\n systolicVal: 123,\n diastolicVal: 79,\n fastingGlucose: 95,\n glucoseStatus: 'optimal',\n spo2: 99,\n riskStatus: 'optimal',\n riskLabel: 'Optimal',\n },\n {\n id: 'vital-7',\n date: 'Aug 15',\n morningBP: '120/78',\n morningPulse: 68,\n eveningBP: '121/77',\n eveningPulse: 67,\n avgBP: '121/78',\n systolicVal: 121,\n diastolicVal: 78,\n fastingGlucose: 96,\n glucoseStatus: 'optimal',\n spo2: 99,\n riskStatus: 'optimal',\n riskLabel: 'Optimal',\n },\n]\n\nconst bpHistory = [121, 123, 126, 131, 127, 123, 121]\nconst hrHistory = [68, 70, 71, 74, 72, 69, 68]\nconst glucoseHistory = [96, 95, 98, 101, 97, 94, 94]\n\ninterface SparklinePoint {\n x: number\n y: number\n}\n\nexport interface Sparkline {\n path: string\n area: string\n lastPoint: SparklinePoint\n}\n\nexport function getSparkline(history: number[]): Sparkline {\n const min = Math.min(...history)\n const max = Math.max(...history)\n const range = max - min || 1\n const height = 26\n const padding = 3\n\n const points = history.map((val, idx) => {\n const x = (idx / (history.length - 1)) * 100\n const y = height - ((val - min) / range) * (height - padding * 2) - padding\n return { x, y }\n })\n\n let path = `M ${points[0].x},${points[0].y}`\n for (let i = 1; i < points.length; i++) {\n const prev = points[i - 1]\n const curr = points[i]\n const cx = (prev.x + curr.x) / 2\n path += ` C ${cx},${prev.y} ${cx},${curr.y} ${curr.x},${curr.y}`\n }\n\n const lastPoint = points[points.length - 1]\n const area = `${path} L 100,32 L 0,32 Z`\n\n return { path, area, lastPoint }\n}\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-vitals-tracker-chart, [ui-vitals-tracker-chart]',\n standalone: true,\n // React renders the root
itself: the host stays out of layout and `class` goes to the root.\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiDialogComponent,\n UiDialogContentComponent,\n UiDialogDescriptionComponent,\n UiDialogFooterComponent,\n UiDialogHeaderComponent,\n UiDialogTitleComponent,\n UiInputComponent,\n UiLabelComponent,\n UiProgressComponent,\n UiSelectComponent,\n UiSelectContentComponent,\n UiSelectItemComponent,\n UiSelectTriggerComponent,\n UiSelectValueComponent,\n UiSeparatorComponent,\n UiSwitchComponent,\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n UiTextareaComponent,\n ],\n template: `\n
\n \n
\n
\n
\n

\n Patient Biometrics & Vitals Telemetry\n

\n \n \n MRN-84920\n \n
\n

\n Continuous physiological telemetry stream · Eleanor Vance (DOB: 1984-06-12) · Care Lead: Dr. M. Vance, MD\n

\n
\n\n
\n \n \n \n \n \n \n Apple Health / Withings Connected · Last sync\n {{ lastSyncText() }}\n \n \n \n
\n\n \n
\n \n \n \n
\n\n \n \n \n \n
\n

Log Biometric Vitals Entry

\n

\n Record manual cuff, glucometer, or pulse oximeter measurements into the clinical telemetry stream.\n

\n
\n\n
\n
\n \n \n
\n\n
\n \n \n \n \n Morning (Fasting)\n Midday (Pre-lunch)\n Evening (Post-dinner)\n Bedtime (Resting)\n \n \n
\n\n
\n \n \n \n \n Withings BPM Core\n Apple Watch Series 9\n Omron Platinum Cuff\n Dexcom G7 CGM\n Manual Clinical Station\n \n \n
\n\n
\n \n \n
\n\n
\n \n \n
\n\n
\n \n \n
\n\n
\n \n \n
\n\n
\n \n \n
\n\n
\n \n \n
\n
\n\n
\n \n \n
\n \n \n
\n
\n\n \n @if (showSuccessNotification()) {\n \n
\n \n Vitals telemetry entry successfully appended to EHR clinical chart.\n
\n \n ✕\n \n
\n }\n\n \n
\n \n
\n
\n
\n
\n \n \n
\n

Blood Pressure

\n
\n Normal\n
\n
\n
\n
\n
\n
\n 122/78\n mmHg\n
\n MAP 92 mmHg\n
\n\n \n
\n \n \n \n \n \n \n \n \n \n \n \n
\n
\n\n
\n
\n 7-Day Mean:\n 124/80 mmHg\n
\n

Target < 120/80 mmHg · Controlled

\n
\n
\n
\n\n \n
\n
\n
\n
\n \n \n
\n

Resting Heart Rate

\n
\n Healthy\n
\n
\n
\n
\n
\n
\n 68\n bpm\n
\n
\n \n -2 bpm\n
\n
\n\n \n
\n \n \n \n \n \n \n \n \n \n \n \n
\n
\n\n
\n
\n Normal Range:\n 60 – 100 bpm\n
\n

Sinus Rhythm · HRV 58 ms

\n
\n
\n \n\n \n
\n
\n
\n
\n \n \n
\n

Blood Glucose

\n
\n Fasting < 100\n
\n
\n
\n
\n
\n
\n 94\n mg/dL\n
\n
\n \n Stable\n
\n
\n\n \n
\n \n \n \n \n \n \n \n \n \n \n \n
\n
\n\n
\n
\n Fasting Window:\n 12 hrs\n
\n

Estimated HbA1c: 5.4%

\n
\n
\n \n\n \n
\n
\n
\n
\n \n \n
\n

Blood Oxygen SpO2

\n
\n ≥ 95% Normal\n
\n
\n
\n
\n
\n
\n 99%\n SpO2\n
\n 0 drops detected\n
\n \n
\n Pulse Oximeter\n Target ≥ 95%\n
\n
\n\n
\n
\n Sleep O2 Baseline:\n 98.4%\n
\n

Continuous Plethysmography

\n
\n
\n \n \n\n \n
\n
\n
\n
\n

7-Day Vitals Trend & Daily Telemetry Logs

\n

\n Comprehensive morning & evening multi-parameter biometrics with systolic range markers and risk\n stratification.\n

\n
\n
\n \n {{ dailyLogs().length }} readings logged\n \n
\n
\n
\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n @for (log of dailyLogs(); track log.id) {\n \n \n \n \n \n \n \n \n \n \n }\n \n
DateMorning ReadingEvening ReadingDaily Mean BPFasting GlucoseSpO2Systolic Band IndicatorRisk Status
\n
\n {{ log.date }}\n @if (log.isToday) {\n Now\n }\n
\n 		\n {{ log.morningBP }}\n mmHg · \n {{ log.morningPulse }} bpm\n \n {{ log.eveningBP }}\n mmHg · \n {{ log.eveningPulse }} bpm\n \n {{ log.avgBP }}\n mmHg\n \n {{ log.fastingGlucose }}\n mg/dL\n \n {{ log.spo2 }}%\n \n \n
\n
\n \n
\n \n
\n \n
\n \n
\n
\n
\n 100\n 120\n 140+\n
\n
\n 		\n \n {{ log.riskLabel }}\n \n
\n
\n
\n
\n\n \n
\n
\n
\n
\n
\n \n

Configurable Clinical Thresholds

\n
\n AHA / ACC Standards\n
\n

\n Custom warning & critical breach boundaries tailored to this patient's clinical care plan.\n

\n
\n
\n
\n
\n \n \n \n \n > 130 mmHg (Elevated)\n > 140 mmHg (Stage 2 Alert)\n > 160 mmHg (Critical Crisis)\n \n \n
\n\n
\n \n \n \n \n > 85 mmHg (Elevated)\n > 90 mmHg (Stage 2 Alert)\n > 100 mmHg (Crisis)\n \n \n
\n\n
\n \n \n \n \n < 50 or > 100 bpm\n < 55 or > 110 bpm\n < 45 or > 120 bpm (Wide)\n \n \n
\n\n
\n \n \n \n \n > 120 mg/dL (Pre-diabetic)\n > 130 mg/dL (Clinical Alert)\n > 150 mg/dL (High Trigger)\n \n \n
\n
\n\n \n\n
\n
\n

Oxygen Desaturation Limit

\n

Triggers hypoxemia alert if SpO2 drops below bound.

\n
\n \n < {{ spo2AlertLimit }}% SpO2\n \n
\n
\n
\n\n
\n
\n
\n
\n \n

Automated Clinical Alert Protocol

\n
\n \n \n Active Sentinel\n \n
\n

\n Instant escalation rules and clinician notification triggers for threshold violations.\n

\n
\n
\n
\n
\n \n

\n Immediately dispatch SMS alert to on-call cardiologist when 2 consecutive readings exceed threshold.\n

\n
\n \n
\n\n \n\n
\n
\n \n

\n Stream verified biometric readings directly to patient's electronic health record chart.\n

\n
\n \n
\n\n \n\n
\n
\n
\n \n On-Call Clinical Lead:\n
\n Dr. Sarah Chen, MD (Cardiology)\n
\n
\n Pager: #4920 · Priority SLA:\n < 15 min triage\n
\n
\n
\n
\n
\n \n `,\n})\nexport class UiVitalsTrackerChartComponent {\n protected readonly Activity = Activity\n protected readonly Bell = Bell\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly Droplets = Droplets\n protected readonly Heart = Heart\n protected readonly Minus = Minus\n protected readonly Plus = Plus\n protected readonly RefreshCw = RefreshCw\n protected readonly ShieldCheck = ShieldCheck\n protected readonly Sliders = Sliders\n protected readonly Stethoscope = Stethoscope\n protected readonly TrendingDown = TrendingDown\n protected readonly Wind = Wind\n\n @Input('class') className?: string\n\n readonly timeframe = signal<'7d' | '30d' | '90d'>('7d')\n readonly isSyncing = signal(false)\n readonly lastSyncText = signal('4m ago')\n readonly isLogDialogOpen = signal(false)\n readonly showSuccessNotification = signal(false)\n\n // Configurable Thresholds State\n readonly systolicLimit = signal('140')\n readonly diastolicLimit = signal('90')\n readonly hrAlertRange = signal('50-100')\n readonly glucoseAlertLimit = signal('130')\n readonly spo2AlertLimit = '95'\n\n // Alert Toggles\n readonly clinicianSmsAlert = signal(true)\n readonly ehrAutoSync = signal(true)\n\n // New Entry Form State\n readonly formDate = signal('2026-08-21T08:30')\n readonly formPeriod = signal('morning')\n readonly formSystolic = signal('120')\n readonly formDiastolic = signal('78')\n readonly formPulse = signal('68')\n readonly formGlucose = signal('94')\n readonly formSpo2 = signal('99')\n readonly formDevice = signal('withings')\n readonly formNotes = signal('')\n\n readonly dailyLogs = signal(initialLogs.map((l) => ({ ...l })))\n private syncTimer: ReturnType | undefined\n private toastTimer: ReturnType | undefined\n\n readonly bpSpark = () => getSparkline(bpHistory)\n readonly hrSpark = () => getSparkline(hrHistory)\n readonly gluSpark = () => getSparkline(glucoseHistory)\n\n get rootClass(): string {\n return cn('mx-auto w-full max-w-6xl space-y-6', this.className)\n }\n\n get syncIconClass(): string {\n return cn('size-3.5', this.isSyncing() && 'animate-spin')\n }\n\n timeframeClass(tf: '7d' | '30d' | '90d'): string {\n return cn(\n 'rounded-md px-2.5 py-1 font-medium transition-colors',\n this.timeframe() === tf\n ? 'bg-background text-foreground shadow-xs'\n : 'text-muted-foreground hover:text-foreground',\n )\n }\n\n systolicDotClass(log: DailyVitalLog): string {\n return cn(\n 'absolute top-1/2 size-2 -translate-y-1/2 rounded-full shadow-xs',\n log.systolicVal < 130\n ? 'bg-success ring-success/30 ring-2'\n : log.systolicVal < 140\n ? 'bg-warning ring-warning/30 ring-2'\n : 'bg-destructive ring-destructive/30 ring-2',\n )\n }\n\n systolicDotLeft(log: DailyVitalLog): number {\n return Math.min(96, Math.max(4, ((log.systolicVal - 100) / 60) * 100))\n }\n\n riskVariant(log: DailyVitalLog): 'success' | 'warning' {\n return log.riskStatus === 'elevated' ? 'warning' : 'success'\n }\n\n handleSyncRefresh(): void {\n this.isSyncing.set(true)\n clearTimeout(this.syncTimer)\n this.syncTimer = setTimeout(() => {\n this.isSyncing.set(false)\n this.lastSyncText.set('just now')\n }, 600)\n }\n\n handleLogSubmit(): void {\n const systolic = parseInt(this.formSystolic(), 10) || 120\n const diastolic = parseInt(this.formDiastolic(), 10) || 80\n const pulse = parseInt(this.formPulse(), 10) || 68\n const glucose = parseInt(this.formGlucose(), 10) || 94\n const spo2 = parseInt(this.formSpo2(), 10) || 99\n\n let riskStatus: 'optimal' | 'normal' | 'elevated' = 'normal'\n let riskLabel = 'Normal'\n\n if (systolic >= 130 || diastolic >= 85 || glucose >= 100) {\n riskStatus = 'elevated'\n riskLabel = 'Elevated'\n } else if (systolic <= 120 && diastolic <= 80 && glucose < 95) {\n riskStatus = 'optimal'\n riskLabel = 'Optimal'\n }\n\n const newLog: DailyVitalLog = {\n id: `vital-${Date.now()}`,\n date: 'Aug 21 (Manual)',\n isToday: true,\n morningBP: `${systolic}/${diastolic}`,\n morningPulse: pulse,\n eveningBP: `${systolic}/${diastolic}`,\n eveningPulse: pulse,\n avgBP: `${systolic}/${diastolic}`,\n systolicVal: systolic,\n diastolicVal: diastolic,\n fastingGlucose: glucose,\n glucoseStatus: glucose < 95 ? 'optimal' : glucose <= 99 ? 'normal' : 'elevated',\n spo2,\n riskStatus,\n riskLabel,\n notes: this.formNotes().trim() || undefined,\n }\n\n this.dailyLogs.update((prev) => [newLog, ...prev.slice(0, 6)])\n this.isLogDialogOpen.set(false)\n this.showSuccessNotification.set(true)\n clearTimeout(this.toastTimer)\n this.toastTimer = setTimeout(() => {\n this.showSuccessNotification.set(false)\n }, 4000)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/vitals-tracker-chart/vitals-tracker-chart.component.ts" }, { "path": "packages/registry-angular/blocks/vitals-tracker-chart/index.ts", "content": "export {\n UiVitalsTrackerChartComponent,\n getSparkline,\n type DailyVitalLog,\n type Sparkline,\n} from './vitals-tracker-chart.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/vitals-tracker-chart/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json", "https://uipkge.dev/r/angular/dialog.json", "https://uipkge.dev/r/angular/input.json", "https://uipkge.dev/r/angular/label.json", "https://uipkge.dev/r/angular/progress.json", "https://uipkge.dev/r/angular/select.json", "https://uipkge.dev/r/angular/separator.json", "https://uipkge.dev/r/angular/switch.json", "https://uipkge.dev/r/angular/table.json", "https://uipkge.dev/r/angular/textarea.json" ], "description": "Biometric vitals monitoring dashboard with multi-day trends, threshold bands, device sync status, 7-day vitals table with risk indicators, clinician alert limits, and quick-entry logging dialog.", "categories": [ "healthcare", "dashboard", "app" ] }