DcProgressBar

Dark Mode

수평 프로그레스 바 차트입니다. Recharts 없이 div 기반으로 구현되어 가볍습니다. TOP10 순위 등 단순 비교에 적합합니다.

import { DcProgressBar } from "@/shared/ui/widget/analytics/chart"

인터랙티브 데모

TOP10 순위 등 단순 비교에 적합한 가벼운 프로그레스 바 차트입니다.

응용 소프트웨어 개발 및 공급업45개

자연과학 및 공학 연구개발업38개

컴퓨터 프로그래밍 서비스업32개

기타 정보기술 및 컴퓨터 운영 관련 서비스업28개

데이터베이스 및 온라인 정보 제공업25개

전자부품 제조업22개

의약품 제조업18개

기타 식품 제조업15개

반도체 제조업12개

기계장비 제조업10개

tsx

<DcProgressBar
  data={data}
  formatter={(v) => `${v}개`}
  highlightFirst={true}
/>

highlightFirst, barHeight, color를 조합하여 다양한 스타일을 만들 수 있습니다.

1위 강조 (기본)

React85%

Vue62%

Angular48%

Svelte35%

균일 색상

React85%

Vue62%

Angular48%

Svelte35%

Prop	Type	Required	Default	설명
`data`	`ProgressBarItem[]` interface ProgressBarItem { name: string; value: number; }	✓	—	프로그레스 바 데이터 배열
`height`	`number`	—	—	차트 영역 높이 (px)
`formatter`	`(value: number) => string`	—	toLocaleString	값 포맷터 (기본: 천 단위 콤마)
`highlightFirst`	`boolean`	—	true	1위 항목을 primary 색상으로 강조
`barHeight`	`number`	—	8	바 높이 (px)
`color`	`string`	—	primary-60	바 기본 색상 (CSS color)
`highlightColor`	`string`	—	primary	1위 강조 색상 (CSS color)
`className`	`string`	—	—	추가 CSS 클래스