SunburstChart

Data Visualization

visx Partition 기반 선버스트 차트.

Usage

계층 데이터의 단계와 부분-전체 비율을 동심원 고리로 함께 볼 때 사용한다.

import

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

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

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

API Reference

SunburstChart Props

Prop

Type

Default

root

필수

SunburstNode

지정 안 함

children

ReactNode

지정 안 함

className

string

지정 안 함

colors

string[]

지정 안 함

innerRadius

number

legendPosition

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

bottom

margin

Partial<ChartMargin>

지정 안 함

showLabels

boolean

false

showLegend

boolean

false

showTooltip

boolean

false

예제

기본

코드

Open in Playground

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

// 주간 과목별 학습 시간(분) — 과목 > 단원 2단계 트리
const studyTimeTree: SunburstNode = {
  name: '주간 학습 시간',
  children: [
    {
      name: '수학',
      children: [
        { name: '미적분', value: 320 },
        { name: '확률과 통계', value: 180 },
        { name: '수열', value: 140 },
      ],
    },
    {
      name: '영어',
      children: [
        { name: '독해', value: 260 },
        { name: '문법', value: 120 },
        { name: '어휘', value: 90 },
      ],
    },
    {
      name: '국어',
      children: [
        { name: '문학', value: 200 },
        { name: '비문학', value: 160 },
      ],
    },
    { name: '과학', value: 110 },
  ],
};

const SunburstChartBasicExample = () => <SunburstChart root={studyTimeTree} showLegend />;

export default SunburstChartBasicExample;

중앙 홀 (innerRadius)

코드

Open in Playground

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

// 주간 과목별 학습 시간(분) — 과목 > 단원 2단계 트리
const studyTimeTree: SunburstNode = {
  name: '주간 학습 시간',
  children: [
    {
      name: '수학',
      children: [
        { name: '미적분', value: 320 },
        { name: '확률과 통계', value: 180 },
        { name: '수열', value: 140 },
      ],
    },
    {
      name: '영어',
      children: [
        { name: '독해', value: 260 },
        { name: '문법', value: 120 },
        { name: '어휘', value: 90 },
      ],
    },
    {
      name: '국어',
      children: [
        { name: '문학', value: 200 },
        { name: '비문학', value: 160 },
      ],
    },
    { name: '과학', value: 110 },
  ],
};

const SunburstChartDonutExample = () => <SunburstChart root={studyTimeTree} innerRadius={60} showLabels showLegend />;

export default SunburstChartDonutExample;

3단계 계층

코드

Open in Playground

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

// 단원 진도 — 과목 > 단원 > 학습 유형 3단계 트리
const curriculumTree: SunburstNode = {
  name: '단원 진도',
  children: [
    {
      name: '수학 I',
      children: [
        {
          name: '지수와 로그',
          children: [
            { name: '개념 학습', value: 45 },
            { name: '문제 풀이', value: 80 },
          ],
        },
        {
          name: '삼각함수',
          children: [
            { name: '개념 학습', value: 60 },
            { name: '문제 풀이', value: 95 },
          ],
        },
      ],
    },
    {
      name: '수학 II',
      children: [
        {
          name: '미분',
          children: [
            { name: '개념 학습', value: 70 },
            { name: '문제 풀이', value: 120 },
          ],
        },
        {
          name: '적분',
          children: [
            { name: '개념 학습', value: 50 },
            { name: '문제 풀이', value: 65 },
          ],
        },
      ],
    },
  ],
};

const SunburstChartDeepHierarchyExample = () => <SunburstChart root={curriculumTree} showLabels showTooltip showLegend />;

export default SunburstChartDeepHierarchyExample;

Hover Tooltip

코드

Open in Playground

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

