[기업협업]Day14. Recharts

Joah·2022년 8월 19일

React

기업협업

목록 보기

14/15

Recharts로 데이터 시각화하기

Recharts 공식 문서

Google Chart와 Recharts 중 어떤 것을 사용할지 고민하다가 예전부터 한 번 사용해보고 싶었던 Recharts를 선택했다.

많은 기능을 지원했고 난이도가 높지 않아서 만족했다.

복잡한 데이터를 시각화 하는 작업이 아닌 단순한 수치를 나타내는 작업이라 코드를 복사하고 붙여넣는 일이 전부였다.

⛳ Pie Chart 사용법

import React from 'react';
import { PieChart, Pie, Legend, Cell, Tooltip } from 'recharts';
import './TimeChart.scss';

const PieChartComponent = ({ storeData }) => {
  if (storeData.length === 0) return;
  const data = [
    { name: '아침', value: storeData.offer_time_data[0].pay },
    { name: '점심', value: storeData.offer_time_data[1].pay },
    { name: '저녁', value: storeData.offer_time_data[2].pay },
  ];

  const COLORS = ['#1AA7EC', '#1E2F97', '#4bAAAD'];

  const RADIAN = Math.PI / 180;
  const renderCustomizedLabel = ({
    cx,
    cy,
    midAngle,
    innerRadius,
    outerRadius,
    percent,
  }) => {
    const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
    const x = cx + radius * Math.cos(-midAngle * RADIAN);
    const y = cy + radius * Math.sin(-midAngle * RADIAN);
    return (
      <text
        x={x}
        y={y}
        fill="white"
        textAnchor={x > cx ? 'start' : 'end'}
        dominantBaseline="central"
      >
        {percent ? `${(percent * 100).toFixed(0)}%` : ''}
      </text>
    );
  };

  return (
    <div>
      <div className="timeTitle">시간별 차트</div>
      <div className="row d-flex justify-content-center text-center">
        <div className="col-md-8">
          <PieChart width={300} height={200}>
            <Legend
              layout="vertical"
              verticalAlign="middle"
              align="bottom"
              iconSize="13"
              wrapperStyle={{
                fontWeight: '700',
                border: '1px solid #FAFAFA',
                borderRadius: '10px',
                boxShadow:
                  'rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px',
                padding: '5px',
              }}
            />
            <Pie
              data={data}
              cx="65%"
              cy="70%"
              labelLine={false}
              label={renderCustomizedLabel}
              outerRadius={80}
              fill="#8884d8"
              dataKey="value"
            >
              {data.map((entry, index) => (
                <Cell
                  key={`cell-${index}`}
                  fill={COLORS[index % COLORS.length]}
                  style={{
                    filter: `drop-shadow(5px 5px 5px #666`,
                  }}
                  stroke="1"
                />
              ))}
            </Pie>
            <Tooltip isAnimationActive={false} />
          </PieChart>
        </div>
      </div>
    </div>
  );
};
export default PieChartComponent;

시간대별 데이터를 나타내기 위해 PieChart를 사용했다.

Legend 는 범례를 나타낸다

Cell은 Pie 모양의 Chart 자체에 스타일링을 주기 위해서 적용했다.

Tooltip은 차트에 마우스를 올리면 상세 데이터를 보여준다.

return문 위의 함수와 변수는 기본적으로 제공하지만 커스터마이징 하기 위해서 값을 조금씩 바꿔나가면 원하는대로 스타일링을 할 수 있다.

⛳ Bar Chart 사용법

import React, { PureComponent } from 'react';
import {
  BarChart,
  Bar,
  Cell,
  XAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer,
} from 'recharts';
import './DateChart.scss';
const DateChart = ({ storeData }) => {
  if (storeData.length === 0) return;

  const data = [
    {
      name: '월',
      매출액: storeData.weekday_data[0].pay,
      배달건수: storeData.weekday_data[0].count,
    },
    {
      name: '화',
      매출액: storeData.weekday_data[1].pay,
      배달건수: storeData.weekday_data[1].count,
    },
    {
      name: '수',
      매출액: storeData.weekday_data[2].pay,
      배달건수: storeData.weekday_data[2].count,
    },
    {
      name: '목',
      매출액: storeData.weekday_data[3].pay,
      배달건수: storeData.weekday_data[3].count,
    },
    {
      name: '금',
      매출액: storeData.weekday_data[4].pay,
      배달건수: storeData.weekday_data[4].count,
    },
    {
      name: '토',
      uv: 7000,
      매출액: storeData.weekday_data[5].pay,
      배달건수: storeData.weekday_data[5].count,
    },
    {
      name: '일',
      매출액: storeData.weekday_data[6].pay,
      배달건수: storeData.weekday_data[6].count,
    },
  ];
  return (
    <div>
      <div className="dateTitle">요일별 차트</div>
      <BarChart width={350} height={200} data={data} className="barChart">
        <Legend
          layout="horizontal"
          verticalAlign="bottom"
          align="center"
          iconSize="5"
          wrapperStyle={{
            fontWeight: '700',
          }}
        />
        <Bar dataKey="매출액" fill="#1187CF" radius={3} />
        <Bar dataKey="배달건수" fill="black" radius={3} />
        <XAxis dataKey="name" style={{ fontSize: '12px' }} tickLine={false} />
        <Tooltip
          content={data}
          contentStyle={{ border: 'none' }}
          isAnimationActive={false}
          cursor={false}
        />
      </BarChart>
    </div>
  );
};

export default DateChart;