Vitals Monitor: Shows relative time for blood pressure and hide if st…

…ale (30 mins) (#6407) * shows relative time for bp (part of #6393) * add comments
coronasafe · Oct 6, 2023 · 9d26e02 · 9d26e02
1 parent 91abee0
commit 9d26e02
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 7 deletions.
diff --git a/src/Components/VitalsMonitor/HL7PatientVitalsMonitor.tsx b/src/Components/VitalsMonitor/HL7PatientVitalsMonitor.tsx
@@ -8,6 +8,15 @@ import { classNames } from "../../Utils/utils";
 import { IVitalsComponentProps, VitalsValueBase } from "./types";
 import { triggerGoal } from "../../Integrations/Plausible";
 import useAuthUser from "../../Common/hooks/useAuthUser";
+import dayjs from "dayjs";
+
+const minutesAgo = (timestamp: string) => {
+  return `${dayjs().diff(dayjs(timestamp), "minute")}m ago`;
+};
+
+const isWithinMinutes = (timestamp: string, minutes: number) => {
+  return dayjs().diff(dayjs(timestamp), "minute") < minutes;
+};
 
 export default function HL7PatientVitalsMonitor(props: IVitalsComponentProps) {
   const { connect, waveformCanvas, data, isOnline } = useHL7VitalsMonitor(
@@ -30,6 +39,10 @@ export default function HL7PatientVitalsMonitor(props: IVitalsComponentProps) {
     connect(props.socketUrl);
   }, [props.socketUrl]);
 
+  const bpWithinMaxPersistence = !!(
+    (data.bp?.["date-time"] && isWithinMinutes(data.bp?.["date-time"], 30)) // Max blood pressure persistence is 30 minutes
+  );
+
   return (
     <div className="flex flex-col gap-1 rounded bg-[#020617] p-2">
       {props.patientAssetBed && (
@@ -97,24 +110,37 @@ export default function HL7PatientVitalsMonitor(props: IVitalsComponentProps) {
 
           {/* Blood Pressure */}
           <div className="flex flex-col p-1">
-            <div className="flex w-full gap-2 font-bold text-orange-500">
+            <div className="flex w-full justify-between gap-2 font-bold text-orange-500">
               <span className="text-sm">NIBP</span>
-              <span className="text-xs">{data.bp?.systolic.unit ?? "--"}</span>
+              <span className="text-xs">
+                {bpWithinMaxPersistence ? data.bp?.systolic.unit ?? "--" : "--"}
+              </span>
+              <span className="text-xs">
+                {data.bp?.["date-time"] && minutesAgo(data.bp?.["date-time"])}
+              </span>
             </div>
             <div className="flex w-full justify-center text-sm font-medium text-orange-500">
               Sys / Dia
             </div>
             <div className="flex w-full justify-center text-2xl font-black text-orange-300 md:text-4xl">
-              <span>{data.bp?.systolic.value ?? "--"}</span>
+              <span>
+                {bpWithinMaxPersistence
+                  ? data.bp?.systolic.value ?? "--"
+                  : "--"}
+              </span>
               <span>/</span>
-              <span>{data.bp?.diastolic.value ?? "--"}</span>
+              <span>
+                {bpWithinMaxPersistence
+                  ? data.bp?.diastolic.value ?? "--"
+                  : "--"}
+              </span>
             </div>
             <div className="flex items-end">
               <span className="flex-1 text-sm font-bold text-orange-500">
                 Mean
               </span>
               <span className="flex-1 text-xl font-bold text-gray-300">
-                {data.bp?.map.value ?? "--"}
+                {bpWithinMaxPersistence ? data.bp?.map.value ?? "--" : "--"}
               </span>
             </div>
           </div>

diff --git a/src/Components/VitalsMonitor/types.ts b/src/Components/VitalsMonitor/types.ts
@@ -8,7 +8,7 @@ export interface VitalsDataBase {
   "patient-name": string;
 }
 
-export interface VitalsValueBase {
+export interface VitalsValueBase extends VitalsDataBase {
   value: number;
   unit: string;
   interpretation: string;

diff --git a/src/Components/VitalsMonitor/useHL7VitalsMonitor.ts b/src/Components/VitalsMonitor/useHL7VitalsMonitor.ts
@@ -8,11 +8,12 @@ import useCanvas from "../../Common/hooks/useCanvas";
 import {
   ChannelOptions,
   IVitalsComponentProps,
+  VitalsDataBase,
   VitalsValueBase as VitalsValue,
 } from "./types";
 import { getChannel, getVitalsCanvasSizeAndDuration } from "./utils";
 
-interface VitalsBPValue {
+interface VitalsBPValue extends VitalsDataBase {
   systolic: VitalsValue;
   diastolic: VitalsValue;
   map: VitalsValue;