React Admin - 5. Chart 컴포넌트 만들기

React Admin - 5. Chart 컴포넌트 만들기

이번에는 화면에 그래프를 보여주는 컴포넌트를 추가해보자.  여기서 사용할 라이브러리는 "Recharts" 이다. 

 

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

자세한 사용법은 공식 홈페이지에서 확인하시고, 간단한 라인그래프를 그리기 위해서 example 에 있는 내용을 바탕으로 그래프를 추가할 예정이다. 

ch

 

rechart 라이브러리 설치 

 

chart 컴포넌트를 위해서 chart 폴더와 jsx, css 파일을 생성한다. 

기본 react function component 를 생성한다. 

chart 컴포넌트를 만들었으니 home 페이지 추가해서 정상 동작하는지 확인한다. 

chart 컴포넌트의 위치를 조금 조절한다. padding / margin 적용한다. 그리고 box-shadow 도 featuredItem 과 동일하게 적용한다. 

 

다음은 chartTitle 를 추가한다. 

chartTitle 의 css 설정, 

 

SimpleLineChart 만들기 

이제 본격적으로 simpleLineChart를 생성해보자. 일단 recharts.org 에 있는 example 코드를 그대로 복사해서 가져온다. 

 

Chart.jsx

위에서는 chart에 대한 라이브러리와 데이터를 복사해온 것이다. 그럼 이제 chart 관련 컴포넌트를 화면에 출력하는 작업을 해주어야 한다. 

chart를 넣을 ResponsiveContainer 를 먼저 생성해준다. 

여기서 aspect 는 width / height 의 비율을 지정한다. 

LineChart 컴포넌트를 ResponsiveContainer 안에 생성해준다. 

라인 그래프를 그리고 데이터를 넣었지만 화면에 표시되는 것은 아직 없다. 이유는 X, Y 축에 대한 데이터가 설정되지 않았기 때문이다.

 

X축에 대한 데이터 지정 : dataKey 사용될 데이터를 지정하고 stroke 는 색상을 나타낸다. 

Y축에 대한 데이터 지정 : 라인의 종류는 monotone, 사용할 데이터는 "Active User" 

Y축의 데이터를 보면 "Active User" 이지만 example 소스에서 가져온 데이터에는 Active User 가 존재하지 않는다. 

그래서, 그래프를 그리기 위한 데이터를 변경해주어야 한다. name 에는 Jan, Feb, .... 월에 대한 정보를 넣고, "Active User" 데이터를 만들어서 넣어주어야 한다. 

이제 다시 그래프를 확인해 보자. 그래프가 제대로 동작하는 것을 확인 할 수 있다. 

추가로 툴팁에 대한 정보를 추가하려면 , 마우스를 그래프로 움직이면 상세 정보를 화면에서 확인할 수 있다. 

만일 그래프에 그리드를 추가하려면, CartesianGrid 를 추가해 주면 된다. 

 

재사용가능 chart component 만들기 

이제 rechart를 이용해서 그래프를 그리는 것까지 완료하였다. 챠트같은 경우는 여러곳에서 재사용 될 것을 고려해서 데이터(title, data, dataKey, grid)를 props 으로 처리하도록 수정할 수 있다. 

 

- grid 가 있는 경우만 CartesianGrid 옵션을 추가한다. 

기존의 있던 data를 복사해서 src/dummyData.js 에 붙여넣는다. data 를  userData 로 변경해서 export 한다. 

다음은 Home.jsx 에서 userData 를 불러서 Chart 컴포넌트에 props 로 넣어준다. 

Home.jsx

다시 Chart 컴포넌트로 돌아와서  props 로 받은 값을 모두 적용해 주면된다. 

결과 

재사용이 가능한 chart 컴포넌트까지 추가가 완료되었다. 

끝..

 

2021.11.03 - [REACT/Admin Dashboard - project #1] - React Admin - 3. Home page

2021.11.11 - [REACT/Admin Dashboard - project #1] - React Admin - 4. featured info 컨포넌트 만들기