TreeChart

Data Visualization

visx 기반 가로 덴드로그램.

Usage

조직도·단원 구조 같은 계층의 부모-자식 관계를 좌우 방향으로 보여 줄 때 사용한다.

import

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

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

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

API Reference

TreeChart Props

Prop

Type

Default

root

필수

TreeNode

지정 안 함

className

string

지정 안 함

direction

"horizontal"

지정 안 함

linkColor

string

지정 안 함

margin

Partial<ChartMargin>

지정 안 함

nodeColor

string

지정 안 함

nodeRadius

number

showLabels

boolean

true

예제

기본 (단원 구조)

코드

Open in Playground

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

const curriculumRoot: TreeNode = {
  name: '중1 수학',
  children: [
    {
      name: 'I. 수와 연산',
      children: [
        { name: '소인수분해' },
        { name: '최대공약수·최소공배수' },
        { name: '정수와 유리수' },
      ],
    },
    {
      name: 'II. 문자와 식',
      children: [{ name: '문자의 사용과 식' }, { name: '일차방정식' }],
    },
    {
      name: 'III. 좌표평면과 그래프',
      children: [{ name: '순서쌍과 좌표' }, { name: '그래프와 비례' }],
    },
  ],
};

const TreeChartDefaultExample = () => <TreeChart root={curriculumRoot} />;

export default TreeChartDefaultExample;

조직도 (커스텀 색·반지름)

코드

Open in Playground

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

const orgRoot: TreeNode = {
  name: '밀당 학원',
  children: [
    { name: '수학과', children: [{ name: '김민준 선생님' }, { name: '이서연 선생님' }] },
    {
      name: '영어과',
      children: [{ name: '박지훈 선생님' }, { name: '최수아 선생님' }, { name: '정도윤 선생님' }],
    },
    { name: '행정팀', children: [{ name: '한지민 매니저' }] },
  ],
};

const TreeChartOrgChartExample = () => (
    <TreeChart
      root={orgRoot}
      nodeRadius={7}
      nodeColor={token('colors.blue.light.400')}
      linkColor={token('colors.info.border.highest')}
    />
  );

export default TreeChartOrgChartExample;

라벨 숨김

코드

Open in Playground

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

const curriculumRoot: TreeNode = {
  name: '중1 수학',
  children: [
    {
      name: 'I. 수와 연산',
      children: [
        { name: '소인수분해' },
        { name: '최대공약수·최소공배수' },
        { name: '정수와 유리수' },
      ],
    },
    {
      name: 'II. 문자와 식',
      children: [{ name: '문자의 사용과 식' }, { name: '일차방정식' }],
    },
    {
      name: 'III. 좌표평면과 그래프',
      children: [{ name: '순서쌍과 좌표' }, { name: '그래프와 비례' }],
    },
  ],
};

const TreeChartWithoutLabelsExample = () => <TreeChart root={curriculumRoot} showLabels={false} />;

export default TreeChartWithoutLabelsExample;

깊은 트리 (4단계)

코드

Open in Playground

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

const TreeChartDeepTreeExample = () => (
    <TreeChart
      root={{
        name: '고1 국어',
        children: [
          {
            name: '문학',
            children: [
              { name: '현대시', children: [{ name: '진달래꽃' }, { name: '님의 침묵' }] },
              { name: '고전 소설', children: [{ name: '춘향전' }] },
            ],
          },
          {
            name: '문법',
            children: [{ name: '음운', children: [{ name: '음운의 변동' }] }],
          },
        ],
      }}
    />
  );

export default TreeChartDeepTreeExample;

노드 1개 (루트만)

코드

Open in Playground

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

const TreeChartSingleNodeExample = () => <TreeChart root={{ name: '중1 수학' }} />;

export default TreeChartSingleNodeExample;

반응형 (너비 자동 조정)

코드

Open in Playground

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

const orgRoot: TreeNode = {
  name: '밀당 학원',
  children: [
    { name: '수학과', children: [{ name: '김민준 선생님' }, { name: '이서연 선생님' }] },
    {
      name: '영어과',
      children: [{ name: '박지훈 선생님' }, { name: '최수아 선생님' }, { name: '정도윤 선생님' }],
    },
    { name: '행정팀', children: [{ name: '한지민 매니저' }] },
  ],
};

const TreeChartResponsiveExample = () => (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 32, width: '100%' }}>
      {([360, 560, 760] 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: 280 }}>
            <TreeChart root={orgRoot} />
          </div>
        </div>
      ))}
    </div>
  );

export default TreeChartResponsiveExample;