2.5d-ui
GitHub
Web Component

<iso-heatmap>

행×열 격자의 각 칸을 블록으로 세우고, 값을 블록 높이와 색 진하기로 함께 나타냅니다. 요일×시간처럼 두 축으로 나뉜 수치를 한눈에 비교할 때 씁니다.

예시

요일·시간대별 기기 접속 수 (예시 데이터). 행 이름은 오른쪽 앞 모서리, 열 이름은 왼쪽 앞 모서리를 따라 붙습니다.

큰 격자 — 자동 SVG

20행 × 25열 = 500칸(예시 데이터). 블록이 200개를 넘어 renderer를 따로 주지 않아도 SVG 경로로 그립니다. 이벤트·키보드·숨김 표는 위 예시와 같습니다. 칸 한 변이 12px이라 행·열 이름이 서로 겹치므로, 이 예시는 페이지 CSS로 화면 라벨만 숨겼습니다(.dense .iso-label { display: none }). 이름은 각 칸의 aria-label과 숨김 표에 그대로 남습니다.

속성

속성형식의미
dataJSON{ rows, cols, values }. 잘못된 JSON이나 모양이 맞지 않는 데이터면 그리지 않고 console.error 후 오류 문구를 보인다
max숫자축척 최댓값. 없으면 가장 큰 칸 값. 넘는 값은 꽉 찬 높이
unit숫자(px)--iso-u 값(칸 한 변). 기본 24
height-units숫자최댓값이 차지하는 블록 높이. 기본 5. 칸이 많으면 3 안팎이 읽기 좋다
label문자열접근성 캡션(aria-label과 숨김 표 caption)
renderercss | svg | auto그리는 방식. 기본 auto(그 밖의 값도 같음): 블록 200개 이하면 CSS 면, 넘으면 SVG. css·svg는 블록 수와 무관하게 고정. 렌더링 방식

data 형식

키형식의미
rows문자열 배열행 이름
cols문자열 배열열 이름
values숫자 2차원 배열values[행][열], 0 이상. 행 수는 rows, 각 행의 길이는 cols와 같아야 한다(다르면 오류 상태)

칸 색은 범주 팔레트가 아니라 --iso-color-1을 바닥색(--iso-floor)과 섞은 한 가지 색이며, 값이 낮을수록 바닥색에 가깝습니다. 행·열이 비면 빈 상태 문구를 보입니다.

이벤트

칸을 누르거나 Enter·Space를 누르면 iso-select가 버블링됩니다. detail은 { index, item: { row, col, v } }이고 index는 행 번호 × 열 수 + 열 번호입니다.

document.querySelector("iso-heatmap").addEventListener("iso-select", (e) => {
  const { row, col, v } = e.detail.item;
  console.log(`${row} ${col}: ${v}`);
});

접근성