// 주간 과목별 학습 시간(분) — 과목 > 단원 2단계 트리
const studyTimeTree: SunburstNode = {
  name: '주간 학습 시간',
  children: [
    {
      name: '수학',
      children: [
        { name: '미적분', value: 320 },
        { name: '확률과 통계', value: 180 },
        { name: '수열', value: 140 },
      ],
    },
    {
      name: '영어',
      children: [
        { name: '독해', value: 260 },
        { name: '문법', value: 120 },
        { name: '어휘', value: 90 },
      ],
    },
    {
      name: '국어',
      children: [
        { name: '문학', value: 200 },
        { name: '비문학', value: 160 },
      ],
    },
    { name: '과학', value: 110 },
  ],
};

const SunburstChartHoverTooltipExample = () => <SunburstChart root={studyTimeTree} showTooltip />;

export default SunburstChartHoverTooltipExample;

커스텀 색상

코드

Open in Playground

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

// 주간 과목별 학습 시간(분) — 과목 > 단원 2단계 트리
const studyTimeTree: SunburstNode = {
  name: '주간 학습 시간',
  children: [
    {
      name: '수학',
      children: [
        { name: '미적분', value: 320 },
        { name: '확률과 통계', value: 180 },
        { name: '수열', value: 140 },
      ],
    },
    {
      name: '영어',
      children: [
        { name: '독해', value: 260 },
        { name: '문법', value: 120 },
        { name: '어휘', value: 90 },
      ],
    },
    {
      name: '국어',
      children: [
        { name: '문학', value: 200 },
        { name: '비문학', value: 160 },
      ],
    },
    { name: '과학', value: 110 },
  ],
};

const SunburstChartCustomColorsExample = () => (
    <SunburstChart
      root={studyTimeTree}
      colors={[
        token('colors.mildangPT.light.400'),
        token('colors.blue.light.400'),
        token('colors.orange.light.400'),
        token('colors.green.light.400'),
      ]}
      showLabels
      showLegend
    />
  );

export default SunburstChartCustomColorsExample;

빈 트리

코드

Open in Playground

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

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

export default SunburstChartEmptyExample;

데이터 1개

코드

Open in Playground

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

const SunburstChartSingleNodeExample = () => (
    <SunburstChart
      root={{ name: '전체', children: [{ name: '수학', value: 480 }] }}
      showLabels
      showLegend
    />
  );

export default SunburstChartSingleNodeExample;

0값 포함

코드

Open in Playground

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

const SunburstChartWithZeroValuesExample = () => (
    <SunburstChart
      root={{
        name: '전체',
        children: [
          {
            name: '수학',
            children: [
              { name: '미적분', value: 320 },
              { name: '기하', value: 0 },
            ],
          },
          { name: '영어', value: 0 },
          { name: '국어', value: 210 },
        ],
      }}
      showLabels
      showLegend
    />
  );

export default SunburstChartWithZeroValuesExample;

반응형 (크기 자동 조정)

코드

Open in Playground

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

// 주간 과목별 학습 시간(분) — 과목 > 단원 2단계 트리
const studyTimeTree: SunburstNode = {
  name: '주간 학습 시간',
  children: [
    {
      name: '수학',
      children: [
        { name: '미적분', value: 320 },
        { name: '확률과 통계', value: 180 },
        { name: '수열', value: 140 },
      ],
    },
    {
      name: '영어',
      children: [
        { name: '독해', value: 260 },
        { name: '문법', value: 120 },
        { name: '어휘', value: 90 },
      ],
    },
    {
      name: '국어',
      children: [
        { name: '문학', value: 200 },
        { name: '비문학', value: 160 },
      ],
    },
    { name: '과학', value: 110 },
  ],
};

const SunburstChartResponsiveExample = () => (
    <div style={{ display: 'flex', gap: 24, width: '100%' }}>
      {([180, 280, 380] as const).map((size) => (
        <div key={size}>
          <div style={{ marginBottom: 4, fontSize: 11, color: '#888' }}>{size}px</div>
          <div style={{ width: size, height: size }}>
            <SunburstChart root={studyTimeTree} innerRadius={size / 8} />
          </div>
        </div>
      ))}
    </div>
  );

export default SunburstChartResponsiveExample;