aidev
61 lines
2.6 KiB
TypeScript
61 lines
2.6 KiB
TypeScript
/**
|
||
* ChartHoverToolbar
|
||
* 차트 영역에 마우스 오버 시 하단 중앙에 표시되는 플로팅 툴바.
|
||
* - 마우스가 차트 영역을 벗어나면 사라진다.
|
||
* - 버튼: 줌아웃(−), 줌인(+), 전체보기(⌐┘), 왼쪽(‹), 오른쪽(›)
|
||
*/
|
||
import React from 'react';
|
||
|
||
interface ChartHoverToolbarProps {
|
||
onZoomOut: () => void;
|
||
onZoomIn: () => void;
|
||
onFit: () => void;
|
||
onScrollLeft: () => void;
|
||
onScrollRight: () => void;
|
||
/** 멀티차트 모드에서 이 슬롯을 단일 전체화면으로 확장. 없으면 기본 fitContent() 사용 */
|
||
onFullView?: () => void;
|
||
}
|
||
|
||
const ChartHoverToolbar: React.FC<ChartHoverToolbarProps> = ({
|
||
onZoomOut, onZoomIn, onFit, onScrollLeft, onScrollRight, onFullView,
|
||
}) => (
|
||
<div className="chart-hover-toolbar" onMouseDown={e => e.stopPropagation()}>
|
||
<button className="cht-btn" onClick={onZoomOut} title="축소 (−)">
|
||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
|
||
<line x1="2" y1="7" x2="12" y2="7"/>
|
||
</svg>
|
||
</button>
|
||
|
||
<button className="cht-btn" onClick={onZoomIn} title="확대 (+)">
|
||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
|
||
<line x1="7" y1="2" x2="7" y2="12"/>
|
||
<line x1="2" y1="7" x2="12" y2="7"/>
|
||
</svg>
|
||
</button>
|
||
|
||
{/* 멀티차트: 단일 전체화면 전환 / 단일차트: 전체 데이터 핏 */}
|
||
<button className="cht-btn" onClick={onFullView ?? onFit} title={onFullView ? '단일 차트로 전환' : '전체 보기'}>
|
||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
|
||
<polyline points="5,1 1,1 1,5"/>
|
||
<polyline points="9,13 13,13 13,9"/>
|
||
<line x1="1" y1="1" x2="6" y2="6"/>
|
||
<line x1="13" y1="13" x2="8" y2="8"/>
|
||
</svg>
|
||
</button>
|
||
|
||
<button className="cht-btn" onClick={onScrollLeft} title="왼쪽으로 이동 (과거)">
|
||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||
<polyline points="9,2 4,7 9,12"/>
|
||
</svg>
|
||
</button>
|
||
|
||
<button className="cht-btn" onClick={onScrollRight} title="오른쪽으로 이동 (최근)">
|
||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||
<polyline points="5,2 10,7 5,12"/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
);
|
||
|
||
export default ChartHoverToolbar;
|