RoseChart

Data Visualization

visx 기반 나이팅게일 로즈 차트.

Usage

같은 각도 폭을 가진 범주의 수치를 반지름 길이로 비교할 때 사용한다.

import

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

API Reference

RoseChart Props

Prop

Type

Default

categoryKey

필수

string

지정 안 함

data

필수

TDatum[]

지정 안 함

valueKey

필수

string

지정 안 함

children

ReactNode

지정 안 함

className

string

지정 안 함

colors

string[]

지정 안 함

cornerRadius

number

legendPosition

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

bottom

margin

Partial<ChartMargin>

지정 안 함

padAngle

number

radiusScale

"linear" | "sqrt"

sqrt

showLabels

boolean

false

showLegend

boolean

false

showTooltip

boolean

false

예제

로즈 차트 (sqrt 스케일)

코드

Open in Playground

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

// 월별 학습 시간(분) — 합계 3,430분
const monthlyStudyData = [
  { month: '1월', minutes: 320 },
  { month: '2월', minutes: 280 },
  { month: '3월', minutes: 410 },
  { month: '4월', minutes: 360 },
  { month: '5월', minutes: 480 },
  { month: '6월', minutes: 520 },
  { month: '7월', minutes: 610 },
  { month: '8월', minutes: 450 },
];

const RoseChartRoseExample = () => (
    <RoseChart data={monthlyStudyData} categoryKey="month" valueKey="minutes" showLabels />
  );

export default RoseChartRoseExample;

Linear 스케일 (값 차이 강조)

코드

Open in Playground

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

// 월별 학습 시간(분) — 합계 3,430분
const monthlyStudyData = [
  { month: '1월', minutes: 320 },
  { month: '2월', minutes: 280 },
  { month: '3월', minutes: 410 },
  { month: '4월', minutes: 360 },
  { month: '5월', minutes: 480 },
  { month: '6월', minutes: 520 },
  { month: '7월', minutes: 610 },
  { month: '8월', minutes: 450 },
];

const RoseChartLinearScaleExample = () => (
    <RoseChart
      data={monthlyStudyData}
      categoryKey="month"
      valueKey="minutes"
      radiusScale="linear"
      showLabels
    />
  );

export default RoseChartLinearScaleExample;

간격 + 둥근 모서리

코드

Open in Playground

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

// 월별 학습 시간(분) — 합계 3,430분
const monthlyStudyData = [
  { month: '1월', minutes: 320 },
  { month: '2월', minutes: 280 },
  { month: '3월', minutes: 410 },
  { month: '4월', minutes: 360 },
  { month: '5월', minutes: 480 },
  { month: '6월', minutes: 520 },
  { month: '7월', minutes: 610 },
  { month: '8월', minutes: 450 },
];

const RoseChartWithGapExample = () => (
    <RoseChart
      data={monthlyStudyData}
      categoryKey="month"
      valueKey="minutes"
      padAngle={0.03}
      cornerRadius={4}
      showLabels
    />
  );

export default RoseChartWithGapExample;

Hover Tooltip

코드

Open in Playground

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

// 월별 학습 시간(분) — 합계 3,430분
const monthlyStudyData = [
  { month: '1월', minutes: 320 },
  { month: '2월', minutes: 280 },
  { month: '3월', minutes: 410 },
  { month: '4월', minutes: 360 },
  { month: '5월', minutes: 480 },
  { month: '6월', minutes: 520 },
  { month: '7월', minutes: 610 },
  { month: '8월', minutes: 450 },
];

const RoseChartHoverTooltipExample = () => (
    <RoseChart data={monthlyStudyData} categoryKey="month" valueKey="minutes" showTooltip />
  );

export default RoseChartHoverTooltipExample;

범례 포함

코드

Open in Playground

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

// 월별 학습 시간(분) — 합계 3,430분
const monthlyStudyData = [
  { month: '1월', minutes: 320 },
  { month: '2월', minutes: 280 },
  { month: '3월', minutes: 410 },
  { month: '4월', minutes: 360 },
  { month: '5월', minutes: 480 },
  { month: '6월', minutes: 520 },
  { month: '7월', minutes: 610 },
  { month: '8월', minutes: 450 },
];

