2.5d-ui
GitHub
Web Component

<iso-stack>

기둥 하나 안에 여러 계열을 아래에서 위로 쌓습니다. 기둥 꼭대기에는 합계가, 바닥에는 항목 이름이 붙습니다.

예시

계열: CPU(파랑) · 메모리(주황) · 디스크(초록). 계열 색은 조각 순서대로 범주 팔레트를 씁니다. 같은 계열은 기둥마다 같은 자리에 두세요.

계열 색 지정

계열: 제출(초록) · 지각(주황). 조각마다 c로 색을 정합니다.

속성

속성형식의미
dataJSON기둥 배열. 잘못된 JSON이면 그리지 않고 console.error 후 오류 문구를 보인다
max숫자기둥 합계의 축척 최댓값. 없으면 가장 큰 합계. 합계가 넘으면 기둥이 꽉 찬 높이에서 잘리고, 그 위 조각은 그리지 않는다(숨김 표에는 남는다)
unit숫자(px)--iso-u 값. 기본 24
height-units숫자최댓값이 차지하는 블록 높이. 기본 5
label문자열접근성 캡션(aria-label과 숨김 표 caption)
renderercss | svg | auto그리는 방식. 기본 auto(그 밖의 값도 같음): 블록 200개 이하면 CSS 면, 넘으면 SVG. css·svg는 블록 수와 무관하게 고정. 렌더링 방식

data 항목

키형식의미
k문자열 · 필수기둥 이름(바닥 라벨)
parts배열 · 필수아래에서 위로 쌓을 조각
parts[].name문자열 · 선택계열 이름. 없으면 "계열 n"
parts[].v0 이상 숫자 · 필수조각 값
parts[].cCSS 색 · 선택조각 색. 없거나 문자열이 아니면 조각 순서의 범주 팔레트. 색 규칙을 따르며, 그려지는 조각에 거부되는 색이 있으면 오류 상태. max에 잘려 그리지 않는 조각의 색은 검사하지 않는다

이벤트

조각을 누르거나 Enter·Space를 누르면 iso-select가 버블링됩니다. detail은 { index, item, part } — index는 기둥, part는 그 기둥 안 조각의 순번입니다.

document.querySelector("iso-stack").addEventListener("iso-select", (e) => {
  const { index, item, part } = e.detail;
  console.log(item.k, item.parts[part].name, item.parts[part].v);
});

접근성