ParetoChart

recharts 기반 파레토 차트 컴포넌트. 내림차순 막대와 누적 % 선을 함께 그립니다.

개요

첫 번째 시리즈를 Y값 내림차순으로 정렬해 막대로 그리고, 누적 백분율 선을 오른쪽 축(0–100%)에 그립니다. 누적 %는 전체 합 대비 반올림한 정수입니다. 품질 관리, 원인 분석 등에 씁니다.

주요 특징

• ✅ 자동 정렬: 입력 순서와 무관하게 값이 큰 항목부터 그린다
• ✅ 누적 % 선: 오른쪽 축 0–100%, 툴팁 값에 %가 붙는다. 이름은 cumulativeName, 곡선은 curve(기본 linear)
• ✅ 데이터 라벨: 막대에만 붙는다. dataLabelPosition, labelKey
• ✅ 범례 토글: 막대와 누적선을 따로 숨긴다. 누적 %는 숨김과 무관하게 전체 데이터 기준이다
• ✅ 숫자 서식: thousandSeparator, 축 눈금 포맷터(왼쪽 값 축)
• ✅ 컨테이너: 제목·도구·검색 폼·접기

기본 사용

series의 첫 시리즈만 씁니다. 막대 이름은 시리즈 name(없으면 yKey), 누적선 이름은 cumulativeName(기본 "누적 %")입니다.

import { ParetoChart } from "@vortex/ui-cals"
 
const series = [
  {
    data: [
      { category: "불량 A", count: 1200 },
      { category: "불량 B", count: 900 },
      { category: "불량 C", count: 600 },
      { category: "불량 D", count: 400 },
      { category: "불량 E", count: 250 },
      { category: "기타", count: 150 },
    ],
    xKey: "category",
    yKey: "count",
    name: "불량 수",
  },
]
 
<ParetoChart series={series} />

누적 % 선

입력 순서가 섞여 있어도 값 내림차순으로 다시 정렬하고, 누적 백분율을 오른쪽 축에 그립니다. 툴팁은 같은 x의 막대와 누적선을 함께 보이고 누적선 값에 %를 붙입니다. 누적선 이름은 cumulativeName, 곡선 종류는 curve(recharts 곡선 종류, 기본 "linear")로 바꿉니다.

const shuffled = [
  {
    data: [
      { category: "기타", count: 150 },
      { category: "불량 C", count: 600 },
      { category: "불량 A", count: 1200 },
      { category: "불량 E", count: 250 },
      { category: "불량 B", count: 900 },
      { category: "불량 D", count: 400 },
    ],
    xKey: "category",
    yKey: "count",
    name: "불량 수",
  },
]
 
<ParetoChart series={shuffled} />

범례·툴팁 끄기 (legend, tooltip)

둘 다 기본으로 켜져 있습니다.

<ParetoChart series={series} legend={false} tooltip={false} />

데이터 라벨 (showDataLabel, dataLabelPosition, labelKey)

라벨은 막대에만 붙고 누적선에는 없습니다. 위치는 "outside"(기본)·"insideEnd"·"center"·"insideStart" 중에서 고릅니다. 시리즈 labelKey를 주면 그 필드를 라벨로 씁니다.

<ParetoChart series={series} showDataLabel dataLabelPosition="insideStart" height={260} />
<ParetoChart series={[{ ...series[0], labelKey: "category" }]} showDataLabel height={260} />

천 단위 구분자 (thousandSeparator)

왼쪽 값 축 눈금, 막대 라벨, 툴팁에 함께 걸립니다. 오른쪽 % 축은 그대로입니다.

<ParetoChart series={series} thousandSeparator showDataLabel />

축 눈금 서식 (xAxisTickFormatter, yAxisTickFormatter)

yAxisTickFormatter는 왼쪽 값 축에만 걸립니다. 오른쪽 누적 축은 % 고정입니다.

<ParetoChart
  series={series}
  xAxisTickFormatter={(v) => `[${v}]`}
  yAxisTickFormatter={(v) => `${v}건`}
