Comleamae / TeamProject2

0 stars 0 forks source link

실시간 환자 체온 대시보드 (TEAM_PROJECT_2)

프로젝트 소개

실시간 환자 체온 대시보드는 라즈베리파이를 통해 환자의 체온 정보를 실시간으로 수집하고, 이를 리액트의 차트와 캘린더 컴포넌트를 사용하여 시각적으로 표현하는 대시보드입니다. 사용자는 데이터 조회 범위를 조절할 수 있으며, 평균 체온 정보와 과거 데이터를 확인할 수 있는 다양한 기능을 제공합니다.

개발 기간

사용 기술

설치 및 실행 방법

  1. 레포지토리 클론:

    
    git clone https://github.com/Comleamae/TeamProject2.git
  2. 설치할 npm

    • 1)axios 등 기본 설치

      • 페이지 이동 관련(Route, Routes, Link, navigate)

      -npm install react-router-dom

      • 서버와 데이터 통신(Axios)

      -npm install axios

    • 2)캘린더 라이브러리
      • npm i react-calendar
    • 3)차트 라이브러리
      • npm install chart.js react-chartjs-2
    • 4)리액트 쿼리 라이브러리
      • npm install react-query
      • npm install @tanstack/react-query

개발자 소개

주요 기능

1. 라즈베리파이를 통한 데이터 측정

라즈베리파이로 실시간 체온 데이터를 수집하는 코드입니다.

2. 실시간 데이터 시각화

데이터베이스에 저장된 데이터를 chart.js를 활용하여 실시간 라인 그래프로 시각화하며, 특정 온도 이상일 경우 빨간색 점으로 표시합니다.

실시간 받아오는 데이터1 실시간 받아오는 데이터2

3. 기준 날짜를 포함한 일주일 간의 평균 체온

기준 날짜를 포함하여 일주일간의 평균 체온을 확인할 수 있으며, 데이터가 없을 경우 버튼이 나타나지 않습니다.

평균 기온

4. 하루 동안의 데이터를 시간별로 조절하는 기능

기준 날짜의 데이터를 30분 또는 1시간 간격으로 조절하여 확인할 수 있습니다. 왼쪽 테이블에는 해당 데이터를 텍스트로 출력합니다.

간격 평균 간격 평균 30분 간격 평균 1시간

5. 마지막 30분/1시간 동안의 데이터 조회

마지막 30분 또는 1시간 동안의 데이터를 확인할 수 있으며, 바 차트로 시각화합니다.

최근 X시간 간의 데이터 최근 30분 간의 데이터 최근 1시간의 데이터

6. 데이터 바 차트 시각화

최근 10개의 데이터를 바 차트 형식으로 보여주며, 특정 온도 이상일 경우 해당 바의 색이 붉은색으로 표시됩니다. 어제와 오늘의 데이터를 비교하여 텍스트로 출력해줍니다.

바 차트1 바 차트2

7. 상세정보 페이지

환자의 입원 기간 동안의 데이터를 차트로 시각화하고, 평균 및 이전 날짜의 데이터를 조회할 수 있습니다.

캘린더1 캘린더2

8. 캘린더에서 선택한 차트 정보 이동

캘린더를 통해 선택한 차트 정보를 화면 아래로 이동시킬 수 있습니다.

캘린더3 캘린더4 캘린더5