MetricCard

@hua-labs/ui/data

v1.0.0

A card component for displaying metrics with optional mini bar chart. Similar to StatCard but with additional chart visualization capabilities.

설치

bash

npm install @hua-labs/hua

Import

tsx

import { MetricCard } from "@hua-labs/ui/data";

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

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

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

라이브 데모

기본 사용법

페이지 뷰

10,234

오늘

차트 포함

방문자

5,678

100개

100

월

200개

200

화

150개

150

수

300개

300

목

250개

250

금

180개

180

토

220개

220

일

주문 수

1,234

50개

월

80개

화

120개

120

수

90개

목

150개

150

금

110개

110

토

140개

140

일

추세 표시기 포함

전환율

4.5%

↑ 12.5%전주 대비

이탈률

32.1%

↓ 5.2%전주 대비

변형

default

기본

1,234

elevated

입체

1,234

gradient

그라디언트

1,234

outline

아웃라인

1,234

색상

blue

1,234

purple

1,234

green

1,234

orange

1,234

red

1,234

indigo

1,234

pink

1,234

gray

1,234

로딩 상태

로딩

Props

이름	타입	기본값	설명
`title*`	`string`	-	배지로 표시되는 카드 제목
`value*`	`string \| number`	-	주요 지표 값
`description`	`string`	-	추가 설명 텍스트
`icon`	`IconName \| React.ReactNode`	-	표시할 아이콘
`trend`	`{ value: number; label: string; positive?: boolean }`	-	퍼센트 포함 트렌드 지표
`chartData`	`number[]`	-	미니 바 차트에 사용할 숫자 배열
`chartLabels`	`string[]`	-	차트의 각 바에 대한 레이블
`showChart`	`boolean`	`false`	미니 바 차트 표시 여부
`variant`	`"default" \| "gradient" \| "outline" \| "elevated"`	`"elevated"`	시각적 스타일 변형
`color`	`"blue" \| "purple" \| "green" \| "orange" \| "red" \| "indigo" \| "pink" \| "gray"`	`"blue"`	색상 테마
`loading`	`boolean`	`false`	로딩 스켈레톤 표시

코드 예시

기본 사용법

BasicMetricCard.tsxtsx

import { MetricCard } from "@hua-labs/ui/data";

export function BasicMetricCard() {
  return (
    <MetricCard
      title="Page Views"
      value="10,234"
      description="Today"
      icon="eye"
    />
  );
}

차트 포함

MetricCardWithChart.tsxtsx

import { MetricCard } from "@hua-labs/ui/data";

export function MetricCardWithChart() {
  return (
    <MetricCard
      title="Visitors"
      value="5,678"
      chartData={[100, 200, 150, 300, 250, 180, 220]}
      chartLabels={["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]}
      showChart
      color="blue"
      variant="elevated"
    />
  );
}

추세 포함

MetricCardWithTrend.tsxtsx

import { MetricCard } from "@hua-labs/ui/data";

export function MetricCardWithTrend() {
  return (
    <MetricCard
      title="Conversion Rate"
      value="4.5%"
      icon="chartLine"
      trend={{
        value: 12.5,
        label: "vs last week",
        positive: true
      }}
      color="green"
      variant="gradient"
    />
  );
}

StatCard ProgressCard