2.5d-ui
GitHub
Web Component

<iso-bars>

항목마다 막대 하나를 한 줄로 세웁니다. 막대는 왼쪽 아래 방향으로 늘어서므로 이름 라벨이 다음 막대에 가려지지 않습니다.

예시

축척 고정과 크기

max="500"이면 500이 꽉 찬 높이(height-units)가 되어, 데이터가 바뀌어도 여러 그래프의 축척이 같습니다. max를 넘는 값은 꽉 찬 높이로 잘립니다.

값 바꾸기

같은 항목의 값만 바뀌면 블록을 새로 만들지 않고 --iso-h만 바꿔 높이가 부드럽게 변합니다(동작 줄이기 설정에서는 바로 바뀝니다). 이 움직임은 CSS 경로에서만 있고, SVG 경로(블록 200개 초과 또는 renderer="svg")에서는 바로 바뀝니다. 알려진 한계도 보세요.

const el = document.querySelector("iso-bars");
el.setAttribute("data", JSON.stringify([{ k: "1반", v: 88 }, { k: "2반", v: 91 }]));

속성

속성형식의미
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문자열 · 필수항목 이름(바닥 라벨)
v0 이상 숫자 · 필수값. 음수면 그래프 전체를 그리지 않는다
cCSS 색 · 선택이 막대의 색. 없거나 문자열이 아니면 범주 팔레트 순서. 빈 문자열 ""이면 자리와 무관하게 기본색 --iso-color-1. 아래 색 규칙을 따른다

색 규칙 (c)

막대와 적층 조각의 c는 블록의 --iso-c로 들어갑니다. 브라우저가 CSS 색으로 받아들이는 값(CSS.supports("color", c))이면 됩니다.

구분예
받음#e0a800, rgb(46 158 106), tomato, oklch(70% 0.15 250), color-mix(in oklch, red, blue), var(--iso-color-3)(변수가 든 값은 그대로 통과)
거부색이 아닌 값(12px, "red"), 선언을 끝내거나 빠져나갈 수 있는 글자·토큰이 든 값 — ; { } ! \, 따옴표, 주석 /*, url(, image-set(, 짝이 맞지 않는 괄호

거부되는 색이 하나라도 있으면 그래프 전체를 그리지 않고 console.error 후 오류 문구("데이터를 표시할 수 없습니다")를 보입니다. 잘못된 값이 조용히 기본색으로 바뀌지 않게 하려는 것입니다.

예외 두 가지: 빈 문자열 ""은 검사하지 않고 기본색 --iso-color-1을 씁니다. iso-stack에서 max에 잘려 그리지 않는 조각은 색도 검사하지 않습니다(그 조각의 잘못된 색은 오류를 내지 않습니다).

이벤트

블록을 누르거나 포커스 후 Enter·Space를 누르면 iso-select가 버블링됩니다. detail은 { index, item }입니다.

document.querySelector("iso-bars").addEventListener("iso-select", (e) => {
  const { index, item } = e.detail;
  console.log(index, item.k, item.v);
});

빈 상태와 오류

데이터가 비면 "표시할 데이터가 없습니다", JSON이 잘못됐거나 값이 음수면 "데이터를 표시할 수 없습니다"를 보입니다. 오류 상태는 플레이그라운드에서 JSON을 망가뜨려 확인할 수 있습니다.

접근성