const RoseChartWithLegendExample = () => (
    <RoseChart data={monthlyStudyData} categoryKey="month" valueKey="minutes" showLegend />
  );

export default RoseChartWithLegendExample;

범례 오른쪽

코드

Open in Playground

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

// 월별 학습 시간(분) — 합계 3,430분
const monthlyStudyData = [
  { month: '1월', minutes: 320 },
  { month: '2월', minutes: 280 },
  { month: '3월', minutes: 410 },
  { month: '4월', minutes: 360 },
  { month: '5월', minutes: 480 },
  { month: '6월', minutes: 520 },
  { month: '7월', minutes: 610 },
  { month: '8월', minutes: 450 },
];

const RoseChartWithLegendRightExample = () => (
    <RoseChart
      data={monthlyStudyData}
      categoryKey="month"
      valueKey="minutes"
      showLabels
      showLegend
      legendPosition="right"
    />
  );

export default RoseChartWithLegendRightExample;

데이터 1개 (완전한 원)

코드

Open in Playground

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

const RoseChartSingleDatumExample = () => (
    <RoseChart
      data={[{ month: '1월', minutes: 320 }]}
      categoryKey="month"
      valueKey="minutes"
      showLabels
      showLegend
    />
  );

export default RoseChartSingleDatumExample;

값이 0인 경우 (부채꼴 생략)

코드

Open in Playground

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

const zeroData = [
  { month: '1월', minutes: 320 },
  { month: '2월', minutes: 0 },
  { month: '3월', minutes: 410 },
  { month: '4월', minutes: 0 },
  { month: '5월', minutes: 480 },
  { month: '6월', minutes: 520 },
];

const RoseChartWithZeroValuesExample = () => (
    <RoseChart data={zeroData} categoryKey="month" valueKey="minutes" showLabels showLegend />
  );

export default RoseChartWithZeroValuesExample;

빈 데이터

코드

Open in Playground

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

const RoseChartEmptyExample = () => <RoseChart data={[]} categoryKey="month" valueKey="minutes" showLabels showLegend />;

export default RoseChartEmptyExample;

반응형 (너비 자동 조정)

코드

Open in Playground

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

// 월별 학습 시간(분) — 합계 3,430분
const monthlyStudyData = [
  { month: '1월', minutes: 320 },
  { month: '2월', minutes: 280 },
  { month: '3월', minutes: 410 },
  { month: '4월', minutes: 360 },
  { month: '5월', minutes: 480 },
  { month: '6월', minutes: 520 },
  { month: '7월', minutes: 610 },
  { month: '8월', minutes: 450 },
];

const RoseChartResponsiveExample = () => (
    <div style={{ display: 'flex', gap: 24, alignItems: 'flex-start', flexWrap: 'wrap', width: '100%' }}>
      {([160, 280, 400] as const).map((size) => (
        <div key={size}>
          <div style={{ marginBottom: 4, fontSize: 11, color: '#888' }}>{size}px</div>
          <div style={{ width: size, height: size }}>
            <RoseChart data={monthlyStudyData} categoryKey="month" valueKey="minutes" showLabels />
          </div>
        </div>
      ))}
    </div>
  );

export default RoseChartResponsiveExample;

Compound 패턴 (라벨 없이)

코드

Open in Playground

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

// 월별 학습 시간(분) — 합계 3,430분
const monthlyStudyData = [
  { month: '1월', minutes: 320 },
  { month: '2월', minutes: 280 },
  { month: '3월', minutes: 410 },
  { month: '4월', minutes: 360 },
  { month: '5월', minutes: 480 },
  { month: '6월', minutes: 520 },
  { month: '7월', minutes: 610 },
  { month: '8월', minutes: 450 },
];

const RoseChartCompoundUsageExample = () => (
    <RoseChart data={monthlyStudyData} categoryKey="month" valueKey="minutes" padAngle={0.02}>
      <RoseChart.Arcs />
    </RoseChart>
  );

export default RoseChartCompoundUsageExample;