Analytics
KPIPanel
Dark Mode대시보드 상단에 KPI 요약(컬러 카드 + 지표 카드)과 차트를 좌우 배치하는 compound 위젯입니다. KPIPanel.Side + KPIPanel.Main으로 구성합니다.
import { KPIPanel } from "@/shared/ui/widget"Primary variant
주황 HeroCard + MetricCard 2개 | 차트 좌우 배치
포트폴리오 현황
회수완료12 개
정상기업8
주의기업3
1.24x
포트폴리오 MOIC
85%85/100
보고 완료율
차트 영역 (InformationCard + 도넛 차트 등)
Grey variant
회색 HeroCard + MetricCard | 커스텀 sideWidth
펀드 운용 현황
운용중 펀드32개
1,234억
총 AUM
12.5%
평균 수익률
차트 영역
Props
KPIPanel
| Prop | Type | Required | Default | 설명 |
|---|---|---|---|---|
children | ReactNode | ✓ | — | KPIPanel.Side + KPIPanel.Main을 배치합니다. |
sideWidth | number | — | 309 | 좌측 Side 고정 너비 (px, lg+ 적용). |
className | string | — | — | 루트 className. |
KPIPanel.Side
| Prop | Type | Required | Default | 설명 |
|---|---|---|---|---|
children | ReactNode | ✓ | — | HeroCard + MetricCard 등 좌측 콘텐츠. |
KPIPanel.Main
| Prop | Type | Required | Default | 설명 |
|---|---|---|---|---|
children | ReactNode | ✓ | — | 차트 등 우측 콘텐츠. |