[react] recharts사용

✅ Recharts

사이트
https://recharts.org/en-US/

✔ 1. 설치하기

yarn add recharts

✔ 2. 사용하기

https://recharts.org/en-US/examples

example을 보면서 따라하면 쉽게 구현할 수 있다.

◾ 필요한 라이브러리 import, chart 만들기

import React from 'react';
import { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';
import axios from 'axios';
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
} from 'chart.js';
import { Line } from 'react-chartjs-2';

ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend
);

◾ 데이터 만들기, 차트 그리기

function ToDoListRate() {
  const {groupId} = useParams();
  const [rateData, setRateData] = useState([]);
  const accessToken = localStorage.getItem("access");

  useEffect(() => {
     axios.get(`/group/${groupId}/my-to-do`,{
        headers:{Authorization:`Bearer ${accessToken}`}
     }).then(response=>{
        console.log(response.data);
        setRateData(response.data);
     }).catch(error=>{
      console.error(error);
  });
      
  }, []);

  // 차트에 데이터 적용
  const options = {
      responsive: true,
      plugins: {
          legend: {
              position: "top",
          },
          title: {
              display: true,
              text: "my to do 달성률",
          },
      },
  };

  let labels = [];
  if (rateData.length > 0) {
      labels = rateData.map((data) => data.date);
  }

  const data = {
      labels,
      datasets: [
          {
              label: "달성률",
              data: rateData.map((data) => data.progress_rate),
              borderColor: "rgb(255, 99, 132)",
              backgroundColor: "rgba(255, 99, 132, 0.5)",
          },
      ],
  };
  return (
      <div className='chart'>
          {rateData.length > 0 && <Line options={options} data={data} />}
      </div>
  );
}