한약재 구성 물질 시각화 리액트 컴포넌트

한약재를 구성하는 재료(성분)들의 구성비율과 그 함유량을 한눈에 보기 좋게 시각화하여 리액트에서 사용할 수 있도록 컴포넌트화 한 라이브러리이다.

시각화 방식으로 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)

1. groups: {label: string; weight: string; details?: any}[]

   시각화 자료로서 '라벨' 과 '구성비율' 속성값을 가진 객체배열의 형태로 구성된다. 추가적으로 오른쪽 배너(상세정보란)을 위한 해당 재료의 상세내용을 더하여 필요한 형태로 구성해서 볼 수 있다