RangeBar
시작–끝 기간을 막대로(프로젝트 기간·읽은 기간).
- 라이브러리 전용
개요
미리보기
- Pricing page copyJun 10 (Inferred) – Jul 20
- Q3 고객 인터뷰Jul 2 – Aug 14
- Onboarding redesignAug 3 – Ongoing
- Vendor contractSep 1 – Unknown
예시
상태
기간
- Pricing page copyJun 10 (Inferred) – Jul 20
- Q3 고객 인터뷰Jul 2 – Aug 14
- Onboarding redesignAug 3 – Ongoing
- Vendor contractSep 1 – Unknown
일부 미수집
- Q3 고객 인터뷰Jul 2 – Aug 14
- Onboarding redesignAug 3 – Ongoing
아직 읽지 않음
Connect a source to see this.
불러오는 중
쓰임 예
오늘 점
- Pricing page copyJun 10 (Inferred) – Jul 20
- Q3 고객 인터뷰Jul 2 – Aug 14
- Onboarding redesignAug 3 – Ongoing
- Vendor contractSep 1 – Unknown
이렇게 · 이렇게 하지 않기
- 이렇게 질문: “이 일은 언제부터 언제까지였나?”
- 이렇게 시작과 끝 날짜를 항상 글자로 함께 쓴다. 날짜를 모르는 쪽은 열린 끝으로 그리고 “알 수 없음”이라고 쓴다.
- 이렇게 “첫 기록 날짜”는 시작일이 아니다. 추정이면 점선 캡 + “추정”.
- 이렇게 하지 않기 길이가 성과로 읽히게 하지 않는다. 기간 합계(“총 214일”)와 길이순 정렬을 쓰지 않는다.
- 이렇게 하지 않기 담당자·완료율을 막대에 넣지 않는다(Gantt의 진척 채움 없음).
토큰과 속성
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
title | string | 프로젝트 기간 | 목록 이름. <ul>의 접근 이름이 된다. |
rows | readonly { id; label; from: string | null; to: string | null; fromInferred?; toInferred?; ongoing?; gaps? }[] | — | 행마다 시작·끝. 시작일순으로 그리고 길이순으로 정렬하지 않는다. null 끝은 열린 끝 + “알 수 없음”, 추정 끝은 점선 캡 + “추정”, ongoing은 오늘에서 끝나고 “진행 중”. |
axis? | { from: string; to: string } | — | 모든 행이 쓰는 공통 축. 행마다 축을 따로 두지 않는다(길이 비교가 거짓이 된다). |
today? | string (YYYY-MM-DD) | | 오늘 점과 ongoing 행의 끝. 정지 표식. |
state? | 'ready' | DataState | ready | not-collected·error·loading·empty는 행 대신 문장. |
접근성
키보드: 초점을 받지 않는다. 목록의 글자(이름 · 시작 – 끝)가 정보 전부다.
- <ul> + 행마다 보이는 텍스트. 막대 SVG는 aria-hidden 장식이다.
- 추정 = 점선, 알 수 없음 = 점선 외곽만(채움 없음). 신뢰 선 문법과 같고 글자 라벨이 함께 있다.