Performance Browser Chart

/performance-browser-chart 데모에서 사용하는 PerformanceBrowserChart는 브라우저 성능 데이터를 시간 축에 그리는 접근성 지원 차트입니다. 컴포넌트는 표시와 포인터/키보드 상호작용을 담당하고, 구간 재조회와 데이터 갱신은 호스트가 처리합니다.

인터랙티브 데모

범례로 계열을 숨기거나 차트 위를 드래그해 구간을 선택하세요. 빈 결과와 두 가지 Y축 모드를 전환할 수 있습니다.

Props

Prop	타입	기본값	설명
ariaLabel	string	필수	차트 접근성 이름
keyboardLabels	{ explore, startRange, finishRange }	필수	키보드 안내 문구
series	PerformanceBrowserSeries[]	필수	시계열 데이터
xDomain	[number, number]	필수	표시 좌표의 X 범위
yScale	shared/independent	필수	Y축 스케일 구성
width	number	미지정	선택적 차트 폭
height	number	320	차트 높이
padding	객체	{ top: 28, right: 16, bottom: 36, left: 64 }	안쪽 여백
xFormatter, timestampFormatter, valueFormatter	함수	미지정	축·시각·값 표시 형식
xTickValues	number[]	자동	X축 눈금 좌표
showLegend	boolean	true	범례 표시
state, emptyState, invalidState	상태/메시지	—	로딩·빈 데이터·잘못된 데이터 상태
hiddenSeriesIds	string[]	미지정	숨길 시리즈 ID (v-model, 생략하면 내부 상태)
highlightedSeriesId	string | null	미지정	강조 시리즈 ID (v-model, 생략하면 내부 상태)

각 시리즈는 id, label, color, unit, { x, timestamp, value }[] 데이터를 가집니다. value: null은 결측 구간이고 실제 0은 값으로 유지됩니다. 독립 스케일에서는 시리즈별 yDomain을 선택적으로 줄 수 있습니다. yScale은 { mode: 'shared', unit, domain? } 또는 { mode: 'independent', label }입니다.

스케일 동작

• shared는 같은 단위의 시리즈를 하나의 척도에 그립니다. 단위가 다르면 잘못된 비교를 표시하지 않고 invalid 상태를 냅니다.
• independent는 각 시리즈의 원본 범위를 세로 공간의 0–100%에 맞춥니다. 이는 원본 값을 백분율로 변환하는 기능이 아니며, 범례와 툴팁에는 원 단위가 유지됩니다.
• 계열 숨김은 controlled v-model 또는 컴포넌트 내부 상태로 동작합니다. 숨긴 계열에 따라 다른 계열의 범위는 바뀌지 않습니다.

이벤트

emit('range-select', range)
emit('hover-change', hover | null)
emit('update:hiddenSeriesIds', ids)
emit('update:highlightedSeriesId', id | null)
emit('retry')

range-select는 정렬되고 현재 domain 안으로 제한한 표시 좌표를 전달합니다. 차트는 범위 선택만 emit하며 API 재조회·줌·시간 반올림은 하지 않습니다. 호스트가 선택한 x를 실제 timestamp와 조회 규칙에 맞게 변환해야 합니다.

keyboardLabels로 탐색과 범위 선택 문구를 전달합니다. Tab으로 컨트롤에 이동하고 좌우 화살표·Home·End로 실제 샘플을 탐색할 수 있으며, Enter로 구간 시작과 끝을 선택합니다. 빈 데이터·잘못된 데이터 문구와 재시도는 호스트가 제공합니다.

데모 시나리오는 entry, compare, mixed, large, empty입니다. 데모 값은 예시 데이터이며 실제 브라우저 성능 측정 결과가 아닙니다.