[React & recharts] axios 연동해 recharts에 데이터 넣기

원래 DB에 저장된 데이터들로 관리자 페이지 대시보드를 만들기로 했었는데 시간이 촉박한 점도 있었고, 데이터 마이닝까지 구현하기가 어려울 것 같아서 관리자 페이지는 포기하기로 했다.

근데 해당 얘기가 나오기 전에 먼저 axios로 데이터 연동해서 그래프로 출력하는 것을 미리 해놔서 그대로 날려버리기에는 아까워 블로그에 기록용으로 남겨놓는다.

 

 

 

일단 구매한 대쉬보드 템플릿에 최대한 맞춰서 수정했기 때문에 큰 도움이 될지는 모르겠다.

 

 

 

원래 하루 매출을 당일 기준으로 7일 정도 끊어서 보여주려고 했는데, DB 측이 준비가 안되어서 먼저 메뉴 가격을 가져와서 출력하는 걸 목표로 axios 연동을 준비했다.

 

 

 

axios 연동해서 출력하는 부분은 금방 끝냈지만 setActiveItem을 하는 단계가 매우 힘들었다.

가장 처음 렌더링 될 때의 이미지

 

 

이렇게 처음 렌더링 될 때 맨 처음 <Bar>가 자동 선택되어져야하는데 setData를 한 후에 data[0]을 setActiveItem으로 넣으려고 했더니 .price 값이 없다고 떠서 axios에서 받아오는 데이터를 그대로 집어넣었다.

 

const [data, setData] = useState([]);
  const [activeIndex, setActiveIndex] = useState(0);
  const [activeItem, setActiveItem] = useState(0);
  const fetchDatas = async() => {
    const response = await axios.get('/api/menus');
    setData(response.data);
    setActiveItem(response.data[0]);
  };

  useEffect(() => {
    fetchDatas();
  }, []);

 

이렇게 fechDatas()의 setData에 axios에서 받아온 데이터들을 넣고, setActiveItem에서는 해당 데이터에서 0번째 값을 넣어 출력될 때 0번째의 price가 자동 출력되도록 설정했다.

 

 

 

setActiveIndex와 setActiveItem은 <Bar>를 선택하면 해당 <Bar>의 값을 출력하기 위해 필요한 것이다. 

클릭한 <Bar>의 값

 

전체 코드

import React, { useEffect, useState } from 'react';
import { Card, CardBody, Col } from 'reactstrap';
import {
  BarChart, Bar, Cell, ResponsiveContainer,
} from 'recharts';
import TrendingDownIcon from 'mdi-react/TrendingDownIcon';
import axios from 'axios';

const TodayOrders = () => {
  const [data, setData] = useState([]);
  const [activeIndex, setActiveIndex] = useState(0);
  const [activeItem, setActiveItem] = useState(0);
  const fetchDatas = async() => {
    const response = await axios.get('/api/menus');
    setData(response.data);
    setActiveItem(response.data[0]);
  };

  useEffect(() => {
    fetchDatas();
  }, []);

  const handleClick = (item) => {
    const index = data.indexOf(item.payload);
    setActiveIndex(index);
    setActiveItem(data[index]);
  };

  return (
    <Col md={12} xl={3} lg={6} xs={12}>
      <Card>
        <CardBody className="dashboard__card-widget">
          <div className="card__title">
            <h5 className="bold-text">Price</h5>
          </div>
          <div className="dashboard__total">
            <TrendingDownIcon className="dashboard__trend-icon" />
            <p className="dashboard__total-stat">
              {activeItem.price}
            </p>
            <div className="dashboard__chart-container">
              <ResponsiveContainer height={50}>
                <BarChart data={data}>
                  <Bar dataKey="price" onClick={handleClick}>
                    {data.map((entry, index) => (
                      <Cell
                        key={entry.id}
                        cursor="pointer"
                        fill={index === activeIndex ? '#4ce1b6' : '#c88ffa'}
                      />
                    ))}
                  </Bar>
                </BarChart>
              </ResponsiveContainer>
            </div>
          </div>
        </CardBody>
      </Card>
    </Col>
  );
};

export default TodayOrders;