TreemapChart

Data Visualization

visx 기반 트리맵.

Usage

계층 항목의 부분-전체 비율을 중첩된 사각형 면적으로 비교할 때 사용한다.

import

import { TreemapChart } from '@mildang/design-system/Chart';

예제를 복사해 쓸 때 필요한 준비

• @mildang/styled-system 은 이 저장소에서 Panda 가 생성하는 산출물이다. 저장소 안에서는 turbo run ship 이후 쓸 수 있고, 패키지 소비자는 자기 Panda 산출물이나 다른 레이아웃 수단으로 바꿔야 한다.

API Reference

TreemapChart Props

Prop

Type

Default

root

필수

TreemapNode

지정 안 함

className

string

지정 안 함

colors

string[]

지정 안 함

formatValue

(value: number) => string

(value: number) => value.toLocaleString()

legendPosition

"bottom" | "left" | "right" | "top"

bottom

margin

Partial<ChartMargin>

지정 안 함

paddingInner

number

showLabels

boolean

true

showLegend

boolean

false

showTooltip

boolean

false

예제

기본 (계층)

코드

Open in Playground

import { TreemapChart } from '@mildang/design-system/Chart';
import { TreemapNode } from '@mildang/design-system/Chart';

// 과목군 > 세부 과목별 학습 시간(분)
const studyTimeRoot: TreemapNode = {
  name: '전체 학습 시간',
  children: [
    {
      name: '국어',
      children: [
        { name: '문학', value: 420 },
        { name: '독서', value: 380 },
        { name: '화법과 작문', value: 160 },
      ],
    },
    {
      name: '영어',
      children: [
        { name: '독해', value: 520 },
        { name: '문법', value: 240 },
        { name: '어휘', value: 180 },
      ],
    },
    {
      name: '수학',
      children: [
        { name: '수학 I', value: 610 },
        { name: '수학 II', value: 450 },
        { name: '미적분', value: 300 },
      ],
    },
    {
      name: '탐구',
      children: [
        { name: '생활과 윤리', value: 150 },
        { name: '사회문화', value: 130 },
      ],
    },
  ],
};

const TreemapChartDefaultExample = () => <TreemapChart root={studyTimeRoot} showLegend />;

export default TreemapChartDefaultExample;

평면 (그룹 없음)

코드

Open in Playground

import { TreemapChart } from '@mildang/design-system/Chart';
import { TreemapNode } from '@mildang/design-system/Chart';

// 반별 문제 풀이 수 — 그룹 없는 평면 구조
const flatRoot: TreemapNode = {
  name: '반별 문제 풀이 수',
  children: [
    { name: '1반', value: 1240 },
    { name: '2반', value: 980 },
    { name: '3반', value: 1520 },
    { name: '4반', value: 760 },
    { name: '5반', value: 1100 },
  ],
};

const TreemapChartFlatExample = () => <TreemapChart root={flatRoot} showLegend />;

export default TreemapChartFlatExample;

Hover Tooltip

코드

Open in Playground

import { TreemapChart } from '@mildang/design-system/Chart';
import { TreemapNode } from '@mildang/design-system/Chart';

// 과목군 > 세부 과목별 학습 시간(분)
const studyTimeRoot: TreemapNode = {
  name: '전체 학습 시간',
  children: [
    {
      name: '국어',
      children: [
        { name: '문학', value: 420 },
        { name: '독서', value: 380 },
        { name: '화법과 작문', value: 160 },
      ],
    },
    {
      name: '영어',
      children: [
        { name: '독해', value: 520 },
        { name: '문법', value: 240 },
        { name: '어휘', value: 180 },
      ],
    },
    {
      name: '수학',
      children: [
        { name: '수학 I', value: 610 },
        { name: '수학 II', value: 450 },
        { name: '미적분', value: 300 },
      ],
    },
    {
      name: '탐구',
      children: [
        { name: '생활과 윤리', value: 150 },
        { name: '사회문화', value: 130 },
      ],
    },
  ],
};

const TreemapChartHoverTooltipExample = () => <TreemapChart root={studyTimeRoot} showLabels={false} showTooltip />;

export default TreemapChartHoverTooltipExample;

커스텀 색상

코드

Open in Playground

import { TreemapChart } from '@mildang/design-system/Chart';
import { token } from '@mildang/styled-system/tokens';
import { TreemapNode } from '@mildang/design-system/Chart';

// 과목군 > 세부 과목별 학습 시간(분)
const studyTimeRoot: TreemapNode = {
  name: '전체 학습 시간',
  children: [
    {
      name: '국어',
      children: [
        { name: '문학', value: 420 },
        { name: '독서', value: 380 },
        { name: '화법과 작문', value: 160 },
      ],
    },
    {
      name: '영어',
      children: [
        { name: '독해', value: 520 },
        { name: '문법', value: 240 },
        { name: '어휘', value: 180 },
      ],
    },
    {
      name: '수학',
      children: [
        { name: '수학 I', value: 610 },
        { name: '수학 II', value: 450 },
        { name: '미적분', value: 300 },
      ],
    },
    {
      name: '탐구',
      children: [
        { name: '생활과 윤리', value: 150 },
        { name: '사회문화', value: 130 },
      ],
    },
  ],
};

