Package Exports
- formula-treemap
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (formula-treemap) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
한약재 구성 물질 시각화 리액트 컴포넌트
한약재를 구성하는 재료(성분)들의 구성비율과 그 함유량을 한눈에 보기 좋게 시각화하여 리액트에서 사용할 수 있도록 컴포넌트화 한 라이브러리이다.
시각화 방식으로 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}[]
시각화 자료로서 '라벨' 과 '구성비율' 속성값을 가진 객체배열의 형태로 구성된다. 추가적으로 오른쪽 배너(상세정보란)을 위한 해당 재료의 상세내용을 더하여 필요한 형태로 구성해서 볼 수 있다