공기질 모니터링 서비스_3_Recharts

📊 Recharts로 데이터 시각화 개선하기

초반에는 Chart.js를 사용했지만, 화면이 매끄럽게 표현되지 않아
많은 개발자들이 사용하는 Recharts로 변경하기로 결정했다.
Recharts는 문서화가 잘 되어 있고 적용도 간단해서 사용하기 편했다.

🔗 Recharts 공식 문서

⚙️ 설치

설치는 간단하다.

$ npm install recharts

📈 차트 구성

먼저, 가장 단순한 형태의 SimpleLineChart 예제
를 참고했다.
예제는 직접 데이터를 지정하는 방식이었지만,
나는 API를 통해 데이터를 가져오는 구조로 변경해야 했기 때문에 코드를 조금 수정했다.
그런 다음 일단 필요한 차트를 찾아봤다.

recharts 예시 링크

    const formatDateTime = (isoString) => {
        const date = new Date(isoString);
        const formatter = new Intl.DateTimeFormat('ko-KR', {
            year: 'numeric',
            month: '2-digit',
            day: '2-digit',
            hour: '2-digit',
            minute: '2-digit',
            second: '2-digit',
            hour12: false
        });
        return formatter.format(date);
    };


    // API에서 데이터 가져오기
    useEffect(() => {
        const params = new URLSearchParams({
            device_id: deviceId,
            fields: selectedFields.join(','),
            ...(from && to && { from, to }),
        }).toString();

        fetch(`/api/sensor_data?${params}`)
            .then((res) => res.json())
            .then((fetchedData) => {
                const formattedData = fetchedData.map((item, index) => ({
                    ...item,
                    index: index, // x축용 인덱스 추가
                    time: formatDateTime(item.time),
                }));
                setData(formattedData);

                // 데이터 로드 후 state 초기화
                setState({
                    data: formattedData,
                    left: 0,
                    right: formattedData.length - 1,
                    refAreaLeft: '',
                    refAreaRight: '',
                    top: 'dataMax+10',
                    bottom: 'dataMin-10',
                });
            });
    }, [deviceId, selectedFields, from, to]);
    console.log(data);

여기서 index와 state는 Zoom In / Out 기능에 필요한 값이다.
time 필드는 Intl.DateTimeFormat으로 포맷팅해 보기 편하게 표시했다.

🔍 Zoom 기능 추가

처음에는 단순히 차트만 띄웠지만,
데이터 양이 많아지면 특정 구간을 확대해서 보고 싶다는 필요성이 생겼다.
그래서 공식 예제 중 HighlightAndZoomLineChart
를 참고했다.

예제 구조가 잘 정리되어 있어서, 데이터 fetch 부분만 수정해 적용했다.
줌인 recharts 자료 링크

🧭 필드 선택 기능

차트에서 표시할 데이터를 직접 선택할 수 있도록 버튼 클릭 이벤트를 추가했다.

{fields.map(f => (
    <div
        key={f}
        className={`cursor-pointer px-3 py-1 rounded-full ${selectedFields.includes(f) ? 'bg-blue-300 hover:bg-blue-500 text-gray' : 'text-gray-500'
            }`}
        onClick={() => {
            if (selectedFields.includes(f)) {
                setSelectedFields(prev => prev.filter(field => field !== f));
            } else {
                setSelectedFields(prev => [...prev, f]);
            }
        }}
    >
        {f}
    </div>
))}

이 기능을 통해 사용자가 보고 싶은 센서 데이터를 선택적으로 표시할 수 있게 되었다.