트리맵
항목의 구성비를 면적으로 보여 주는 표현 전용 차트입니다. 재고 금액 구성, 경비 카테고리처럼 항목이 많아 도넛으로는 조각이 너무 가늘어질 때 씁니다. 한 단계 목록을 큰 순서로 squarified 배치해 칸이 정사각형에 가깝습니다. 상자는 aspectRatio 를 지켜 폭이 바뀌어도 칸 모양이 그대로입니다. 면적이 작은 칸은 글자를 숨기고 마우스를 올리면 값이 나옵니다.
상태
원자재
값4,200만
비율39%
순위1 / 8
완제품
값2,900만
비율27%
순위2 / 8
반제품
값1,600만
비율15%
순위3 / 8
포장재
값820만
비율7.6%
순위4 / 8
소모품
값540만
비율5.0%
순위5 / 8
부품
값460만
비율4.2%
순위6 / 8
샘플
값210만
비율1.9%
순위7 / 8
기타
값120만
비율1.1%
순위8 / 8
원자재
분류원자재 (48%)
값4,200만
비율39%
순위1 / 8
포장재
분류원자재 (48%)
값820만
비율7.6%
순위4 / 8
샘플
분류원자재 (48%)
값210만
비율1.9%
순위7 / 8
완제품
분류완제품 (33%)
값2,900만
비율27%
순위2 / 8
소모품
분류완제품 (33%)
값540만
비율5.0%
순위5 / 8
기타
분류완제품 (33%)
값120만
비율1.1%
순위8 / 8
반제품
분류부자재 (19%)
값1,600만
비율15%
순위3 / 8
부품
분류부자재 (19%)
값460만
비율4.2%
순위6 / 8
활용 방법
재고 금액 구성
입력 순서와 상관없이 큰 순서로 배치한다. 0 이하 값은 그리지 않는다.
원자재
값4,200만원
비율39%
순위1 / 8
완제품
값2,900만원
비율27%
순위2 / 8
반제품
값1,600만원
비율15%
순위3 / 8
포장재
값820만원
비율7.6%
순위4 / 8
소모품
값540만원
비율5.0%
순위5 / 8
부품
값460만원
비율4.2%
순위6 / 8
샘플
값210만원
비율1.9%
순위7 / 8
기타
값120만원
비율1.1%
순위8 / 8
<TreemapaspectRatio={2.4}items={[{ label: "원자재", value: 4200 },{ label: "완제품", value: 2900 },// ...]}formatValue={(v) => `${v.toLocaleString("ko-KR")}만원`}/>
칸을 눌러 상세로
items[].href 를 주면 칸이 링크가 된다. 거래처별 진행 중 품목처럼 칸마다 볼 목록이 있을 때 쓴다. 라우터는 DeuxLinkProvider 로 주입한다.
<Treemapitems={customers.map((c) => ({label: c.name,value: c.openItems,href: `/admin/process?q=${encodeURIComponent(c.name)}`,}))}/>
속성
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| items | TreemapItem[] | - | { label, value }. 큰 순서로 배치하고 0 이하는 뺀다 |
| items[].group | string | - | 분류. 있으면 분류마다 구역을 먼저 나누고 계열색 · 범례를 단다 |
| items[].href | string | - | 있으면 칸이 링크가 된다(DeuxLink, 소비 앱 라우터는 DeuxLinkProvider). 없으면 포커스만 받는 칸 |
| tone | ChartTone | "primary" | 분류가 없을 때 칸 색(18% 면 + 테두리, 글자는 글자색) |
| aspectRatio | number | 2 | 상자 가로/세로 비율. 배치도 이 비율로 계산한다 |
| formatValue | (v: number) => string | ko-KR 콤마 | 값 포맷 |