차트 틀
차트 위 읽기 값·설정·전체화면을 감싸는 공통 틀이에요.
모바일PCChartSetting · ChartFrame
안에 그릴 차트 인스턴스와 읽기 값 ref를 부모가 쥐고 있어야 해요. 단지 상세 가격 차트에서 실제로 볼 수 있어요.
고르기#
이 부품을 언제 쓰고, 언제 다른 것을 쓰는지예요.
언제 쓰나#
- 큰 차트의 틀 - 설정·기간·전체화면.
인터페이스#
타입에서 자동으로 뽑은 표예요.
ChartSetting#
| 속성 | 기본값 | 타입 | 설명 |
|---|---|---|---|
| label* | - | string | 화면 읽기 프로그램이 읽는 이름(aria-label)이에요. |
| hint | - | string | 값 아래 한 줄이에요. |
| children* | - | ReactNode | 안에 그릴 내용이에요. |
ChartFrame#
| 속성 | 기본값 | 타입 | 설명 |
|---|---|---|---|
| a11yLabel | - | string | |
| chartRef* | - | RefObject<HTMLDivElement | null> | |
| readoutRef* | - | RefObject<HTMLDivElement | null> | |
| subRef | - | RefObject<HTMLDivElement | null> | 차트 **아래** 값 줄 - 나머지 지표 + 설명. 안 넘기면 안 그린다(비교 뷰 등은 한 줄만 쓴다). |
| height* | - | number | |
| settings | - | ReactNode | |
| settingsCount | 0 | number | |
| extra | - | ReactNode | |
| caption | - | ReactNode | |
| state | - | 'ready' | 'loading' | 'empty' | |
| onScrub | - | (active: boolean) => void | 모바일 롱프레스 값 읽기 - true면 부모가 차트 팬을 잠근다(드래그가 이동으로 새지 않게). |
| onFsChange | - | (fs: boolean) => void | 전체화면 전환 - 차트 인스턴스 높이를 부모가 다시 잡아야 한다(리마운트 없이 applyOptions로). |
| className | - | string | 배치용 클래스예요. 모양(색·크기)은 덮어쓰지 않아요. |
* 필수예요. 표는 타입에서 자동으로 뽑았어요.
접근성#
- 읽기 값 줄은 aria-live로 바뀔 때 알려요.
- 전체화면은 대화상자(role="dialog")로 열려요.
플랫폼별 차이#
| 플랫폼 | 차이 |
|---|---|
| 모바일 | 767px 이하에서 누르는 칸과 여백이 커져요(손가락 기준). |
| PC | 마우스가 있는 기기에서만 hover가 켜지고, 키보드 초점 링이 보여요. |