Web Component

<iso-kpi>

지표 하나를 반투명 상자 안의 채움 높이로 보여 줍니다. data 대신 value, max, label, suffix 속성을 씁니다.

예시

예시 데이터. 상자 높이가 max, 안쪽 채움이 value입니다.

속성	형식	의미
`value`	숫자	지표 값. 없으면 빈 상태, 유한한 수가 아니거나(`Infinity` 포함) 음수면 `console.error` 후 오류 상태
`max`	숫자	상자를 가득 채우는 값. 없으면 `value`와 같아 가득 찬다 — 단 `value="0"`이면 채움 높이 0. 넘는 값은 가득으로 잘린다
`label`	문자열	상자 아래 이름 라벨이자 접근 가능한 이름의 앞부분
`suffix`	문자열	값 바로 뒤에 붙는 단위. 띄어 쓰려면 앞에 공백을 넣는다(예: `" GB"`)
`unit`	숫자(px)	`--iso-u` 값. 기본 24
`height-units`	숫자	상자 높이(블록 단위). 기본 5
`renderer`	`css` \| `svg` \| `auto`	그리는 방식. 기본 `auto`(그 밖의 값도 같음): 블록 200개 이하면 CSS 면, 넘으면 SVG. `css`·`svg`는 블록 수와 무관하게 고정. 렌더링 방식

상자를 누르거나 Enter·Space를 누르면 iso-select가 버블링됩니다. detail은 { index: 0, item: { value, max } }입니다. 지표 상세 화면으로 넘어가는 데 쓰세요.

document.querySelector("iso-kpi").addEventListener("iso-select", (e) => {
  const { value, max } = e.detail.item;
  console.log(value, "/", max);
});

포커스를 받는 것은 바깥 상자 하나이며 이름은 "label: 값suffix"입니다(예: "배터리 평균 잔량: 72%"). 안쪽 채움 블록은 장식이라 접근성 트리와 Tab 순서에서 빠집니다.
label을 꼭 지정하세요. 없으면 값만 읽힙니다.
채움 높이만으로는 정확한 값을 읽기 어려우므로 값 라벨이 상자 위에 늘 함께 보입니다.