웹 프론트엔드 작업에 필요한 시각화 모듈의 내용을 정리해 보겠습니다.
Charts
React 와 TypeScript 궁합에 잘 맞는 라이브러리 들 중 Npm Trends 를 기준으로 비교 분석을 진행 하였습니다. 압도적 우위를 보여주는 모듈들은 d3, chart.js, echarts.js 3개로 압축 되었습니다.
[D3 Plus]
JavaScript 에서는 10년 이상 발전해온 D3 모듈은 추상화가 적어서 작업량에 부담을 느끼고 있어서 기피를 하고 있었습니다. 오랫동안 개발자들에게 사랑을 받아온 만큼 Customized 된 모듈들이 많은데 **D3 Plue 추상화 된 모듈이 있었고 Gallery 예시도 잘 제공되고 있었습니다. React 에서 활용하기 편하도록 D3 Plus React 를 활용하면
React 를 활용한 Treemap 예시 와 같은 결과물도 쉽게 도출 가능 할 것으로 기대가 됩니다.
ApexCharts
D3 가 가장 오래되고 매뉴얼도 많았지만, 작업할 내용이 많아서 보류 되었습니다. 처음에는 빠른 작업속도를 위해 ApexCharts 도입을 고려 했지만, 확장성 측면에서 제약이 많아 최종에서는 제외 되었습니다.
Echarts for React
react-financial-charts 와 함께 최종 선택한 모듈 입니다. 공식문서 에서 TypeScript 예시를 함께 제공하고 있습니다. 한가지 아쉬운 부분은 Git Issue 가 상대적으로 많았습니다.
React Financial Charts
react-stockcharts 를 TypeScript 로 변환한 모듈 입니다. Npm Trends 에서 살펴보면 fork 가 시작된 모듈에 비해서 관심도는 낮지만 Issue 등이 적고, 버젼도 1.3 으로 꾸준히 안정적인 업데이트가 진행된 모듈 입니다. Code Example
AG Charts
AG Grid 는 자료 테이블을 생성 및 관리하는 모듈 입니다. 여기서도 시각화 모듈을 별도로 제공하고 있습니다. 그리고 공식문서에서 TreeMap 예시 자료 로 금융 사례를 활용한 내용도 들어 있습니다. 한가지 단점은 프레임 크기의 변화에 따른 반응성이 안되는 부분이 아쉽습니다.