밀당 DS

시작하기

BumpChart

Data Visualization

visx 기반 범프 차트.

Usage

기간에 따라 항목의 순위가 어떻게 바뀌었는지 추적할 때 사용한다.

import

import

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

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

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

API Reference

BumpChart Props

Prop

Type

Default

data
필수

TDatum[]

지정 안 함

rankKey
필수

string

지정 안 함

seriesKey
필수

string

지정 안 함

xKey
필수

string

지정 안 함

children

ReactNode

지정 안 함

className

string

지정 안 함

colors

string[]

지정 안 함

legendPosition

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

bottom

margin

Partial<ChartMargin>

지정 안 함

paints

ChartPaint[]

지정 안 함

pointRadius

number

5

rankFormat

(rank: number) => string

(rank: number) => `${rank}위`

showLegend

boolean

false

showRankNumbers

boolean

false

showSeriesLabels

boolean

true

showTooltip

boolean

false

showXAxis

boolean

true

showYAxis

boolean

true

예제

기본

코드

Open in Playground
import { BumpChart } from '@mildang/design-system/Chart';

// 월별 모의고사 반 내 순위 (long 데이터)
const examRankData = [
  { month: '3월', student: '김민준', rank: 1 },
  { month: '3월', student: '이서연', rank: 2 },
  { month: '3월', student: '박지호', rank: 3 },
  { month: '3월', student: '최유나', rank: 4 },
  { month: '4월', student: '김민준', rank: 2 },
  { month: '4월', student: '이서연', rank: 1 },
  { month: '4월', student: '박지호', rank: 4 },
  { month: '4월', student: '최유나', rank: 3 },
  { month: '5월', student: '김민준', rank: 3 },
  { month: '5월', student: '이서연', rank: 1 },
  { month: '5월', student: '박지호', rank: 4 },
  { month: '5월', student: '최유나', rank: 2 },
  { month: '6월', student: '김민준', rank: 4 },
  { month: '6월', student: '이서연', rank: 2 },
  { month: '6월', student: '박지호', rank: 3 },
  { month: '6월', student: '최유나', rank: 1 },
  { month: '7월', student: '김민준', rank: 2 },
  { month: '7월', student: '이서연', rank: 3 },
  { month: '7월', student: '박지호', rank: 4 },
  { month: '7월', student: '최유나', rank: 1 },
];

const BumpChartDefaultExample = () => <BumpChart data={examRankData} xKey="month" seriesKey="student" rankKey="rank" />;

export default BumpChartDefaultExample;

순위 숫자 표시

코드

Open in Playground
import { BumpChart } from '@mildang/design-system/Chart';

// 월별 모의고사 반 내 순위 (long 데이터)
const examRankData = [
  { month: '3월', student: '김민준', rank: 1 },
  { month: '3월', student: '이서연', rank: 2 },
  { month: '3월', student: '박지호', rank: 3 },
  { month: '3월', student: '최유나', rank: 4 },
  { month: '4월', student: '김민준', rank: 2 },
  { month: '4월', student: '이서연', rank: 1 },
  { month: '4월', student: '박지호', rank: 4 },
  { month: '4월', student: '최유나', rank: 3 },
  { month: '5월', student: '김민준', rank: 3 },
  { month: '5월', student: '이서연', rank: 1 },
  { month: '5월', student: '박지호', rank: 4 },
  { month: '5월', student: '최유나', rank: 2 },
  { month: '6월', student: '김민준', rank: 4 },
  { month: '6월', student: '이서연', rank: 2 },
  { month: '6월', student: '박지호', rank: 3 },
  { month: '6월', student: '최유나', rank: 1 },
  { month: '7월', student: '김민준', rank: 2 },
  { month: '7월', student: '이서연', rank: 3 },
  { month: '7월', student: '박지호', rank: 4 },
  { month: '7월', student: '최유나', rank: 1 },
];

const BumpChartRankNumbersExample = () => (
    <BumpChart
      data={examRankData}
      xKey="month"
      seriesKey="student"
      rankKey="rank"
      showRankNumbers
    />
  );

export default BumpChartRankNumbersExample;

Hover Tooltip

코드

Open in Playground
import { BumpChart } from '@mildang/design-system/Chart';

