회사 프로젝트에서 Pie Chart와 일 별 데이터 카운트를 보여줄 대시보드가 필요했다. 찾아봤는데 좋은 라이브러리가 있어서 공유겸 공부한 것을 까먹지 않기 위해 작성해보고자 한다.
우선 라이브러리 이름은 'nivo'이다.
Home | nivo
nivo.rocks
Install
우선, 다음 명령어로 nivo의 코어가 되는 패키지를 내려받아야 한다.
npm i @nivo/core
그리고, 원하는 차트별로 패키지를 내려받으면 된다. 예를 들어 내가 파이차트를 사용하고 싶다면 다음처럼 명령어를 입력하자.
npm i @nivo/pie
물론, 매뉴얼에서 친절하게 다 알려준다.
사이트가 굉장히 모던하면서 매뉴얼도 극강으로 사용자 경험이 좋다. 들어가보면 여러 차트를 사용할 수 있는데 아래 화면을 보자.
위 화면에서 원하는 차트를 선택하면 해당 차트에 대한 코드 및 매뉴얼이 아주 아주 친절하게 나와있다.
나는 파이차트를 선택해서 들어가봤더니 오른쪽엔 파이차트를 뿌렸을 때 보여지는 모양새가 따란 나와있고, 왼쪽은 그 파이차트에 원하는 속성 및 사용가능한 속성을 정의해놨다. 그리고 이게 진짜 좋은게 왼쪽에서 원하는 속성의 값을 변경할 수 있는데 그 값이 오른쪽 차트에 즉각 반영된다.
예를 들어, 테두리의 두께와 색을 변경한다고 해보자. 다음과 같이 색상을 빨간색, 두께를 12px로 변경을 했다.
그러면 다음처럼 바로 그 값이 반영된 모습으로 보여진다.
더 좋은건 이렇게 반영된 리액트 코드를 나를 위해 알아서 짜준다는 것.
그대로 가져다가 사용만하면 된다. 꽤나 괜찮은 라이브러리이고 매뉴얼 또한 아주 준수하다.
결과
이렇게 가져다가 사용하여 만든 회사 프로젝트의 대시보드는 다음처럼 생겼다.
정말 많은 차트가 있고, 가져다가 사용하기가 너무 수월해서 공유하는 마음으로 작성해보았다.