FunnelChart

Data Visualization

visx 기반 퍼널 차트.

Usage

가입·결제처럼 단계가 진행될수록 줄어드는 전환 수와 이탈을 비교할 때 사용한다.

import

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

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

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

API Reference

FunnelChart Props

Prop

Type

Default

data

필수

TDatum[]

지정 안 함

stageKey

필수

string

지정 안 함

valueKey

필수

string

지정 안 함

className

string

지정 안 함

colors

string[]

지정 안 함

conversionLabel

string

전환율

direction

"vertical"

지정 안 함

legendPosition

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

bottom

margin

Partial<ChartMargin>

지정 안 함

paints

ChartPaint[]

지정 안 함

showConversion

boolean

true

showLegend

boolean

false

showTooltip

boolean

false

showValueText

boolean

true

valueFormat

(value: number) => string

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

valueLabel

string

지정 안 함

예제

기본

코드

Open in Playground

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

// 신규 학생 온보딩 퍼널 — 체험 신청부터 정규 전환까지
const admissionFunnel = [
  { stage: '체험 신청', students: 1200 },
  { stage: '상담 완료', students: 890 },
  { stage: '수강 등록', students: 560 },
  { stage: '1개월 유지', students: 430 },
  { stage: '정규 전환', students: 310 },
];

const FunnelChartDefaultExample = () => (
    <FunnelChart data={admissionFunnel} stageKey="stage" valueKey="students" valueLabel="학생 수" />
  );

export default FunnelChartDefaultExample;

Hover Tooltip

코드

Open in Playground

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

// 신규 학생 온보딩 퍼널 — 체험 신청부터 정규 전환까지
const admissionFunnel = [
  { stage: '체험 신청', students: 1200 },
  { stage: '상담 완료', students: 890 },
  { stage: '수강 등록', students: 560 },
  { stage: '1개월 유지', students: 430 },
  { stage: '정규 전환', students: 310 },
];

const FunnelChartHoverTooltipExample = () => (
    <FunnelChart
      data={admissionFunnel}
      stageKey="stage"
      valueKey="students"
      valueLabel="학생 수"
      showValueText={false}
      showConversion={false}
      showTooltip
    />
  );

export default FunnelChartHoverTooltipExample;

범례 표시

코드

Open in Playground

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

// 신규 학생 온보딩 퍼널 — 체험 신청부터 정규 전환까지
const admissionFunnel = [
  { stage: '체험 신청', students: 1200 },
  { stage: '상담 완료', students: 890 },
  { stage: '수강 등록', students: 560 },
  { stage: '1개월 유지', students: 430 },
  { stage: '정규 전환', students: 310 },
];

const FunnelChartWithLegendExample = () => (
    <FunnelChart
      data={admissionFunnel}
      stageKey="stage"
      valueKey="students"
      valueLabel="학생 수"
      showLegend
      legendPosition="right"
      showTooltip
    />
  );

export default FunnelChartWithLegendExample;

커스텀 색상

코드

Open in Playground

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

// 단원 학습 완주 퍼널
const learningFunnel = [
  { step: '강의 시청', count: 480 },
  { step: '문제 풀이', count: 402 },
  { step: '오답 복습', count: 265 },
  { step: '단원 평가 응시', count: 198 },
];

const FunnelChartCustomColorsExample = () => (
    <FunnelChart
      data={learningFunnel}
      stageKey="step"
      valueKey="count"
      valueLabel="학생 수"
      colors={[
        token('colors.blue.light.400'),
        token('colors.green.light.400'),
        token('colors.orange.light.400'),
        token('colors.red.light.400'),
      ]}
      showTooltip
    />
  );

export default FunnelChartCustomColorsExample;

값·전환율 라벨 숨김

코드

Open in Playground

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

// 신규 학생 온보딩 퍼널 — 체험 신청부터 정규 전환까지
const admissionFunnel = [
  { stage: '체험 신청', students: 1200 },
  { stage: '상담 완료', students: 890 },
  { stage: '수강 등록', students: 560 },
  { stage: '1개월 유지', students: 430 },
  { stage: '정규 전환', students: 310 },
];

const FunnelChartLabelsHiddenExample = () => (
    <FunnelChart
      data={admissionFunnel}
      stageKey="stage"
      valueKey="students"
      valueLabel="학생 수"
      showValueText={false}
      showConversion={false}
    />
  );

export default FunnelChartLabelsHiddenExample;

데이터 1개

코드

Open in Playground

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

const FunnelChartSingleStageExample = () => (
    <FunnelChart
      data={[{ stage: '체험 신청', students: 1200 }]}
      stageKey="stage"
      valueKey="students"
      valueLabel="학생 수"
    />
  );

export default FunnelChartSingleStageExample;

빈 데이터

코드

Open in Playground

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

const FunnelChartEmptyExample = () => <FunnelChart data={[]} stageKey="stage" valueKey="students" />;

export default FunnelChartEmptyExample;

값이 0인 경우

코드

Open in Playground

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

const FunnelChartWithZeroValuesExample = () => (
    <FunnelChart
      data={[
        { stage: '초대 발송', students: 300 },
        { stage: '초대 수락', students: 0 },
        { stage: '학습 시작', students: 0 },
      ]}
      stageKey="stage"
      valueKey="students"
      valueLabel="학생 수"
      showTooltip
    />
  );

export default FunnelChartWithZeroValuesExample;

반응형 (너비 자동 조정)

코드

Open in Playground

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

// 신규 학생 온보딩 퍼널 — 체험 신청부터 정규 전환까지
const admissionFunnel = [
  { stage: '체험 신청', students: 1200 },
  { stage: '상담 완료', students: 890 },
  { stage: '수강 등록', students: 560 },
  { stage: '1개월 유지', students: 430 },
  { stage: '정규 전환', students: 310 },
];

const FunnelChartResponsiveExample = () => (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 32, width: '100%' }}>
      {([240, 400, 640] as const).map((w) => (
        <div key={w} style={{ width: w, height: 240 }}>
          <FunnelChart data={admissionFunnel} stageKey="stage" valueKey="students" valueLabel="학생 수" />
        </div>
      ))}
    </div>
  );

export default FunnelChartResponsiveExample;