const TreemapChartCustomColorsExample = () => (
    <TreemapChart
      root={studyTimeRoot}
      colors={[
        token('colors.blue.light.400'),
        token('colors.green.light.400'),
        token('colors.orange.light.400'),
        token('colors.red.light.400'),
      ]}
      showLegend
    />
  );

export default TreemapChartCustomColorsExample;

셀 간격 조정

코드

Open in Playground

import { TreemapChart } from '@mildang/design-system/Chart';
import { TreemapNode } from '@mildang/design-system/Chart';

// 과목군 > 세부 과목별 학습 시간(분)
const studyTimeRoot: TreemapNode = {
  name: '전체 학습 시간',
  children: [
    {
      name: '국어',
      children: [
        { name: '문학', value: 420 },
        { name: '독서', value: 380 },
        { name: '화법과 작문', value: 160 },
      ],
    },
    {
      name: '영어',
      children: [
        { name: '독해', value: 520 },
        { name: '문법', value: 240 },
        { name: '어휘', value: 180 },
      ],
    },
    {
      name: '수학',
      children: [
        { name: '수학 I', value: 610 },
        { name: '수학 II', value: 450 },
        { name: '미적분', value: 300 },
      ],
    },
    {
      name: '탐구',
      children: [
        { name: '생활과 윤리', value: 150 },
        { name: '사회문화', value: 130 },
      ],
    },
  ],
};

const TreemapChartWithPaddingExample = () => <TreemapChart root={studyTimeRoot} paddingInner={6} />;

export default TreemapChartWithPaddingExample;

값 포맷 커스텀

코드

Open in Playground

import { TreemapChart } from '@mildang/design-system/Chart';
import { TreemapNode } from '@mildang/design-system/Chart';

// 과목군 > 세부 과목별 학습 시간(분)
const studyTimeRoot: TreemapNode = {
  name: '전체 학습 시간',
  children: [
    {
      name: '국어',
      children: [
        { name: '문학', value: 420 },
        { name: '독서', value: 380 },
        { name: '화법과 작문', value: 160 },
      ],
    },
    {
      name: '영어',
      children: [
        { name: '독해', value: 520 },
        { name: '문법', value: 240 },
        { name: '어휘', value: 180 },
      ],
    },
    {
      name: '수학',
      children: [
        { name: '수학 I', value: 610 },
        { name: '수학 II', value: 450 },
        { name: '미적분', value: 300 },
      ],
    },
    {
      name: '탐구',
      children: [
        { name: '생활과 윤리', value: 150 },
        { name: '사회문화', value: 130 },
      ],
    },
  ],
};

const TreemapChartValueFormatExample = () => <TreemapChart root={studyTimeRoot} formatValue={(v) => `${Math.round(v / 60)}시간`} showLegend />;

export default TreemapChartValueFormatExample;

데이터 1개

코드

Open in Playground

import { TreemapChart } from '@mildang/design-system/Chart';

const TreemapChartSingleLeafExample = () => <TreemapChart root={{ name: '전체', children: [{ name: '국어', value: 420 }] }} />;

export default TreemapChartSingleLeafExample;

빈 데이터

코드

Open in Playground

import { TreemapChart } from '@mildang/design-system/Chart';

const TreemapChartEmptyExample = () => <TreemapChart root={{ name: '전체', children: [] }} showLegend />;

export default TreemapChartEmptyExample;

0값 포함

코드

Open in Playground

import { TreemapChart } from '@mildang/design-system/Chart';

const TreemapChartWithZeroValuesExample = () => (
    <TreemapChart
      root={{
        name: '전체',
        children: [
          { name: '국어', value: 420 },
          { name: '영어', value: 0 },
          { name: '수학', value: 610 },
        ],
      }}
      showLegend
    />
  );

export default TreemapChartWithZeroValuesExample;

반응형 (너비 자동 조정)

코드

Open in Playground

import { TreemapChart } from '@mildang/design-system/Chart';
import { TreemapNode } from '@mildang/design-system/Chart';

// 과목군 > 세부 과목별 학습 시간(분)
const studyTimeRoot: TreemapNode = {
  name: '전체 학습 시간',
  children: [
    {
      name: '국어',
      children: [
        { name: '문학', value: 420 },
        { name: '독서', value: 380 },
        { name: '화법과 작문', value: 160 },
      ],
    },
    {
      name: '영어',
      children: [
        { name: '독해', value: 520 },
        { name: '문법', value: 240 },
        { name: '어휘', value: 180 },
      ],
    },
    {
      name: '수학',
      children: [
        { name: '수학 I', value: 610 },
        { name: '수학 II', value: 450 },
        { name: '미적분', value: 300 },
      ],
    },
    {
      name: '탐구',
      children: [
        { name: '생활과 윤리', value: 150 },
        { name: '사회문화', value: 130 },
      ],
    },
  ],
};

const TreemapChartResponsiveExample = () => (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 32, width: '100%' }}>
      {([280, 480, 720] as const).map((w) => (
        <div key={w} style={{ width: w }}>
          <div style={{ marginBottom: 4, fontSize: 11, color: '#888' }}>{w}px</div>
          <div style={{ width: w, height: 240 }}>
            <TreemapChart root={studyTimeRoot} showLegend />
          </div>
        </div>
      ))}
    </div>
  );

export default TreemapChartResponsiveExample;