/>

축별 격자 (showXAxisGrid, showYAxisGrid)

Y축 격자는 왼쪽 값 축 눈금을 따릅니다. 오른쪽 % 축은 격자가 없습니다. 이 예는 세로선만 숨깁니다.

<ParetoChart series={series} showXAxisGrid={false} />

모서리 둥글기 (borderRadius)

막대 모서리를 둥글립니다. 기본은 0입니다.

<ParetoChart series={series} borderRadius={6} />

색상 (colors)

첫 색은 막대, 둘째 색은 누적선입니다.

<ParetoChart series={series} colors={["#0ea5e9", "#ef4444"]} />

범례 클릭 토글 (legendToggle)

범례 항목을 누르면 막대나 누적선을 숨기고, 다시 누르면 보입니다. 숨긴 항목은 범례에 흐리게 남습니다. 막대를 숨겨도 왼쪽 축은 남고 누적 %는 전체 데이터 기준입니다. 시리즈 이름과 cumulativeName이 같아도 둘을 따로 숨깁니다. 기본으로 켜져 있고 legendToggle={false}로 끕니다.

<ParetoChart series={series} legendToggle />

포인트 클릭 (onPointClick)

막대만 클릭됩니다. payload는 정렬 뒤에도 클릭한 막대의 원본 행(series[0].data[j] 그 객체)입니다.

막대를 클릭하세요

const [clicked, setClicked] = useState<ParetoChartPointClickData | null>(null)
 
<ParetoChart series={series} onPointClick={setClicked} />

제목·도구·검색 폼 (title, actions, searchContent)

title을 주면 접고 펼 수 있는 머리가 생깁니다. actions는 머리 오른쪽에, searchContent는 차트 위 검색 폼 자리에 그립니다. 검색 폼은 24칸 격자이고 searchColumns·searchColGap·searchRowGap으로 바꿉니다. title이 없으면 actions·검색 폼·접기 props는 쓰이지 않습니다.

import { ParetoChart, Button, FormCol, Text } from "@vortex/ui-cals"
 
<ParetoChart
  series={series}
  title="불량 유형"
  actions={
    <>
      <Button>조회</Button>
      <Button variant="outline">초기화</Button>
    </>
  }
  searchContent={
    <>
      <FormCol span={12}><Text label="기간" placeholder="2025-01 ~ 2025-06" /></FormCol>
      <FormCol span={12}><Text label="라인" placeholder="라인명" /></FormCol>
    </>
  }
/>

접기 (defaultCollapsed, collapseDisabled)

title이 있을 때 씁니다. 위는 접힌 채 시작하고, 아래는 접고 펼 수 없습니다.

<ParetoChart series={series} title="접힌 채 시작" defaultCollapsed />
<ParetoChart series={series} title="접기 막기" collapseDisabled />

빈 상태

데이터가 없으면 emptyText를 보입니다.

<ParetoChart series={[]} />

API Reference

Props

ParetoChartSeries

ParetoChartPointClickData

행 타입 (Row)

Props·Series·PointClickData는 행 타입 Row를 받습니다(기본 Record<string, unknown>). series의 data에서 추론되므로 onPointClick의 payload를 형 변환 없이 읽을 수 있습니다.

type SalesRow = { category: string; count: number; code: string }
 
const rows: SalesRow[] = [/* … */]
 
<ParetoChart
  series={[{ data: rows, xKey: "category", yKey: "count" }]}
  onPointClick={(d) => openDetail(d.payload.code)} // d.payload: SalesRow
/>

접근성

권장 사항

• ✅ recharts accessibilityLayer 자동 활성화
• ✅ 빈 차트 시 대체 텍스트(emptyText) 제공
• ✅ 범례 항목은 aria-pressed 버튼이라 키보드로 토글할 수 있다

관련 컴포넌트

• BarChart: 세로·가로·누적 막대 차트
• LineChart: 라인 차트