Skip to content
Docs
Back to Components

BreakdownCard

@hua-labs/ui/data
v1.0.0

A card component that displays PG routing or payment method breakdown with progress bars and status indicators.

설치

bash
npm install @hua-labs/hua
Import
tsx
import { BreakdownCard } from "@hua-labs/ui/data";

@hua-labs/ui의 UI 컴포넌트를 @hua-labs/hua에서 통합 제공합니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

Pro 컴포넌트입니다. Pro 라이선스가 필요합니다.

라이브 데모

PG 라우팅

PG Routing Breakdown

Processing by payment gateway

총 거래: 100,000
Toss Payments정상
Primary PG
45,000
45%
Nice Pay정상
Backup PG
30,000
30%
KG Inicis감시
Latency detected
15,000
15%
Kakao Pay정상
10,000
10%

결제 수단

By Payment Method

Transactions by payment method

총 거래: ₩100,000,000
Credit Card
65,000
65%
Bank Transfer
20,000
20%
Virtual Account
10,000
10%
Mobile Pay
5,000
5%

하이라이트 포함

PG / 결제수단 비중

라우팅별 처리 비율과 상태

총 거래: 100,000
Toss Payments정상
Primary PG
45,000
45%
Nice Pay정상
Backup PG
30,000
30%
KG Inicis감시
Latency detected
15,000
15%
Kakao Pay정상
10,000
10%

상태 유형

Status Examples

라우팅별 처리 비율과 상태

총 거래: 100
Normal정상
50
50%
Warning감시
30
30%
Critical장애
20
20%

빈 상태

PG / 결제수단 비중

라우팅별 처리 비율과 상태

라우팅 데이터가 없습니다

PG 라우팅 혹은 결제수단 정보가 수집되면 자동으로 표시됩니다.

Props

이름타입기본값설명
segments*RoutingBreakdownSegment[]-Array of routing segments
titlestring"PG / Payment Method"Card title
descriptionstring"Routing ratio and status"Card description
totalLabelstring"Total"Label for total value
totalValueReact.ReactNode-Custom total value display
highlightIdstring-ID of segment to highlight
actionsReact.ReactNode-Action buttons
emptyStateReact.ReactNode-Custom empty state component
formatter(segment, percentage) => React.ReactNode-Custom value formatter

RoutingBreakdownSegment

Props

이름타입기본값설명
id*string-Unique segment identifier
label*string-Segment label
value*number-Segment value
colorstring-Custom color (hex)
status"normal" | "warning" | "critical"-Health status
iconstring-Icon name
detailstring-Detail information

코드 예시

기본 사용법

BasicRoutingBreakdown.tsxtsx
import { BreakdownCard } from "@hua-labs/ui/data";

export function BasicRoutingBreakdown() {
  const segments = [
    { id: "pg1", label: "PG A", value: 5000, status: "normal" as const },
    { id: "pg2", label: "PG B", value: 3000, status: "warning" as const },
    { id: "pg3", label: "PG C", value: 2000, status: "normal" as const }
  ];

  return (
    <BreakdownCard
      title="PG Routing Breakdown"
      segments={segments}
      totalValue="10,000"
    />
  );
}