// 월별 모의고사 반 내 순위 (long 데이터)
const examRankData = [
  { month: '3월', student: '김민준', rank: 1 },
  { month: '3월', student: '이서연', rank: 2 },
  { month: '3월', student: '박지호', rank: 3 },
  { month: '3월', student: '최유나', rank: 4 },
  { month: '4월', student: '김민준', rank: 2 },
  { month: '4월', student: '이서연', rank: 1 },
  { month: '4월', student: '박지호', rank: 4 },
  { month: '4월', student: '최유나', rank: 3 },
  { month: '5월', student: '김민준', rank: 3 },
  { month: '5월', student: '이서연', rank: 1 },
  { month: '5월', student: '박지호', rank: 4 },
  { month: '5월', student: '최유나', rank: 2 },
  { month: '6월', student: '김민준', rank: 4 },
  { month: '6월', student: '이서연', rank: 2 },
  { month: '6월', student: '박지호', rank: 3 },
  { month: '6월', student: '최유나', rank: 1 },
  { month: '7월', student: '김민준', rank: 2 },
  { month: '7월', student: '이서연', rank: 3 },
  { month: '7월', student: '박지호', rank: 4 },
  { month: '7월', student: '최유나', rank: 1 },
];

const BumpChartHoverTooltipExample = () => (
    <BumpChart
      data={examRankData}
      xKey="month"
      seriesKey="student"
      rankKey="rank"
      showTooltip
      showSeriesLabels={false}
      showYAxis={false}
    />
  );

export default BumpChartHoverTooltipExample;

범례

코드

Open in Playground
import { BumpChart } from '@mildang/design-system/Chart';

// 월별 모의고사 반 내 순위 (long 데이터)
const examRankData = [
  { month: '3월', student: '김민준', rank: 1 },
  { month: '3월', student: '이서연', rank: 2 },
  { month: '3월', student: '박지호', rank: 3 },
  { month: '3월', student: '최유나', rank: 4 },
  { month: '4월', student: '김민준', rank: 2 },
  { month: '4월', student: '이서연', rank: 1 },
  { month: '4월', student: '박지호', rank: 4 },
  { month: '4월', student: '최유나', rank: 3 },
  { month: '5월', student: '김민준', rank: 3 },
  { month: '5월', student: '이서연', rank: 1 },
  { month: '5월', student: '박지호', rank: 4 },
  { month: '5월', student: '최유나', rank: 2 },
  { month: '6월', student: '김민준', rank: 4 },
  { month: '6월', student: '이서연', rank: 2 },
  { month: '6월', student: '박지호', rank: 3 },
  { month: '6월', student: '최유나', rank: 1 },
  { month: '7월', student: '김민준', rank: 2 },
  { month: '7월', student: '이서연', rank: 3 },
  { month: '7월', student: '박지호', rank: 4 },
  { month: '7월', student: '최유나', rank: 1 },
];

const BumpChartWithLegendExample = () => (
    <BumpChart
      data={examRankData}
      xKey="month"
      seriesKey="student"
      rankKey="rank"
      showSeriesLabels={false}
      showLegend
    />
  );

export default BumpChartWithLegendExample;

커스텀 색상

코드

Open in Playground
import { BumpChart } from '@mildang/design-system/Chart';
import { token } from '@mildang/styled-system/tokens';

// 월별 모의고사 반 내 순위 (long 데이터)
const examRankData = [
  { month: '3월', student: '김민준', rank: 1 },
  { month: '3월', student: '이서연', rank: 2 },
  { month: '3월', student: '박지호', rank: 3 },
  { month: '3월', student: '최유나', rank: 4 },
  { month: '4월', student: '김민준', rank: 2 },
  { month: '4월', student: '이서연', rank: 1 },
  { month: '4월', student: '박지호', rank: 4 },
  { month: '4월', student: '최유나', rank: 3 },
  { month: '5월', student: '김민준', rank: 3 },
  { month: '5월', student: '이서연', rank: 1 },
  { month: '5월', student: '박지호', rank: 4 },
  { month: '5월', student: '최유나', rank: 2 },
  { month: '6월', student: '김민준', rank: 4 },
  { month: '6월', student: '이서연', rank: 2 },
  { month: '6월', student: '박지호', rank: 3 },
  { month: '6월', student: '최유나', rank: 1 },
  { month: '7월', student: '김민준', rank: 2 },
  { month: '7월', student: '이서연', rank: 3 },
  { month: '7월', student: '박지호', rank: 4 },
  { month: '7월', student: '최유나', rank: 1 },
];

const BumpChartCustomColorsExample = () => (
    <BumpChart
      data={examRankData}
      xKey="month"
      seriesKey="student"
      rankKey="rank"
      colors={[
        token('colors.blue.light.400'),
        token('colors.orange.light.400'),
        token('colors.green.light.400'),
        token('colors.red.light.400'),
      ]}
    />
  );

export default BumpChartCustomColorsExample;

기간 1개

코드

Open in Playground
import { BumpChart } from '@mildang/design-system/Chart';

