Macbook
268 lines
8.7 KiB
TypeScript
268 lines
8.7 KiB
TypeScript
import React, { useState, useCallback, useRef, useEffect } from 'react';
|
|
import {
|
|
type ChartCustomOverlaySelection,
|
|
type CustomOverlaySectionId,
|
|
cloneChartCustomOverlaySelection,
|
|
smaMaLabel,
|
|
BB_CUSTOM_LABELS,
|
|
ICHIMOKU_CUSTOM_ROWS,
|
|
isCustomSectionAllSelected,
|
|
setCustomSectionAllSelected,
|
|
} from '../utils/chartCustomOverlay';
|
|
import { SMA_MA_COUNT, smaPlotId } from '../utils/smaConfig';
|
|
import { useDraggablePanel } from '../hooks/useDraggablePanel';
|
|
|
|
interface ChartCustomOverlaySettingsModalProps {
|
|
title?: string;
|
|
selection: ChartCustomOverlaySelection;
|
|
onSave: (selection: ChartCustomOverlaySelection) => void;
|
|
onCancel: () => void;
|
|
}
|
|
|
|
const SECTION_META: Array<{
|
|
id: CustomOverlaySectionId;
|
|
ko: string;
|
|
en: string;
|
|
cols: 2 | 3;
|
|
}> = [
|
|
{ id: 'sma', ko: '이동평균선', en: 'Simple Moving Average (SMA)', cols: 3 },
|
|
{ id: 'bollinger', ko: '볼린저 밴드', en: 'Bollinger Bands', cols: 2 },
|
|
{ id: 'ichimoku', ko: '일목균형표', en: 'Ichimoku Cloud', cols: 3 },
|
|
{ id: 'candle', ko: '캔들차트', en: 'Candlestick', cols: 2 },
|
|
];
|
|
|
|
const ALL_SECTIONS = new Set<CustomOverlaySectionId>(SECTION_META.map(s => s.id));
|
|
|
|
const GridToggle: React.FC<{
|
|
label: string;
|
|
checked: boolean;
|
|
onChange: (v: boolean) => void;
|
|
}> = ({ label, checked, onChange }) => (
|
|
<div className="ccos-grid-item">
|
|
<label className="ibsm-toggle ccos-grid-toggle" onClick={e => e.stopPropagation()}>
|
|
<input
|
|
type="checkbox"
|
|
checked={checked}
|
|
onChange={e => onChange(e.target.checked)}
|
|
/>
|
|
<span className="ism-toggle-slider" />
|
|
</label>
|
|
<span className="ccos-grid-label">{label}</span>
|
|
</div>
|
|
);
|
|
|
|
const ChartCustomOverlaySettingsModal: React.FC<ChartCustomOverlaySettingsModalProps> = ({
|
|
title = 'Custom 표시 설정',
|
|
selection,
|
|
onSave,
|
|
onCancel,
|
|
}) => {
|
|
const draftRef = useRef(cloneChartCustomOverlaySelection(selection));
|
|
const [, bump] = useState(0);
|
|
const refresh = useCallback(() => bump(n => n + 1), []);
|
|
const [expanded, setExpanded] = useState<Set<CustomOverlaySectionId>>(
|
|
() => new Set(ALL_SECTIONS),
|
|
);
|
|
|
|
const {
|
|
panelRef,
|
|
dragging,
|
|
onHeaderPointerDown,
|
|
headerTouchStyle,
|
|
panelStyle,
|
|
headerCursor,
|
|
} = useDraggablePanel({ centerOnMount: true });
|
|
|
|
useEffect(() => {
|
|
draftRef.current = cloneChartCustomOverlaySelection(selection);
|
|
setExpanded(new Set(ALL_SECTIONS));
|
|
refresh();
|
|
}, [selection, refresh]);
|
|
|
|
const draft = draftRef.current;
|
|
|
|
const patch = useCallback((patchFn: (d: ChartCustomOverlaySelection) => void) => {
|
|
patchFn(draftRef.current);
|
|
refresh();
|
|
}, [refresh]);
|
|
|
|
const toggleSectionExpand = useCallback((id: CustomOverlaySectionId) => {
|
|
setExpanded(prev => {
|
|
const next = new Set(prev);
|
|
if (next.has(id)) next.delete(id);
|
|
else next.add(id);
|
|
return next;
|
|
});
|
|
}, []);
|
|
|
|
const toggleSectionAll = useCallback((id: CustomOverlaySectionId) => {
|
|
patch(d => {
|
|
const allOn = isCustomSectionAllSelected(d, id);
|
|
setCustomSectionAllSelected(d, id, !allOn);
|
|
});
|
|
}, [patch]);
|
|
|
|
const renderSectionItems = (sectionId: CustomOverlaySectionId) => {
|
|
switch (sectionId) {
|
|
case 'sma':
|
|
return Array.from({ length: SMA_MA_COUNT }, (_, i) => {
|
|
const pid = smaPlotId(i);
|
|
return (
|
|
<GridToggle
|
|
key={pid}
|
|
label={smaMaLabel(i)}
|
|
checked={draft.smaPlots[pid] !== false}
|
|
onChange={v => patch(d => { d.smaPlots[pid] = v; })}
|
|
/>
|
|
);
|
|
});
|
|
case 'bollinger':
|
|
return (
|
|
<>
|
|
<GridToggle
|
|
label={BB_CUSTOM_LABELS.plot0}
|
|
checked={draft.bollinger.basis}
|
|
onChange={v => patch(d => { d.bollinger.basis = v; })}
|
|
/>
|
|
<GridToggle
|
|
label={BB_CUSTOM_LABELS.plot1}
|
|
checked={draft.bollinger.upper}
|
|
onChange={v => patch(d => { d.bollinger.upper = v; })}
|
|
/>
|
|
<GridToggle
|
|
label={BB_CUSTOM_LABELS.plot2}
|
|
checked={draft.bollinger.lower}
|
|
onChange={v => patch(d => { d.bollinger.lower = v; })}
|
|
/>
|
|
<GridToggle
|
|
label="백그라운드 그리기"
|
|
checked={draft.bollinger.background}
|
|
onChange={v => patch(d => { d.bollinger.background = v; })}
|
|
/>
|
|
</>
|
|
);
|
|
case 'ichimoku':
|
|
return ICHIMOKU_CUSTOM_ROWS.map(row => (
|
|
<GridToggle
|
|
key={row.key}
|
|
label={row.label}
|
|
checked={draft.ichimoku[row.key]}
|
|
onChange={v => patch(d => { d.ichimoku[row.key] = v; })}
|
|
/>
|
|
));
|
|
case 'candle':
|
|
return (
|
|
<GridToggle
|
|
label="캔들차트"
|
|
checked={draft.candle}
|
|
onChange={v => patch(d => { d.candle = v; })}
|
|
/>
|
|
);
|
|
default:
|
|
return null;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className="ibsm-overlay"
|
|
onMouseDown={e => { if (e.target === e.currentTarget) onCancel(); }}
|
|
>
|
|
<div
|
|
ref={panelRef}
|
|
className="ibsm-dialog ibsm-dialog-wide ccos-dialog"
|
|
onMouseDown={e => e.stopPropagation()}
|
|
style={{
|
|
...panelStyle,
|
|
zIndex: 5002,
|
|
cursor: dragging ? 'grabbing' : undefined,
|
|
}}
|
|
>
|
|
<div
|
|
className="gc-popup-header ibsm-header"
|
|
onPointerDown={onHeaderPointerDown}
|
|
style={{ cursor: headerCursor, ...headerTouchStyle }}
|
|
>
|
|
<span className="gc-popup-title ibsm-header-title">{title}</span>
|
|
<div className="ibsm-header-actions">
|
|
<button type="button" className="gc-popup-close ibsm-icon-btn" onClick={onCancel} title="닫기">
|
|
✕
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<p className="ibsm-hint ccos-hint">
|
|
Custom <strong>적용</strong> 시 아래에서 켠 항목만 차트에 표시됩니다. 각 지표 설정의 on/off와는 별개이며,
|
|
지표 우측 스위치는 해당 지표의 모든 항목을 한 번에 선택·해제합니다.
|
|
</p>
|
|
|
|
<div className="ibsm-body ccos-body">
|
|
{SECTION_META.map(meta => {
|
|
const isExpanded = expanded.has(meta.id);
|
|
const allOn = isCustomSectionAllSelected(draft, meta.id);
|
|
return (
|
|
<div
|
|
key={meta.id}
|
|
className={`ibsm-card ibsm-main-row${allOn ? ' ibsm-main-row--active' : ''}${isExpanded ? ' ibsm-card-expanded' : ''}`}
|
|
>
|
|
<div className="ibsm-card-main ibsm-main-row-head">
|
|
<div className="ibsm-main-row-info">
|
|
<span className="ibsm-main-row-ko">{meta.ko}</span>
|
|
<span className="ibsm-main-row-en">{meta.en}</span>
|
|
</div>
|
|
<div className="ibsm-main-row-badges">
|
|
<span className={allOn ? 'ibsm-main-badge ibsm-main-badge--on' : 'ibsm-main-badge'}>
|
|
{allOn ? '전체 선택' : '일부 선택'}
|
|
</span>
|
|
</div>
|
|
<label
|
|
className="ibsm-toggle"
|
|
title={allOn ? '전체 해제' : '전체 선택'}
|
|
onClick={e => e.stopPropagation()}
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
checked={allOn}
|
|
onChange={() => toggleSectionAll(meta.id)}
|
|
/>
|
|
<span className="ism-toggle-slider" />
|
|
</label>
|
|
<button
|
|
type="button"
|
|
className="ibsm-expand"
|
|
onClick={() => toggleSectionExpand(meta.id)}
|
|
aria-expanded={isExpanded}
|
|
title={isExpanded ? '접기' : '펼치기'}
|
|
>
|
|
{isExpanded ? '▲' : '▼'}
|
|
</button>
|
|
</div>
|
|
{isExpanded && (
|
|
<div className={`ibsm-card-expand ccos-item-grid ccos-item-grid--${meta.cols}`}>
|
|
{renderSectionItems(meta.id)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
<div className="ibsm-footer">
|
|
<button type="button" className="ism-btn-cancel" onClick={onCancel}>
|
|
취소
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="ism-btn-ok"
|
|
onClick={() => onSave(cloneChartCustomOverlaySelection(draftRef.current))}
|
|
>
|
|
적용
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ChartCustomOverlaySettingsModal;
|