StatsPanel

@hua-labs/ui

v1.1.0

추세 표시, 강조 색상, 반응형 그리드 레이아웃을 지원하는 통계 패널입니다. 대시보드와 분석 뷰에 적합합니다.

설치

bash

npm install @hua-labs/hua

Import

tsx

import { StatsPanel } from "@hua-labs/hua";

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

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

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

Pro

라이브 데모

4열 그리드

총 사용자

12,345

↑+12.5%

활성 사용자

8,901

↑+8.2%

주문 수

456

↓-3.1%

매출

$123,456

↑+15.3%

2열 그리드

이번 달

$45,678

전월 대비 증가

↑+23%

지난 달

$37,123

기준 기간

로딩 상태

StatsPanelItem Interface

interface StatsPanelItem {
  label: string;
  value: string | React.ReactNode;
  description?: string | React.ReactNode;
  trend?: "up" | "down" | "neutral";
  trendValue?: string;
  accent?: "primary" | "secondary" | "neutral" | "warning";
  icon?: React.ReactNode;
}

Props

이름	타입	기본값	설명
`title`	`string`	-	Panel title
`items*`	`StatsPanelItem[]`	-	Array of stat items
`columns`	`1 \| 2 \| 3 \| 4`	`4`	Grid column count
`loading`	`boolean`	`false`	Show loading skeleton

Code Examples

기본 사용법tsx

1import { StatsPanel } from '@hua-labs/ui/data';
2 
3<StatsPanel
4  items={[
5    { label: "Total Users", value: "1,234" },
6    { label: "Active Users", value: "567" },
7    { label: "Revenue", value: "$12,345" },
8    { label: "Orders", value: "89" },
9  ]}
10/>

추세 표시tsx

1<StatsPanel
2  title="Monthly Statistics"
3  items={[
4    {
5      label: "Total Users",
6      value: "1,234",
7      trend: "up",
8      trendValue: "+12%",
9      accent: "primary",
10    },
11    {
12      label: "Active Users",
13      value: "567",
14      trend: "down",
15      trendValue: "-5%",
16      accent: "warning",
17    },
18  ]}
19  columns={2}
20/>

아이콘과 함께tsx

1<StatsPanel
2  items={[
3    {
4      label: "Users",
5      value: "1,234",
6      icon: <Users className="h-5 w-5" />,
7      accent: "primary",
8    },
9    {
10      label: "Revenue",
11      value: "$12,345",
12      icon: <CurrencyDollar className="h-5 w-5" />,
13      accent: "secondary",
14    },
15  ]}
16/>

접근성

•:
•:

KanbanBoardPro EmotionPro