// 월별 모의고사 반 내 순위 (long 데이터)
const examRankData = [
  { month: '3월', student: '김민준', rank: 1 },
  { month: '3월', student: '이서연', rank: 2 },
  { month: '3월', student: '박지호', rank: 3 },
  { month: '3월', student: '최유나', rank: 4 },
  { month: '4월', student: '김민준', rank: 2 },
  { month: '4월', student: '이서연', rank: 1 },
  { month: '4월', student: '박지호', rank: 4 },
  { month: '4월', student: '최유나', rank: 3 },
  { month: '5월', student: '김민준', rank: 3 },
  { month: '5월', student: '이서연', rank: 1 },
  { month: '5월', student: '박지호', rank: 4 },
  { month: '5월', student: '최유나', rank: 2 },
  { month: '6월', student: '김민준', rank: 4 },
  { month: '6월', student: '이서연', rank: 2 },
  { month: '6월', student: '박지호', rank: 3 },
  { month: '6월', student: '최유나', rank: 1 },
  { month: '7월', student: '김민준', rank: 2 },
  { month: '7월', student: '이서연', rank: 3 },
  { month: '7월', student: '박지호', rank: 4 },
  { month: '7월', student: '최유나', rank: 1 },
];

const BumpChartSinglePeriodExample = () => (
    <BumpChart
      data={examRankData.filter((d) => d.month === '3월')}
      xKey="month"
      seriesKey="student"
      rankKey="rank"
      showRankNumbers
    />
  );

export default BumpChartSinglePeriodExample;

빈 데이터

코드

Open in Playground
import { BumpChart } from '@mildang/design-system/Chart';

const BumpChartEmptyExample = () => <BumpChart data={[]} xKey="month" seriesKey="student" rankKey="rank" />;

export default BumpChartEmptyExample;

반응형 (너비 자동 조정)

코드

Open in Playground
import { BumpChart } from '@mildang/design-system/Chart';

// 월별 모의고사 반 내 순위 (long 데이터)
const examRankData = [
  { month: '3월', student: '김민준', rank: 1 },
  { month: '3월', student: '이서연', rank: 2 },
  { month: '3월', student: '박지호', rank: 3 },
  { month: '3월', student: '최유나', rank: 4 },
  { month: '4월', student: '김민준', rank: 2 },
  { month: '4월', student: '이서연', rank: 1 },
  { month: '4월', student: '박지호', rank: 4 },
  { month: '4월', student: '최유나', rank: 3 },
  { month: '5월', student: '김민준', rank: 3 },
  { month: '5월', student: '이서연', rank: 1 },
  { month: '5월', student: '박지호', rank: 4 },
  { month: '5월', student: '최유나', rank: 2 },
  { month: '6월', student: '김민준', rank: 4 },
  { month: '6월', student: '이서연', rank: 2 },
  { month: '6월', student: '박지호', rank: 3 },
  { month: '6월', student: '최유나', rank: 1 },
  { month: '7월', student: '김민준', rank: 2 },
  { month: '7월', student: '이서연', rank: 3 },
  { month: '7월', student: '박지호', rank: 4 },
  { month: '7월', student: '최유나', rank: 1 },
];

const BumpChartResponsiveExample = () => (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 32, width: '100%' }}>
      {([320, 480, 720] as const).map((w) => (
        <div key={w} style={{ width: w, height: 240 }}>
          <BumpChart data={examRankData} xKey="month" seriesKey="student" rankKey="rank" />
        </div>
      ))}
    </div>
  );

export default BumpChartResponsiveExample;

Compound 패턴

코드

Open in Playground
import { BumpChart } from '@mildang/design-system/Chart';

// 월별 모의고사 반 내 순위 (long 데이터)
const examRankData = [
  { month: '3월', student: '김민준', rank: 1 },
  { month: '3월', student: '이서연', rank: 2 },
  { month: '3월', student: '박지호', rank: 3 },
  { month: '3월', student: '최유나', rank: 4 },
  { month: '4월', student: '김민준', rank: 2 },
  { month: '4월', student: '이서연', rank: 1 },
  { month: '4월', student: '박지호', rank: 4 },
  { month: '4월', student: '최유나', rank: 3 },
  { month: '5월', student: '김민준', rank: 3 },
  { month: '5월', student: '이서연', rank: 1 },
  { month: '5월', student: '박지호', rank: 4 },
  { month: '5월', student: '최유나', rank: 2 },
  { month: '6월', student: '김민준', rank: 4 },
  { month: '6월', student: '이서연', rank: 2 },
  { month: '6월', student: '박지호', rank: 3 },
  { month: '6월', student: '최유나', rank: 1 },
  { month: '7월', student: '김민준', rank: 2 },
  { month: '7월', student: '이서연', rank: 3 },
  { month: '7월', student: '박지호', rank: 4 },
  { month: '7월', student: '최유나', rank: 1 },
];

const BumpChartCompoundUsageExample = () => (
    <BumpChart data={examRankData} xKey="month" seriesKey="student" rankKey="rank">
      <BumpChart.XAxis hideTicks hideAxisLine />
      <BumpChart.Lines />
    </BumpChart>
  );

export default BumpChartCompoundUsageExample;