0.1.5 • Published 3 years ago
formula-treemap v0.1.5
한약재 구성 물질 시각화 리액트 컴포넌트
한약재를 구성하는 재료(성분)들의 구성비율과 그 함유량을 한눈에 보기 좋게 시각화하여 리액트에서 사용할 수 있도록 컴포넌트화 한 라이브러리이다.
시각화 방식으로 Voronoi Treemap 을 적용한 FoamTree 라이브러리가 사용되었다. * Carrot Search: https://carrotsearch.com/foamtree/
사용법
import { FormulaTreemap } from 'formula-treemap';
const groups = [
{ label: '감초', weight: 0.88, details: { description: 'example1' } },
{ label: '시나몬', weight: 20.75, details: { description: 'example2' } },
{ label: '대추', weight: 2, details: { description: 'example3' } },
{ label: '반하', weight: 3.75, details: { description: 'example4' } },
];
function FoamTree() {
return (
<div>
<FormulaViewer groups={groups} />
</div>
);
}
속성(Props)
- groups: {label: string; weight: string; details?: any}[]
시각화 자료로서 '라벨' 과 '구성비율' 속성값을 가진 객체배열의 형태로 구성된다. 추가적으로 오른쪽 배너(상세정보란)을 위한 해당 재료의 상세내용을 더하여 필요한 형태로 구성해서 볼 수 있다