({});
+ const { t } = useTranslation();
+
+ const getGraphData = (dailyRoundsData?: DailyRoundsModel[]) => {
+ const graphData: graphDataProps = {};
+ const graphDataCount = dailyRoundsData?.length ?? 0;
+ if (dailyRoundsData) {
+ dailyRoundsData.forEach((currentRound: DailyRoundsModel) => {
+ // @ts-expect-error taken_at should always be available
+ graphData[currentRound.taken_at] = {
+ bilateral_air_entry: currentRound.bilateral_air_entry,
+ etco2: currentRound.etco2,
+ id: currentRound.id,
+ ventilator_fio2: currentRound.ventilator_fio2,
+ ventilator_mean_airway_pressure:
+ currentRound.ventilator_mean_airway_pressure,
+ ventilator_oxygen_modality_flow_rate:
+ currentRound.ventilator_oxygen_modality_flow_rate,
+ ventilator_oxygen_modality_oxygen_rate:
+ currentRound.ventilator_oxygen_modality_oxygen_rate,
+ ventilator_peep: currentRound.ventilator_peep
+ ? Number(currentRound.ventilator_peep)
+ : null,
+ ventilator_pip: currentRound.ventilator_pip,
+ ventilator_pressure_support: currentRound.ventilator_pressure_support,
+ ventilator_resp_rate: currentRound.ventilator_resp_rate,
+ ventilator_spo2: currentRound.ventilator_spo2,
+ ventilator_tidal_volume: currentRound.ventilator_tidal_volume,
+ };
});
- if (res && res.ok && data) {
- setResults(data.results);
- setTotalCount(data.count);
- }
- };
+ }
+ return { graphData, graphDataCount };
+ };
+
+ useEffect(() => {
+ const { graphData } = getGraphData(dailyRoundsList);
+ setResults(graphData);
+ }, [dailyRoundsList]);
- fetchDailyRounds(currentPage, consultationId);
- }, [consultationId, currentPage]);
+ if (!dailyRoundsList) {
+ return ;
+ }
- const handlePagination = (page: number) => {
- setCurrentPage(page);
+ const dates = Object.keys(results).map((p: string) => formatDateTime(p));
+
+ const getConditionAndLegend = (
+ name: string,
+ currentRound: DailyRoundsModel,
+ ) => {
+ let condition = false;
+ let legend = "";
+ switch (name) {
+ case "ventilator_pip":
+ case "ventilator_mean_airway_pressure":
+ case "ventilator_resp_rate":
+ case "ventilator_pressure_support":
+ case "ventilator_tidal_volume":
+ case "ventilator_peep":
+ condition =
+ (currentRound.ventilator_interface === "INVASIVE" ||
+ currentRound.ventilator_interface === "NON_INVASIVE") &&
+ !!currentRound.ventilator_mode;
+ break;
+ case "ventilator_fio2":
+ condition =
+ currentRound.ventilator_interface === "OXYGEN_SUPPORT" &&
+ currentRound.ventilator_oxygen_modality === "HIGH_FLOW_NASAL_CANNULA";
+ break;
+ case "ventilator_spo2":
+ condition =
+ currentRound.ventilator_interface === "OXYGEN_SUPPORT" &&
+ (currentRound.ventilator_oxygen_modality === "NASAL_PRONGS" ||
+ currentRound.ventilator_oxygen_modality === "SIMPLE_FACE_MASK" ||
+ currentRound.ventilator_oxygen_modality ===
+ "NON_REBREATHING_MASK" ||
+ currentRound.ventilator_oxygen_modality ===
+ "HIGH_FLOW_NASAL_CANNULA");
+ break;
+ case "etco2":
+ case "ventilator_oxygen_modality_flow_rate":
+ condition =
+ !!currentRound.ventilator_mode ||
+ !!currentRound.ventilator_oxygen_modality ||
+ false;
+ break;
+ case "ventilator_oxygen_modality_oxygen_rate":
+ condition =
+ currentRound.ventilator_interface === "OXYGEN_SUPPORT" &&
+ (currentRound.ventilator_oxygen_modality === "NASAL_PRONGS" ||
+ currentRound.ventilator_oxygen_modality === "SIMPLE_FACE_MASK" ||
+ currentRound.ventilator_oxygen_modality === "NON_REBREATHING_MASK");
+ break;
+ }
+ switch (currentRound.ventilator_interface) {
+ case "OXYGEN_SUPPORT":
+ legend =
+ t(
+ `OXYGEN_MODALITY__${currentRound.ventilator_oxygen_modality}_short`,
+ ) +
+ " (" +
+ t("RESPIRATORY_SUPPORT_SHORT__OXYGEN_SUPPORT") +
+ ")";
+ break;
+ case "INVASIVE":
+ legend =
+ t(`VENTILATOR_MODE__${currentRound.ventilator_mode}_short`) +
+ " (" +
+ t("RESPIRATORY_SUPPORT_SHORT__INVASIVE") +
+ ")";
+ break;
+ case "NON_INVASIVE":
+ legend =
+ t(`VENTILATOR_MODE__${currentRound.ventilator_mode}_short`) +
+ " (" +
+ t("RESPIRATORY_SUPPORT_SHORT__NON_INVASIVE") +
+ ")";
+ break;
+ }
+ return { condition, legend };
+ };
+
+ const getModeOrModality = (round: DailyRoundsModel) => {
+ const ventilatorInterface = round.ventilator_interface;
+ if (!ventilatorInterface) return null;
+ switch (ventilatorInterface) {
+ case "INVASIVE":
+ case "NON_INVASIVE":
+ return round.ventilator_mode;
+ case "OXYGEN_SUPPORT":
+ return round.ventilator_oxygen_modality;
+ default:
+ return null;
+ }
};
- const dates = Object.keys(results)
- .map((p: string) => formatDateTime(p))
- .reverse();
+ const getMarkLineData = (name: string) => {
+ const markLineData = [];
+ if (!dailyRoundsList) return [];
+ let index = 0;
+ while (index < dailyRoundsList.length) {
+ const currentRound = dailyRoundsList[index];
+ const { condition, legend } = getConditionAndLegend(name, currentRound);
+ const currentInterfaceOrModality = getModeOrModality(currentRound);
+ if (condition) {
+ const startIndex = dates.findIndex(
+ (element) => element === formatDateTime(currentRound.taken_at),
+ );
+ if (startIndex !== -1) {
+ let nextIndex = index + 1;
+ while (nextIndex < dailyRoundsList.length) {
+ const nextRound = dailyRoundsList[nextIndex];
+ const nextInterfaceOrModality = getModeOrModality(nextRound);
+ if (
+ currentRound.ventilator_interface ===
+ nextRound.ventilator_interface &&
+ currentInterfaceOrModality === nextInterfaceOrModality
+ ) {
+ nextIndex += 1;
+ } else {
+ break;
+ }
+ }
+ const position =
+ startIndex === 0 ? "insideMiddleBottom" : "insideMiddleTop";
+ markLineData.push({
+ name: legend,
+ xAxis: dates[startIndex],
+ label: {
+ show: true,
+ position,
+ formatter: "{b}",
+ color: "#000000",
+ textBorderColor: "#ffffff",
+ textBorderWidth: 2,
+ },
+ });
+ index = nextIndex;
+ } else {
+ index += 1;
+ }
+ } else {
+ index += 1;
+ }
+ }
+ return markLineData;
+ };
- const yAxisData = (name: string) => {
- return Object.values(results)
- .map((p: any) => p[name])
- .reverse();
+ const yAxisData = (name: keyof graphDataProps[string]) => {
+ return Object.values(results).map((p) => p[name]);
};
const bilateral = Object.values(results)
- .map((p: any, i) => {
+ .map((p, i) => {
return {
value: p.bilateral_air_entry,
timestamp: Object.keys(results)[i],
@@ -91,6 +262,7 @@ export const VentilatorPlot = (props: any) => {
yData={yAxisData("ventilator_pip")}
low={12}
high={30}
+ verticalMarkerData={getMarkLineData("ventilator_pip")}
/>
@@ -101,6 +273,9 @@ export const VentilatorPlot = (props: any) => {
yData={yAxisData("ventilator_mean_airway_pressure")}
low={12}
high={25}
+ verticalMarkerData={getMarkLineData(
+ "ventilator_mean_airway_pressure",
+ )}
/>
@@ -111,6 +286,7 @@ export const VentilatorPlot = (props: any) => {
yData={yAxisData("ventilator_resp_rate")}
low={12}
high={20}
+ verticalMarkerData={getMarkLineData("ventilator_resp_rate")}
/>
@@ -121,6 +297,7 @@ export const VentilatorPlot = (props: any) => {
yData={yAxisData("ventilator_pressure_support")}
low={5}
high={15}
+ verticalMarkerData={getMarkLineData("ventilator_pressure_support")}
/>
@@ -129,6 +306,7 @@ export const VentilatorPlot = (props: any) => {
name="Tidal Volume"
xData={dates}
yData={yAxisData("ventilator_tidal_volume")}
+ verticalMarkerData={getMarkLineData("ventilator_tidal_volume")}
/>
@@ -139,6 +317,7 @@ export const VentilatorPlot = (props: any) => {
yData={yAxisData("ventilator_peep")}
low={5}
high={10}
+ verticalMarkerData={getMarkLineData("ventilator_peep")}
/>
@@ -149,6 +328,7 @@ export const VentilatorPlot = (props: any) => {
yData={yAxisData("ventilator_fio2")}
low={21}
high={60}
+ verticalMarkerData={getMarkLineData("ventilator_fio2")}
/>
@@ -159,6 +339,7 @@ export const VentilatorPlot = (props: any) => {
yData={yAxisData("ventilator_spo2")}
low={90}
high={100}
+ verticalMarkerData={getMarkLineData("ventilator_spo2")}
/>
@@ -169,6 +350,7 @@ export const VentilatorPlot = (props: any) => {
yData={yAxisData("etco2")}
low={35}
high={45}
+ verticalMarkerData={getMarkLineData("etco2")}
/>
@@ -185,6 +367,9 @@ export const VentilatorPlot = (props: any) => {
name="Oxygen Flow Rate"
xData={dates}
yData={yAxisData("ventilator_oxygen_modality_oxygen_rate")}
+ verticalMarkerData={getMarkLineData(
+ "ventilator_oxygen_modality_oxygen_rate",
+ )}
/>
@@ -193,20 +378,12 @@ export const VentilatorPlot = (props: any) => {
name="Flow Rate"
xData={dates}
yData={yAxisData("ventilator_oxygen_modality_flow_rate")}
+ verticalMarkerData={getMarkLineData(
+ "ventilator_oxygen_modality_flow_rate",
+ )}
/>
-
- {totalCount > PAGINATION_LIMIT && (
-
- )}
);
};
diff --git a/src/components/Facility/Consultations/VentilatorTable.tsx b/src/components/Facility/Consultations/VentilatorTable.tsx
new file mode 100644
index 00000000000..2059f14bac0
--- /dev/null
+++ b/src/components/Facility/Consultations/VentilatorTable.tsx
@@ -0,0 +1,129 @@
+import { useTranslation } from "react-i18next";
+
+import { compareByDateString, formatDateTime } from "@/Utils/utils";
+
+import { DailyRoundsModel } from "../../Patient/models";
+
+type VentilatorTableProps = {
+ dailyRoundsList?: DailyRoundsModel[];
+};
+
+export default function VentilatorTable(props: VentilatorTableProps) {
+ const { t } = useTranslation();
+ const { dailyRoundsList } = props;
+
+ const VentilatorTableRow = ({
+ dailyRound,
+ start_date,
+ end_date,
+ }: {
+ dailyRound: DailyRoundsModel;
+ start_date: string;
+ end_date: string;
+ }) => {
+ const getModeText = () => {
+ const {
+ ventilator_interface,
+ ventilator_mode,
+ ventilator_oxygen_modality,
+ } = dailyRound;
+ switch (ventilator_interface) {
+ case "INVASIVE":
+ case "NON_INVASIVE":
+ return t(`VENTILATOR_MODE__${ventilator_mode}`);
+ case "OXYGEN_SUPPORT":
+ return t(`OXYGEN_MODALITY__${ventilator_oxygen_modality}`);
+ default:
+ return null;
+ }
+ };
+ return (
+
+ | {start_date} |
+ {end_date} |
+
+ {t(`RESPIRATORY_SUPPORT__${dailyRound?.ventilator_interface}`)}
+ |
+ {getModeText()} |
+
+ );
+ };
+
+ const getModeOrModality = (round: DailyRoundsModel) => {
+ const ventilatorInterface = round.ventilator_interface;
+ if (!ventilatorInterface) return null;
+ switch (ventilatorInterface) {
+ case "INVASIVE":
+ case "NON_INVASIVE":
+ return round.ventilator_mode;
+ case "OXYGEN_SUPPORT":
+ return round.ventilator_oxygen_modality;
+ default:
+ return null;
+ }
+ };
+
+ const VentilatorTableBody = (dailyRoundsList: DailyRoundsModel[]) => {
+ const rows = [];
+ for (let index = 0; index < dailyRoundsList.length; index++) {
+ const currentRound = dailyRoundsList[index];
+ const currentInterfaceOrModality = getModeOrModality(currentRound);
+ if (!currentInterfaceOrModality) continue;
+ while (index < dailyRoundsList.length - 1) {
+ const nextRound = dailyRoundsList[index + 1];
+ const nextInterfaceOrModality = getModeOrModality(nextRound);
+ if (
+ nextInterfaceOrModality &&
+ currentRound.ventilator_interface == nextRound.ventilator_interface &&
+ currentInterfaceOrModality == nextInterfaceOrModality
+ ) {
+ index += 1;
+ } else {
+ break;
+ }
+ }
+ const end_date =
+ index + 1 < dailyRoundsList.length
+ ? formatDateTime(dailyRoundsList[index + 1].taken_at)
+ : "";
+ const start_date = formatDateTime(currentRound.taken_at);
+ rows.push(
+ ,
+ );
+ }
+ return rows;
+ };
+
+ if (!dailyRoundsList?.length) {
+ return;
+ }
+ const sortedData: DailyRoundsModel[] = dailyRoundsList.sort(
+ compareByDateString("taken_at"),
+ );
+
+ return (
+
+
+
+ {t("ventilator_log")}
+
+
+
+ | {t("start_datetime")} |
+ {t("end_datetime")} |
+ {t("ventilator_modality")} |
+
+ {`${t("ventilator_mode")} / ${t("ventilator_oxygen_modality")}`}
+ |
+
+
+ {VentilatorTableBody(sortedData)}
+
+