import moment from "moment" ; import { useCallback , useState } from "react" ; import { useDispatch } from "react-redux" ; import { statusType , useAbortableEffect } from "../../../Common/utils" ; import { dailyRoundsAnalyse } from "../../../Redux/actions" ; import { LinePlot } from "./components/LinePlot" ; import Pagination from "../../Common/Pagination" ; import { PAGINATION_LIMIT } from "../../../Common/constants" ; interface ModalityType { id : number ; type : string ; normal_rate_low : number ; normal_rate_high : number ; } const modality = [ { id : 0 , type : "UNKNOWN" , normal_rate_low : 1 , normal_rate_high : 4 } , { id : 5 , type : "NASAL_PRONGS" , normal_rate_low : 5 , normal_rate_high : 10 } , { id : 10 , type : "SIMPLE_FACE_MASK" , normal_rate_low : 11 , normal_rate_high : 15 , } , ] ; export const VentilatorPlot = ( props ) => { const { facilityId , patientId , consultationId } = props ; const dispatch = useDispatch ( ) ; const [ isLoading , setIsLoading ] = useState ( false ) ; const [ results , setResults ] = useState ( { } ) ; const [ currentPage , setCurrentPage ] = useState ( 1 ) ; const [ totalCount , setTotalCount ] = useState ( 0 ) ; const fetchDailyRounds = useCallback ( async ( status ) => { setIsLoading ( true ) ; const res = await dispatch ( dailyRoundsAnalyse ( { page : currentPage , fields : [ "ventilator_pip" , "ventilator_mean_airway_pressure" , "ventilator_resp_rate" , "ventilator_pressure_support" , "ventilator_tidal_volume" , "ventilator_peep" , "ventilator_fi02" , "ventilator_spo2" , "etco2" , "ventilator_oxygen_modality_oxygen_rate" , "ventilator_oxygen_modality_flow_rate" , ] , } , { consultationId } ) ) ; if ( ! status . aborted ) { if ( res && res . data ) { setResults ( res . data . results ) ; setTotalCount ( res . data . count ) ; } setIsLoading ( false ) ; } } , [ consultationId , dispatch , currentPage ] ) ; useAbortableEffect ( ( status ) => { fetchDailyRounds ( status ) ; } , [ currentPage ] ) ; const handlePagination = ( page , limit ) => { setCurrentPage ( page ) ; } ; const dates = Object . keys ( results ) . map ( ( p ) => moment ( p ) . format ( "LLL" ) ) . reverse ( ) ; const yAxisData = ( name ) => { return Object . values ( results ) . map ( ( p ) => p [ name ] ) . reverse ( ) ; } ; return ( < div > < div className = "grid grid-row-1 md:grid-cols-2 gap-4" > < div className = "pt-4 px-4 bg-white border rounded-lg shadow" > < LinePlot title = "PIP" name = "PIP" xData = { dates } yData = { yAxisData ( "ventilator_pip" ) } low = { 12 } high = { 30 } / > < /div> < div className = "pt-4 px-4 bg-white border rounded-lg shadow" > < LinePlot title = "MAP" name = "MAP" xData = { dates } yData = { yAxisData ( "ventilator_mean_airway_pressure" ) } low = { 12 } high = { 25 } / > < /div> < div className = "pt-4 px-4 bg-white border rounded-lg shadow" > < LinePlot title = "Resp Rate" name = "resp" xData = { dates } yData = { yAxisData ( "ventilator_resp_rate" ) } low = { 12 } high = { 20 } / > < /div> < div className = "pt-4 px-4 bg-white border rounded-lg shadow" > < LinePlot title = "Pressure Support" name = "Pressure Support" xData = { dates } yData = { yAxisData ( "ventilator_pressure_support" ) } low = { 5 } high = { 15 } / > < /div> < div className = "pt-4 px-4 bg-white border rounded-lg shadow" > < LinePlot title = "Tidal Volume" name = "Tidal Volume" xData = { dates } yData = { yAxisData ( "ventilator_tidal_volume" ) } / > < /div> < div className = "pt-4 px-4 bg-white border rounded-lg shadow" > < LinePlot title = "PEEP" name = "PEEP" xData = { dates } yData = { yAxisData ( "ventilator_peep" ) } low = { 5 } high = { 10 } / > < /div> < div className = "pt-4 px-4 bg-white border rounded-lg shadow" > < LinePlot title = "FiO2" name = "FiO2" xData = { dates } yData = { yAxisData ( "ventilator_fi02" ) } low = { 21 } high = { 60 } / > < /div> < div className = "pt-4 px-4 bg-white border rounded-lg shadow" > < LinePlot title = "SpO2" name = "SpO2" xData = { dates } yData = { yAxisData ( "ventilator_spo2" ) } low = { 90 } high = { 100 } / > < /div> < div className = "pt-4 px-4 bg-white border rounded-lg shadow" > < LinePlot title = "EtCo2" name = "EtCo2" xData = { dates } yData = { yAxisData ( "etco2" ) } low = { 35 } high = { 45 } / > < /div> < div className = "pt-4 px-4 bg-white border rounded-lg shadow" > < LinePlot title = "Oxygen Flow Rate" name = "Oxygen Flow Rate" xData = { dates } yData = { yAxisData ( "ventilator_oxygen_modality_oxygen_rate" ) } / > < /div> < div className = "pt-4 px-4 bg-white border rounded-lg shadow" > < LinePlot title = "Flow Rate" name = "Flow Rate" xData = { dates } yData = { yAxisData ( "ventilator_oxygen_modality_flow_rate" ) } / > < /div> < /div> { totalCount > PAGINATION_LIMIT && ( < div className = "mt-4 flex w-full justify-center" > < Pagination cPage = { currentPage } defaultPerPage = { PAGINATION_LIMIT } data = { { totalCount } } onChange = { handlePagination } / > < /div>)} < /div>); } ;