Arc Chart

Chart.js 기반의 아크(arc) 형태 게이지 컴포넌트입니다.

• 진행률(0~1) 표시
• 임계값 기준 warning / normal / success 색상 자동 전환
• 시작색 / 끝색 / 바(bar) 색상 커스터마이징
• 중앙 라벨 / 퍼센트 표시 on/off
• 애니메이션 on/off 및 설정
• 런타임 업데이트 API 제공

설치

npm install arc-chart chart.js

chart.js는 peer dependency입니다.

npm 없이 사용하기 (dist 직접 로드)

npm install이 어려운 환경에서는 dist 파일을 직접 포함해서 사용할 수 있습니다.

<link rel="stylesheet" href="./dist/arc-chart.css" />

<div class="chart-view">
	<canvas id="chart"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="./dist/arc-chart.js"></script>
<script>
	const chart = new ArcChart("#chart");
</script>

사용 방법

<canvas id="chart"></canvas>

import ArcChart from "arc-chart";
import "arc-chart/dist/arc-chart.css";

const chart = new ArcChart("#chart", {
	value: 0.25,
	label: "완료율",
	showLabel: true,
	showPercentage: true,
	animation: true,
	gapDegree: 220,
	cutout: "75%",
	thresholds: {
		warning: 0.3,
		success: 0.8,
	},
	trackColor: "#E3E7F8",
	colors: {
		warning: { start: "#FF8E53", end: "#FF5F1F", bar: "#FF4500" },
		normal: { start: "#556DFF", end: "#2F4CFF", bar: "#1233FF" },
		success: { start: "#42E695", end: "#3BB2B8", bar: "#2E8B57" },
	},
});

옵션

옵션	타입	기본값	설명
value	number	0	진행률 값 (0~1)
label	string	""	중앙 라벨 텍스트
showLabel	boolean	true	중앙 라벨 표시 여부
showPercentage	boolean	true	중앙 퍼센트 표시 여부
gapDegree	number	220	비어 있는 각도(0~300 권장)
cutout	string	"75%"	도넛 두께 비율
thresholds.warning	number	0.3	warning 기준(미만)
thresholds.success	number	0.8	success 기준(이상)
trackColor	string	"#E3E7F8"	배경 트랙 색상
colors.warning.start/end/bar	string	"#FF8E53 / #FF5F1F / #FF4500"	warning 상태 색상
colors.normal.start/end/bar	string	"#556DFF / #2F4CFF / #1233FF"	normal 상태 색상
colors.success.start/end/bar	string	"#42E695 / #3BB2B8 / #2E8B57"	success 상태 색상
animation	boolean | object	true	false면 비활성화, 객체면 Chart.js animation 옵션 일부 반영

상태 판정 규칙

• value < thresholds.warning -> warning
• value >= thresholds.success -> success
• 그 외 -> normal

런타임 API

updateValue(newValue)

값만 빠르게 업데이트합니다.

chart.updateValue(0.67);

updateOptions(newOptions)

옵션을 부분 업데이트합니다.

chart.updateOptions({
	label: "진행도",
	showLabel: true,
	showPercentage: false,
	animation: false,
	gapDegree: 180,
	cutout: "70%",
	trackColor: "#222",
	thresholds: { warning: 0.2, success: 0.9 },
	colors: {
		normal: { start: "#4A6CFA", end: "#1C40F2", bar: "#0E2BD9" },
	},
});

colors, thresholds는 부분 병합(merge)됩니다.

개발

npm install
npm run dev

• npm run dev: Rollup watch 빌드
• npm run build: 배포용 dist 생성

데모

docs/index.html에 인터랙티브 데모가 포함되어 있습니다.