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" ; export const DialysisPlots = ( props ) => { const { facilityId , patientId , consultationId } = props ; const dispatch = useDispatch ( ) ; const [ isLoading , setIsLoading ] = useState ( false ) ; const [ offset , setOffset ] = useState ( 0 ) ; 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 : [ "dialysis_fluid_balance" , "dialysis_net_balance" ] , } , { consultationId } ) ) ; if ( ! status . aborted ) { if ( res && res . data ) { setTotalCount ( res . data . count ) ; setResults ( res . data . results ) ; } setIsLoading ( false ) ; } } , [ consultationId , dispatch , currentPage ] ) ; useAbortableEffect ( ( status ) => { fetchDailyRounds ( status ) ; } , [ consultationId , currentPage ] ) ; const handlePagination = ( page , limit ) => { const offset = ( page - 1 ) * limit ; setCurrentPage ( page ) ; setOffset ( offset ) ; } ; 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 = "Dialysis Fluid Balance" name = "Fluid Balance" xData = { dates } yData = { yAxisData ( "dialysis_fluid_balance" ) } / > < /div> < div className = "pt-4 px-4 bg-white border rounded-lg shadow" > < LinePlot title = "Dialysis Net Balance" name = "Net Balance" xData = { dates } yData = { yAxisData ( "dialysis_net_balance" ) } / > < /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>); } ;