aidev/goldenChart
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

복합지표 추가

Browse Source
This commit is contained in:
Macbook
2026-06-11 22:53:19 +09:00
parent 280c187021
commit 05c15ec92b
17 changed files with 817 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/StrategyEditorPage.tsx
+84 -3
View File
@@ -49,6 +49,15 @@ import {
loadPaletteItems,
type PaletteItem,
} from '../utils/strategyPaletteStorage';
import {
buildStochOverboughtPairTree,
findStochPairRootInForest,
isStochOverboughtPairPaletteValue,
isStochOverboughtPairRoot,
patchStochPairInTree,
setStochPairSecondary,
} from '../utils/stochOverboughtPair';
import StochPairNodeSettings from './strategyEditor/StochPairNodeSettings';
import {
emptySignalFlowLayout,
buildStrategyFlowLayoutStore,
@@ -302,6 +311,15 @@ export default function StrategyEditorPage({ theme, onNavigateToBacktest }: Prop
);
}, [selectedNodeId, currentRoot, currentOrphans, currentLayout.extraRoots]);
const stochPairForest = useMemo(
() => [
currentRoot,
...currentOrphans,
...Object.values(currentLayout.extraRoots ?? {}),
],
[currentRoot, currentOrphans, currentLayout.extraRoots],
);
const orphanTotal = buyOrphans.length + sellOrphans.length;
const layoutStrategyKey = selectedId != null ? String(selectedId) : 'draft';
@@ -447,6 +465,49 @@ export default function StrategyEditorPage({ theme, onNavigateToBacktest }: Prop
scheduleStrategyPersist();
}, [setCurrentLayout, scheduleStrategyPersist]);
const applyStochPairSecondary = useCallback((orNodeId: string, secondary: string) => {
if (currentOrphans.some(o => o.id === orNodeId)) {
handleOrphansChange(currentOrphans.map(o => (
o.id === orNodeId ? setStochPairSecondary(o, secondary, DEF) : o
)));
return;
}
if (currentRoot) {
const patched = patchStochPairInTree(currentRoot, orNodeId, secondary, DEF);
if (patched && patched !== currentRoot) {
handleRootChange(patched);
return;
}
}
for (const [startId, branch] of Object.entries(currentLayout.extraRoots ?? {})) {
if (!branch) continue;
const patched = patchStochPairInTree(branch, orNodeId, secondary, DEF);
if (patched && patched !== branch) {
handleExtraRootsChange({
...(currentLayout.extraRoots ?? {}),
[startId]: patched,
});
return;
}
}
}, [
currentRoot, currentOrphans, currentLayout.extraRoots, DEF,
handleOrphansChange, handleRootChange, handleExtraRootsChange,
]);
const stochPairEditForSelected = useMemo(() => {
if (!selectedNodeId || selectedLogicNode?.type !== 'CONDITION' || !selectedLogicNode.condition) {
return undefined;
}
const pairRoot = findStochPairRootInForest(stochPairForest, selectedNodeId);
if (!pairRoot?.stochPair) return undefined;
return {
secondaryIndicator: pairRoot.stochPair.secondaryIndicatorType,
stochLocked: selectedLogicNode.condition.indicatorType === 'STOCHASTIC',
onSecondaryChange: (next: string) => applyStochPairSecondary(pairRoot.id, next),
};
}, [selectedNodeId, selectedLogicNode, stochPairForest, applyStochPairSecondary]);
const handleEditorStateChange = useCallback((next: EditorConditionState) => {
setCurrentRoot(next.root);
setCurrentLayout(prev => ({
@@ -953,8 +1014,11 @@ export default function StrategyEditorPage({ theme, onNavigateToBacktest }: Prop
}, [signalTab, DEF, currentRoot, setCurrentRoot, handleAddStartSection, scheduleStrategyPersist]);
const applyPaletteItem = useCallback((item: PaletteItem) => {
const composite = item.kind === 'composite';
const newNode = makeNode('indicator', item.value, signalTab, DEF, composite ? { composite: true } : undefined);
const stochPair = isStochOverboughtPairPaletteValue(item.value);
const composite = item.kind === 'composite' && !stochPair;
const newNode = stochPair
? buildStochOverboughtPairTree(item.secondaryIndicator ?? 'CCI', DEF)
: makeNode('indicator', item.value, signalTab, DEF, composite ? { composite: true } : undefined);
const root = currentRoot;
if (!root) setCurrentRoot(newNode);
else setCurrentRoot(mergeAtRoot(root, newNode, false));
@@ -1348,11 +1412,16 @@ export default function StrategyEditorPage({ theme, onNavigateToBacktest }: Prop
{selectedLogicNode?.type === 'CONDITION' && selectedLogicNode.condition && (
<div className="se-node-config-bar">
<span className="se-node-config-label">{selectedLogicNode.condition.indicatorType}</span>
<span className="se-node-config-label">
{stochPairEditForSelected && !stochPairEditForSelected.stochLocked
? 'Stoch 과열×보조'
: selectedLogicNode.condition.indicatorType}
</span>
<CondEditor
cond={selectedLogicNode.condition}
signalType={signalTab}
def={DEF}
stochPairEdit={stochPairEditForSelected}
onChange={c => {
if (!selectedNodeId) return;
const inOrphans = currentOrphans.some(o => o.id === selectedNodeId);
@@ -1382,6 +1451,18 @@ export default function StrategyEditorPage({ theme, onNavigateToBacktest }: Prop
<span className="se-sync-tip">전략 조건 전용 설정 · 차트 보조지표와 무관</span>
</div>
)}
{selectedLogicNode && isStochOverboughtPairRoot(selectedLogicNode) && selectedLogicNode.stochPair && (
<div className="se-node-config-bar se-node-config-bar--stoch-pair">
<span className="se-node-config-label">Stoch 과열×보조</span>
<StochPairNodeSettings
variant="inline"
secondaryIndicator={selectedLogicNode.stochPair.secondaryIndicatorType}
onChange={next => applyStochPairSecondary(selectedLogicNode.id, next)}
onClose={() => {}}
/>
</div>
)}
</>
) : (
<StrategyListEditor
frontend/src/components/strategyEditor/ConditionNodeSettings.tsx
+13 -1
View File
@@ -22,7 +22,7 @@ import {
setConditionValuePeriod,
usesValuePeriodField,
} from '../../utils/conditionPeriods';
import { compositeDisplayName, compositeElementLabel } from '../../utils/compositeIndicators';
import { compositeDisplayName, compositeElementLabel, COMPOSITE_INDICATOR_ITEMS, switchCompositeIndicatorType } from '../../utils/compositeIndicators';
import { STRATEGY_CANDLE_TYPE_OPTIONS } from '../../utils/strategyStartNodes';
import ComboNumberInput from './ComboNumberInput';
@@ -83,6 +83,18 @@ export default function ConditionNodeSettings({
</div>
{condition.composite ? (
<>
<label className="se-flow-settings-field">
<span>지표</span>
<select
className="se-combo-num-select sp-cond-sel"
value={condition.indicatorType}
onChange={e => onChange(switchCompositeIndicatorType(condition, e.target.value, def))}
>
{COMPOSITE_INDICATOR_ITEMS.map(o => (
<option key={o.value} value={o.value}>{o.label}</option>
))}
</select>
</label>
<label className="se-flow-settings-field">
<span>{compositeElementLabel(condition.indicatorType, 1)} 시간봉</span>
<select
frontend/src/components/strategyEditor/FlowNodes.tsx
+37 -1
View File
@@ -10,7 +10,12 @@ import StartTimeframeCheckboxes from './StartTimeframeCheckboxes';
import LogicGateOpToggle from './LogicGateOpToggle';
import { hasNodeSettings } from '../../utils/conditionPeriods';
import { getStrategyIndicatorDisplayName } from '../../utils/strategyPaletteStorage';
import {
isStochOverboughtPairRoot,
stochPairDisplayName,
} from '../../utils/stochOverboughtPair';
import ConditionNodeSettings from './ConditionNodeSettings';
import StochPairNodeSettings from './StochPairNodeSettings';
const LOGIC_COLORS: Record<string, string> = {
AND: '#00aaff',
@@ -190,11 +195,13 @@ export const LogicGateNode = memo(function LogicGateNode({ id, data, selected }:
const node = d.logicNode!;
const color = LOGIC_COLORS[node.type] ?? '#00aaff';
const isSell = d.signalTab === 'sell';
const isStochPair = isStochOverboughtPairRoot(node);
const { onDragOver, onDragLeave, onDrop } = usePaletteDropHandlers(id, d);
const [settingsOpen, setSettingsOpen] = useState(false);
return (
<div
className={`se-flow-node se-flow-node--logic${isSell ? ' se-flow-node--sell-mode' : ''}${d.isOrphan ? ' se-flow-node--orphan' : ''} ${selected ? 'se-flow-node--selected' : ''} ${d.dragOver ? 'se-flow-node--drop' : ''}`}
className={`se-flow-node se-flow-node--logic${isStochPair ? ' se-flow-node--stoch-pair' : ''}${isSell ? ' se-flow-node--sell-mode' : ''}${d.isOrphan ? ' se-flow-node--orphan' : ''} ${selected ? 'se-flow-node--selected' : ''} ${d.dragOver ? 'se-flow-node--drop' : ''}${settingsOpen ? ' se-flow-node--settings-open' : ''}`}
style={{ '--se-gate-color': color } as React.CSSProperties}
onDragOver={onDragOver}
onDragLeave={onDragLeave}
@@ -217,10 +224,39 @@ export const LogicGateNode = memo(function LogicGateNode({ id, data, selected }:
<span className="se-flow-gate-badge">[{node.type}]</span>
)}
</div>
{isStochPair && node.stochPair && (
<div className="se-flow-gate-stoch-pair">
<span className="se-flow-gate-stoch-pair-title">
{stochPairDisplayName(node.stochPair.secondaryIndicatorType)}
</span>
<button
type="button"
className="se-flow-settings"
title="복합지표 설정"
aria-label="복합지표 설정"
onClick={e => {
e.stopPropagation();
setSettingsOpen(v => !v);
}}
>
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<circle cx="12" cy="12" r="3"/>
<path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>
</svg>
</button>
</div>
)}
{(node.children ?? []).length === 0 && (
<span className="se-flow-gate-hint">조건을 드롭하세요</span>
)}
<button type="button" className="se-flow-del" title="삭제" onClick={() => d.onDelete?.(id)}>×</button>
{settingsOpen && isStochPair && node.stochPair && (
<StochPairNodeSettings
secondaryIndicator={node.stochPair.secondaryIndicatorType}
onChange={sec => d.onUpdateStochPairSecondary?.(id, sec)}
onClose={() => setSettingsOpen(false)}
/>
)}
</div>
);
});
frontend/src/components/strategyEditor/IndicatorPaletteTab.tsx
+9 -1
View File
@@ -3,7 +3,9 @@ import PaletteChip from './PaletteChip';
import PaletteItemModal from './PaletteItemModal';
import type { DefType } from '../../utils/strategyEditorShared';
import { getCompositeDefaultPeriods } from '../../utils/compositeIndicators';
import { isStochOverboughtPairPaletteValue } from '../../utils/stochOverboughtPair';
import { getDefaultIndicatorPeriod } from '../../utils/conditionPeriods';
import { getStrategyIndicatorDisplayName } from '../../utils/strategyPaletteStorage';
import { getIndicatorPeriodLabel } from '../../utils/strategyFlowLayout';
import {
createPaletteItemId,
@@ -14,6 +16,10 @@ import {
/** 팔레트 카드 기간 표시 — 항상 보조지표 설정(DEF) 기준 */
function periodLabel(item: PaletteItem, def: DefType): string {
if (item.kind === 'composite' && isStochOverboughtPairPaletteValue(item.value)) {
const sec = item.secondaryIndicator ?? 'CCI';
return `Stoch + ${getStrategyIndicatorDisplayName(sec)}`;
}
if (item.kind === 'composite') {
const d = getCompositeDefaultPeriods(item.value, def);
return `${d.short} / ${d.long}`;
@@ -164,7 +170,9 @@ export default function IndicatorPaletteTab({
label={item.label}
desc={item.desc}
color={kind === 'composite' ? 'composite' : 'ind'}
composite={kind === 'composite'}
composite={kind === 'composite' && !isStochOverboughtPairPaletteValue(item.value)}
stochPair={isStochOverboughtPairPaletteValue(item.value)}
secondaryIndicator={item.secondaryIndicator}
period={periodLabel(item, def)}
periodValue={item.period}
shortPeriod={item.shortPeriod}
frontend/src/components/strategyEditor/PaletteChip.tsx
+7 -1
View File
@@ -5,6 +5,8 @@ export interface PaletteDragPayload {
value: string;
label: string;
composite?: boolean;
stochPair?: boolean;
secondaryIndicator?: string;
period?: number;
shortPeriod?: number;
longPeriod?: number;
@@ -21,6 +23,8 @@ interface Props {
shortPeriod?: number;
longPeriod?: number;
composite?: boolean;
stochPair?: boolean;
secondaryIndicator?: string;
selected?: boolean;
onSelect?: () => void;
onAdd: () => void;
@@ -28,12 +32,14 @@ interface Props {
export default function PaletteChip({
type, value, label, desc, color, period, periodValue, shortPeriod, longPeriod,
composite = false, selected = false, onSelect, onAdd,
composite = false, stochPair = false, secondaryIndicator, selected = false, onSelect, onAdd,
}: Props) {
const onDragStart = (e: React.DragEvent) => {
const payload: PaletteDragPayload = {
type, value, label,
composite: composite || undefined,
stochPair: stochPair || undefined,
secondaryIndicator,
period: periodValue,
shortPeriod,
longPeriod,
frontend/src/components/strategyEditor/PaletteItemModal.tsx
+58 -15
View File
@@ -10,6 +10,11 @@ import {
type PaletteItem,
type PaletteItemKind,
} from '../../utils/strategyPaletteStorage';
import {
isStochOverboughtPairPaletteValue,
STOCH_PAIR_SECONDARY_OPTIONS,
stochPairPaletteDesc,
} from '../../utils/stochOverboughtPair';
interface Props {
open: boolean;
@@ -31,6 +36,9 @@ export default function PaletteItemModal({
const [period, setPeriod] = useState(14);
const [shortPeriod, setShortPeriod] = useState(9);
const [longPeriod, setLongPeriod] = useState(20);
const [secondaryIndicator, setSecondaryIndicator] = useState('CCI');
const isStochPairEdit = kind === 'composite' && !!initial && isStochOverboughtPairPaletteValue(initial.value);
useEffect(() => {
if (!open) return;
@@ -38,6 +46,10 @@ export default function PaletteItemModal({
setValue(initial.value);
setLabel(initial.label);
setDesc(initial.desc);
if (isStochOverboughtPairPaletteValue(initial.value)) {
setSecondaryIndicator(initial.secondaryIndicator ?? 'CCI');
return;
}
if (kind === 'auxiliary') {
setPeriod(getDefaultIndicatorPeriod(initial.value, def));
} else {
@@ -85,7 +97,7 @@ export default function PaletteItemModal({
window.alert('표시 이름을 입력해 주세요.');
return;
}
if (kind === 'composite' && shortPeriod >= longPeriod) {
if (kind === 'composite' && !isStochPairEdit && shortPeriod >= longPeriod) {
window.alert('단기 기간은 장기 기간보다 작아야 합니다.');
return;
}
@@ -93,9 +105,15 @@ export default function PaletteItemModal({
id: initial?.id,
value,
label: trimmedLabel,
desc: desc.trim() || trimmedLabel,
desc: isStochPairEdit
? stochPairPaletteDesc(secondaryIndicator)
: (desc.trim() || trimmedLabel),
builtIn: initial?.builtIn,
...(kind === 'auxiliary' ? { period } : { shortPeriod, longPeriod }),
...(kind === 'auxiliary'
? { period }
: isStochPairEdit
? { secondaryIndicator }
: { shortPeriod, longPeriod }),
});
onClose();
};
@@ -103,17 +121,42 @@ export default function PaletteItemModal({
return (
<DraggableModalFrame onClose={onClose} title={title}>
<div className="se-modal-body se-palette-item-modal">
<label className="se-field-lbl">지표 종류</label>
<select
className="se-field-inp"
value={value}
disabled={mode === 'edit'}
onChange={e => handleTypeChange(e.target.value)}
>
{typeOptions.map(o => (
<option key={o.value} value={o.value}>{o.label}</option>
))}
</select>
{!isStochPairEdit && (
<>
<label className="se-field-lbl">지표 종류</label>
<select
className="se-field-inp"
value={value}
disabled={mode === 'edit'}
onChange={e => handleTypeChange(e.target.value)}
>
{typeOptions.map(o => (
<option key={o.value} value={o.value}>{o.label}</option>
))}
</select>
</>
)}
{isStochPairEdit && (
<>
<label className="se-field-lbl">고정 지표</label>
<output className="se-field-inp se-field-readout">Stochastic %K (과열선)</output>
<label className="se-field-lbl">결합 보조지표</label>
<select
className="se-field-inp"
value={secondaryIndicator}
onChange={e => {
const next = e.target.value;
setSecondaryIndicator(next);
setDesc(stochPairPaletteDesc(next));
}}
>
{STOCH_PAIR_SECONDARY_OPTIONS.map(o => (
<option key={o.value} value={o.value}>{o.label}</option>
))}
</select>
</>
)}
<label className="se-field-lbl">표시 이름</label>
<input
@@ -142,7 +185,7 @@ export default function PaletteItemModal({
onChange={setPeriod}
/>
</label>
) : (
) : isStochPairEdit ? null : (
<>
<label className="se-field-lbl">
단기 기간 (일)
frontend/src/components/strategyEditor/StochPairNodeSettings.tsx
+97
View File
@@ -0,0 +1,97 @@
import React, { useEffect, useRef } from 'react';
import {
STOCH_PAIR_SECONDARY_OPTIONS,
stochPairSummaryText,
} from '../../utils/stochOverboughtPair';
import { getStrategyIndicatorDisplayName } from '../../utils/strategyPaletteStorage';
interface Props {
secondaryIndicator: string;
onChange: (secondaryIndicator: string) => void;
onClose: () => void;
popoverClassName?: string;
/** 그래프 하단 바 등 인라인 배치 */
variant?: 'popover' | 'inline';
}
export default function StochPairNodeSettings({
secondaryIndicator,
onChange,
onClose,
popoverClassName = 'se-flow-settings-pop',
variant = 'popover',
}: Props) {
const ref = useRef<HTMLDivElement>(null);
useEffect(() => {
if (variant === 'inline') return;
const onDoc = (e: MouseEvent) => {
if (ref.current && !ref.current.contains(e.target as Node)) onClose();
};
document.addEventListener('mousedown', onDoc);
return () => document.removeEventListener('mousedown', onDoc);
}, [onClose, variant]);
const body = (
<>
<label className="se-flow-settings-field se-flow-settings-field--readonly">
<span>고정 지표</span>
<output className="se-flow-settings-readout">Stochastic %K (과열선)</output>
</label>
<label className="se-flow-settings-field">
<span>결합 보조지표</span>
<select
className="se-combo-num-select sp-cond-sel"
value={secondaryIndicator}
onChange={e => onChange(e.target.value)}
>
{STOCH_PAIR_SECONDARY_OPTIONS.map(o => (
<option key={o.value} value={o.value}>{o.label}</option>
))}
</select>
</label>
<p className="se-flow-settings-hint">
{stochPairSummaryText(secondaryIndicator)}
</p>
{variant === 'popover' && (
<p className="se-flow-settings-hint se-flow-settings-hint--muted">
Stochastic은 고정이며, {getStrategyIndicatorDisplayName(secondaryIndicator)}만 변경할 수 있습니다.
</p>
)}
</>
);
if (variant === 'inline') {
return (
<div className="se-stoch-pair-inline-settings" onClick={e => e.stopPropagation()}>
{body}
</div>
);
}
return (
<div
ref={ref}
className={popoverClassName}
role="dialog"
aria-label="Stoch 과열×보조 복합 설정"
onClick={e => e.stopPropagation()}
>
<div className="se-flow-settings-head">
<span>Stoch 과열×보조</span>
<button
type="button"
className="se-flow-settings-close"
aria-label="닫기"
title="닫기"
onClick={onClose}
>
×
</button>
</div>
{body}
</div>
);
}
frontend/src/components/strategyEditor/StrategyEditorCanvas.tsx
+32 -8
View File
@@ -28,6 +28,7 @@ import {
updateNode,
type DefType,
} from '../../utils/strategyEditorShared';
import { setStochPairSecondary } from '../../utils/stochOverboughtPair';
import {
START_NODE_ID,
applyEdgeHandles,
@@ -685,36 +686,59 @@ function StrategyEditorCanvasInner({
}, [root, extraRoots, orphans, onChange, onOrphansChange, onExtraRootsChange]);
const handleChangeLogicGateType = useCallback((id: string, gateType: 'AND' | 'OR') => {
const patchGate = (n: LogicNode) => (
n.type === 'AND' || n.type === 'OR'
? { ...n, type: gateType, stochPair: gateType === 'OR' ? n.stochPair : undefined }
: n
);
if (isOrphanNode(orphans, id)) {
onOrphansChange(orphans.map(o => (
o.id === id && (o.type === 'AND' || o.type === 'OR')
? { ...o, type: gateType }
? patchGate(o)
: o
)));
return;
}
if (root && findNodeInTree(root, id)) {
onChange(updateNode(root, id, n => (
n.type === 'AND' || n.type === 'OR' ? { ...n, type: gateType } : n
)));
onChange(updateNode(root, id, patchGate));
return;
}
for (const [sid, branch] of Object.entries(extraRoots)) {
if (branch && findNodeInTree(branch, id)) {
onExtraRootsChange?.({
...extraRoots,
[sid]: updateNode(branch, id, n => (
n.type === 'AND' || n.type === 'OR' ? { ...n, type: gateType } : n
)),
[sid]: updateNode(branch, id, patchGate),
});
return;
}
}
}, [root, extraRoots, orphans, onChange, onOrphansChange, onExtraRootsChange]);
const handleUpdateStochPairSecondary = useCallback((id: string, secondaryIndicator: string) => {
const patchPair = (n: LogicNode) => setStochPairSecondary(n, secondaryIndicator, def);
if (isOrphanNode(orphans, id)) {
onOrphansChange(orphans.map(o => (o.id === id ? patchPair(o) : o)));
return;
}
if (root && findNodeInTree(root, id)) {
onChange(updateNode(root, id, patchPair));
return;
}
for (const [sid, branch] of Object.entries(extraRoots)) {
if (branch && findNodeInTree(branch, id)) {
onExtraRootsChange?.({
...extraRoots,
[sid]: updateNode(branch, id, patchPair),
});
return;
}
}
}, [root, extraRoots, orphans, def, onChange, onOrphansChange, onExtraRootsChange]);
const flowCallbacks = useMemo(() => ({
onDelete: handleDelete,
onUpdateCondition: handleUpdateCondition,
onUpdateStochPairSecondary: handleUpdateStochPairSecondary,
onChangeLogicGateType: handleChangeLogicGateType,
onDropTarget: handleDropTarget,
onDragOverTarget: handleDragOverTarget,
@@ -722,7 +746,7 @@ function StrategyEditorCanvasInner({
onStartCandleTypesChange: handleStartCandleTypesChange,
onDeleteStart: handleDeleteStart,
}), [
handleDelete, handleUpdateCondition, handleChangeLogicGateType,
handleDelete, handleUpdateCondition, handleUpdateStochPairSecondary, handleChangeLogicGateType,
handleDropTarget, handleDragOverTarget, handleDragLeaveTarget,
handleStartCandleTypesChange, handleDeleteStart,
]);
frontend/src/components/strategyEditor/StrategyListEditor.tsx
+69 -12
View File
@@ -1,4 +1,4 @@
import React, { useCallback, useState } from 'react';
import React, { useCallback, useMemo, useState } from 'react';
import type { LogicNode } from '../../utils/strategyTypes';
import {
CondEditor,
@@ -11,7 +11,15 @@ import {
} from '../../utils/strategyEditorShared';
import { hasNodeSettings } from '../../utils/conditionPeriods';
import { getStrategyIndicatorDisplayName } from '../../utils/strategyPaletteStorage';
import {
isStochOverboughtPairRoot,
findStochPairRootInForest,
patchStochPairInTree,
setStochPairSecondary,
stochPairDisplayName,
} from '../../utils/stochOverboughtPair';
import ConditionNodeSettings from './ConditionNodeSettings';
import StochPairNodeSettings from './StochPairNodeSettings';
import {
type EditorConditionState,
addExtraStartSection,
@@ -44,6 +52,8 @@ interface TreeNodeProps {
depth?: number;
def: DefType;
onAddStart?: () => void;
stochPairForest?: (LogicNode | null)[];
onStochPairSecondaryChange?: (orNodeId: string, secondary: string) => void;
}
const TreeNodeComp: React.FC<TreeNodeProps> = ({
@@ -58,19 +68,25 @@ const TreeNodeComp: React.FC<TreeNodeProps> = ({
depth = 0,
def,
onAddStart,
stochPairForest,
onStochPairSecondaryChange,
}) => {
const isLogic = ['AND', 'OR', 'NOT'].includes(node.type);
const color = isLogic ? NODE_COLORS[node.type] : IND_COLOR;
const nodeDropKey = `${dropScope}:${node.id}`;
const [settingsOpen, setSettingsOpen] = useState(false);
const isStochPair = isStochOverboughtPairRoot(node);
const showSettings = node.type === 'CONDITION' && node.condition && hasNodeSettings(node.condition);
const showStochPairSettings = isStochPair;
const label = node.type === 'CONDITION' && node.condition
? nodeToText(node, def)
: node.type === 'AND'
? 'AND (그리고)'
: node.type === 'OR'
? 'OR (또는)'
: 'NOT (반대)';
: isStochPair
? stochPairDisplayName(node.stochPair!.secondaryIndicatorType)
: node.type === 'AND'
? 'AND (그리고)'
: node.type === 'OR'
? 'OR (또는)'
: 'NOT (반대)';
const handleDragOver = (e: React.DragEvent) => {
if (!isLogic) return;
@@ -97,6 +113,18 @@ const TreeNodeComp: React.FC<TreeNodeProps> = ({
};
const handleCondChange = (c: NonNullable<LogicNode['condition']>) => onUpdate({ ...node, condition: c });
const stochPairRoot = stochPairForest && node.condition
? findStochPairRootInForest(stochPairForest, node.id)
: null;
const stochPairEdit = stochPairRoot?.stochPair && node.condition && onStochPairSecondaryChange
? {
secondaryIndicator: stochPairRoot.stochPair.secondaryIndicatorType,
stochLocked: node.condition.indicatorType === 'STOCHASTIC',
onSecondaryChange: (next: string) => onStochPairSecondaryChange(stochPairRoot.id, next),
}
: undefined;
const handleChildUpdate = (childId: string, updated: LogicNode) =>
onUpdate({ ...node, children: (node.children ?? []).map(c => (c.id === childId ? updated : c)) });
const handleChildDelete = (childId: string) =>
@@ -112,20 +140,26 @@ const TreeNodeComp: React.FC<TreeNodeProps> = ({
>
<div className="sp-node-head sp-node-head--cond" style={{ borderLeftColor: color }}>
<span className="sp-node-badge" style={{ background: color }}>
{node.type === 'CONDITION' && node.condition
? getStrategyIndicatorDisplayName(node.condition.indicatorType)
: node.type}
{isStochPair
? '복합'
: node.type === 'CONDITION' && node.condition
? getStrategyIndicatorDisplayName(node.condition.indicatorType)
: node.type}
</span>
<span className="sp-node-label">{label}</span>
<div className="sp-node-actions">
{(node.type === 'AND' || node.type === 'OR') && (
<LogicGateOpToggle
value={node.type}
onChange={op => onUpdate({ ...node, type: op })}
onChange={op => onUpdate({
...node,
type: op,
stochPair: op === 'OR' ? node.stochPair : undefined,
})}
compact
/>
)}
{showSettings && (
{(showSettings || showStochPairSettings) && (
<button
type="button"
className="sp-node-settings"
@@ -155,10 +189,24 @@ const TreeNodeComp: React.FC<TreeNodeProps> = ({
popoverClassName="sp-node-settings-pop"
/>
)}
{settingsOpen && isStochPair && node.stochPair && (
<StochPairNodeSettings
secondaryIndicator={node.stochPair.secondaryIndicatorType}
onChange={sec => onUpdate(setStochPairSecondary(node, sec, def))}
onClose={() => setSettingsOpen(false)}
popoverClassName="sp-node-settings-pop"
/>
)}
</div>
{node.type === 'CONDITION' && node.condition && (
<CondEditor cond={node.condition} signalType={signalType} onChange={handleCondChange} def={def} />
<CondEditor
cond={node.condition}
signalType={signalType}
onChange={handleCondChange}
def={def}
stochPairEdit={stochPairEdit}
/>
)}
{isLogic && (
@@ -177,6 +225,8 @@ const TreeNodeComp: React.FC<TreeNodeProps> = ({
depth={depth + 1}
def={def}
onAddStart={onAddStart}
stochPairForest={stochPairForest}
onStochPairSecondaryChange={onStochPairSecondaryChange}
/>
))}
{dragOverKey === nodeDropKey && (
@@ -255,6 +305,11 @@ function StartSectionBlock({
applyDrop(targetId, data);
};
const stochPairForest = useMemo(() => [root], [root]);
const handleStochPairSecondaryChange = useCallback((orNodeId: string, secondary: string) => {
onRootChange(patchStochPairInTree(root, orNodeId, secondary, def));
}, [root, def, onRootChange]);
return (
<section className="sp-start-section">
<header className="sp-start-head">
@@ -296,6 +351,8 @@ function StartSectionBlock({
dropScope={startId}
def={def}
onAddStart={onAddStart}
stochPairForest={stochPairForest}
onStochPairSecondaryChange={handleStochPairSecondaryChange}
/>
)}
</div>
frontend/src/styles/strategyEditor.css
+63 -7
View File
@@ -1299,6 +1299,36 @@
font-size: 0.58rem;
color: var(--se-text-dim);
}
.se-flow-settings-hint--muted {
opacity: 0.85;
}
.se-field-readout {
display: block;
padding: 8px 10px;
border-radius: 8px;
background: color-mix(in srgb, var(--se-text) 4%, transparent);
color: var(--se-text-muted);
font-size: 0.82rem;
}
.se-flow-gate-stoch-pair {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
margin-top: 6px;
padding-top: 6px;
border-top: 1px solid color-mix(in srgb, var(--se-border) 70%, transparent);
}
.se-flow-gate-stoch-pair-title {
font-size: 0.62rem;
font-weight: 700;
color: var(--se-palette-composite-accent, #a78bfa);
line-height: 1.3;
text-align: left;
}
.se-flow-node--stoch-pair {
min-height: 88px;
}
.se-flow-handle {
width: 9px !important; height: 9px !important;
@@ -1391,14 +1421,40 @@
}
.se-node-config-bar .sp-cond-editor { margin: 0; }
.sp-cond-row-composite-tf {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
margin-bottom: 8px;
.sp-cond-readout {
display: block;
width: 100%;
padding: 6px 8px;
border-radius: 6px;
border: 1px solid var(--se-input-border);
background: color-mix(in srgb, var(--se-text) 4%, transparent);
color: var(--se-text-muted);
font-size: 0.72rem;
}
.se-node-config-bar .sp-cond-sel,
.se-node-config-bar .sp-cond-num {
.se-node-config-bar--stoch-pair {
flex-wrap: wrap;
align-items: flex-start;
gap: 8px 12px;
}
.se-stoch-pair-inline-settings {
display: flex;
flex: 1;
flex-wrap: wrap;
gap: 8px 12px;
align-items: flex-end;
min-width: 0;
}
.se-stoch-pair-inline-settings .se-flow-settings-field {
min-width: 140px;
margin: 0;
}
.se-stoch-pair-inline-settings .se-flow-settings-hint {
flex: 1 1 100%;
margin: 0;
}
.sp-cond-row-composite-tf {
background: var(--se-input-bg);
border-color: var(--se-input-border);
color: var(--se-text);
frontend/src/utils/compositeIndicators.ts
+37
View File
@@ -282,6 +282,43 @@ export function makeCompositeCondition(
});
}
/** 기간 교차 복합지표 — 지표 종류 변경 (조건·시간봉 유지, 기간은 새 지표 기본값) */
export function switchCompositeIndicatorType(
cond: ConditionDSL,
newIndicatorType: string,
def: CompositePeriodDef,
): ConditionDSL {
if (!cond.composite || newIndicatorType === cond.indicatorType) {
return normalizeCompositeCondition(cond);
}
const { short, long } = getCompositeDefaultPeriods(newIndicatorType, def);
const base = {
conditionType: cond.conditionType,
leftCandleType: cond.leftCandleType ?? DEFAULT_START_CANDLE,
rightCandleType: cond.rightCandleType ?? DEFAULT_START_CANDLE,
candleRange: cond.candleRange ?? 1,
valuePeriodOverride: false as const,
rightPeriodOverride: false as const,
thresholdOverride: false as const,
};
if (isDonchianComposite(newIndicatorType)) {
return syncDonchianCompositeFields({
indicatorType: newIndicatorType,
composite: true,
...base,
leftPeriod: short,
rightPeriod: long,
});
}
return syncCompositeFields({
indicatorType: newIndicatorType,
composite: true,
...base,
leftPeriod: short,
rightPeriod: long,
});
}
/** 돈치안 복합 — 조건대상 드롭다운 옵션 */
export function getDonchianFieldOpts(
allPeriods: number[],
frontend/src/utils/stochOverboughtPair.ts
+194
View File
@@ -0,0 +1,194 @@
/** Stochastic 과열(≥80) × 보조지표 중앙선 — 순차 OR 복합 매수 조건 */
import type { ConditionDSL, LogicNode } from './strategyTypes';
import { initConditionPeriodsInherit, type IndicatorPeriodDef } from './conditionPeriods';
import { genId } from './strategyNodeIds';
import { THRESHOLD_HL_MID, THRESHOLD_HL_OVER } from './thresholdSymbols';
export const STOCH_OVERBOUGHT_PAIR_VALUE = 'STOCH_OVERBOUGHT_PAIR';
export const STOCH_PAIR_SECONDARY_OPTIONS: { value: string; label: string }[] = [
{ value: 'CCI', label: 'CCI' },
{ value: 'RSI', label: 'RSI' },
{ value: 'ADX', label: 'ADX' },
{ value: 'WILLIAMS_R', label: 'Williams %R' },
{ value: 'TRIX', label: 'TRIX' },
{ value: 'VR', label: 'VR' },
{ value: 'PSYCHOLOGICAL', label: '심리도' },
{ value: 'NEW_PSYCHOLOGICAL', label: '신심리도' },
{ value: 'INVEST_PSYCHOLOGICAL', label: '투자심리도' },
{ value: 'BWI', label: 'BWI' },
{ value: 'VOLUME_OSC', label: 'Volume OSC' },
];
const SECONDARY_VALUE_FIELD: Record<string, string> = {
RSI: 'RSI_VALUE',
CCI: 'CCI_VALUE',
ADX: 'ADX_VALUE',
WILLIAMS_R: 'WILLIAMS_R_VALUE',
TRIX: 'TRIX_VALUE',
VR: 'VR_VALUE',
PSYCHOLOGICAL: 'PSY_VALUE',
NEW_PSYCHOLOGICAL: 'NEW_PSY_VALUE',
INVEST_PSYCHOLOGICAL: 'INVEST_PSY_VALUE',
BWI: 'BWI_VALUE',
VOLUME_OSC: 'VOLUME_OSC_VALUE',
};
function secondaryLabel(indicatorType: string): string {
return STOCH_PAIR_SECONDARY_OPTIONS.find(o => o.value === indicatorType)?.label ?? indicatorType;
}
export function isStochOverboughtPairPaletteValue(value: string): boolean {
return value === STOCH_OVERBOUGHT_PAIR_VALUE;
}
export function isStochOverboughtPairRoot(node: LogicNode): boolean {
return node.type === 'OR' && !!node.stochPair?.secondaryIndicatorType;
}
export function getSecondaryValueField(indicatorType: string): string {
return SECONDARY_VALUE_FIELD[indicatorType] ?? `${indicatorType}_VALUE`;
}
function makePairCondition(
indicatorType: string,
conditionType: string,
leftField: string,
rightField: string,
def: IndicatorPeriodDef,
): LogicNode {
const base: ConditionDSL = {
indicatorType,
conditionType,
leftField,
rightField,
candleRange: 1,
valuePeriodOverride: false,
thresholdOverride: false,
rightPeriodOverride: false,
};
return {
id: genId(),
type: 'CONDITION',
condition: initConditionPeriodsInherit(indicatorType, base, def),
};
}
/** (Stoch≥과열 AND 보조 CROSS_UP 중앙) OR (보조≥중앙 AND Stoch CROSS_UP 과열) */
export function buildStochOverboughtPairTree(
secondaryIndicator: string,
def: IndicatorPeriodDef,
): LogicNode {
const sec = STOCH_PAIR_SECONDARY_OPTIONS.some(o => o.value === secondaryIndicator)
? secondaryIndicator
: 'CCI';
const secField = getSecondaryValueField(sec);
return {
id: genId(),
type: 'OR',
stochPair: { secondaryIndicatorType: sec },
children: [
{
id: genId(),
type: 'AND',
children: [
makePairCondition('STOCHASTIC', 'GTE', 'STOCH_K', THRESHOLD_HL_OVER, def),
makePairCondition(sec, 'CROSS_UP', secField, THRESHOLD_HL_MID, def),
],
},
{
id: genId(),
type: 'AND',
children: [
makePairCondition(sec, 'GTE', secField, THRESHOLD_HL_MID, def),
makePairCondition('STOCHASTIC', 'CROSS_UP', 'STOCH_K', THRESHOLD_HL_OVER, def),
],
},
],
};
}
/** 보조지표 변경 시 기존 OR·AND 노드 id 유지 */
export function setStochPairSecondary(
root: LogicNode,
secondaryIndicator: string,
def: IndicatorPeriodDef,
): LogicNode {
if (!isStochOverboughtPairRoot(root)) return root;
const rebuilt = buildStochOverboughtPairTree(secondaryIndicator, def);
const preserveIds = (next: LogicNode, prev: LogicNode | undefined): LogicNode => ({
...next,
id: prev?.id ?? next.id,
children: next.children?.map((child, i) =>
preserveIds(child, prev?.children?.[i]),
),
});
return preserveIds(rebuilt, root);
}
export function stochPairDisplayName(secondaryIndicator: string): string {
return `Stoch 과열×${secondaryLabel(secondaryIndicator)}`;
}
export function stochPairSummaryText(secondaryIndicator: string): string {
const sec = secondaryLabel(secondaryIndicator);
return `(Stoch≥과열 AND ${sec} 중앙 상향) OR (${sec}≥중앙 AND Stoch 과열 상향)`;
}
export function stochPairPaletteDesc(secondaryIndicator: string): string {
const sec = secondaryLabel(secondaryIndicator);
return `Stoch≥80 + ${sec} 0선(중앙) 돌파 또는 ${sec}≥중앙 + Stoch 과열 돌파`;
}
function nodeContainsId(node: LogicNode, targetId: string): boolean {
if (node.id === targetId) return true;
return (node.children ?? []).some(c => nodeContainsId(c, targetId));
}
/** nodeId를 포함하는 Stoch 과열×보조 OR 루트 탐색 */
export function findStochPairRootContaining(
node: LogicNode | null | undefined,
targetId: string,
): LogicNode | null {
if (!node) return null;
if (isStochOverboughtPairRoot(node) && nodeContainsId(node, targetId)) {
return node;
}
for (const child of node.children ?? []) {
const hit = findStochPairRootContaining(child, targetId);
if (hit) return hit;
}
return null;
}
export function findStochPairRootInForest(
roots: (LogicNode | null | undefined)[],
targetId: string,
): LogicNode | null {
for (const root of roots) {
const hit = findStochPairRootContaining(root, targetId);
if (hit) return hit;
}
return null;
}
/** OR 서브트리 전체를 새 보조지표로 재구성 (노드 id 유지) */
export function patchStochPairInTree(
root: LogicNode | null,
orNodeId: string,
secondaryIndicator: string,
def: IndicatorPeriodDef,
): LogicNode | null {
if (!root) return null;
if (root.id === orNodeId && isStochOverboughtPairRoot(root)) {
return setStochPairSecondary(root, secondaryIndicator, def);
}
if (!root.children?.length) return root;
return {
...root,
children: root.children.map(c => patchStochPairInTree(c, orNodeId, secondaryIndicator, def) ?? c),
};
}
frontend/src/utils/strategyEditorShared.tsx
+84 -22
View File
@@ -4,6 +4,7 @@ import type { IndicatorConfig } from '../types/index';
import { getIndicatorDef, getHLineLabel, INDICATOR_REGISTRY, type PlotDef, type HLineDef } from '../utils/indicatorRegistry';
import type { LogicNode, LogicNodeType, ConditionDSL } from '../utils/strategyTypes';
import {
COMPOSITE_INDICATOR_ITEMS,
compositeDisplayName,
compositeElementLabel,
compositeFieldLabel,
@@ -11,6 +12,7 @@ import {
normalizeCompositeCondition,
parseDonchianPeriod,
parsePeriodFromCompositeField,
switchCompositeIndicatorType,
syncCompositeFields,
} from '../utils/compositeIndicators';
import {
@@ -21,6 +23,14 @@ import {
syncPriceExtremeSimpleFields,
} from '../utils/priceExtremeIndicators';
import { getStrategyIndicatorDisplayName } from '../utils/strategyPaletteStorage';
import {
buildStochOverboughtPairTree,
isStochOverboughtPairPaletteValue,
isStochOverboughtPairRoot,
STOCH_PAIR_SECONDARY_OPTIONS,
stochPairDisplayName,
stochPairSummaryText,
} from '../utils/stochOverboughtPair';
import ComboFieldSelect from '../components/strategyEditor/ComboFieldSelect';
import {
getCompositeFieldOpts,
@@ -57,6 +67,9 @@ import {
import { STRATEGY_CANDLE_TYPE_OPTIONS } from '../utils/strategyStartNodes';
import type { StrategyFlowLayoutStore } from './strategyEditorLayoutStorage';
import { genId } from './strategyNodeIds';
export { genId };
export interface StrategyDto {
id: number;
@@ -78,9 +91,6 @@ export interface ValidationResult {
export type DefType = typeof DEF_DEFAULTS;
let _cnt = 0;
export const genId = () => `n_${++_cnt}_${Date.now()}`;
/** @deprecated DB(gc_strategy)만 사용 */
export const loadStratsLocal = (): StrategyDto[] => [];
/** @deprecated */
@@ -729,6 +739,10 @@ export const nodeToText = (node: LogicNode, DEF: DefType = DEF_DEFAULTS): string
return parts.length === 0 ? '(AND 그룹)' : parts.join('\nAND ');
}
if (node.type === 'OR') {
if (isStochOverboughtPairRoot(node)) {
const sec = node.stochPair!.secondaryIndicatorType;
return `${stochPairDisplayName(sec)}\n${stochPairSummaryText(sec)}`;
}
const parts = (node.children ?? []).map(c => nodeToText(c, DEF));
return parts.length === 0 ? '(OR 그룹)' : parts.join('\nOR ');
}
@@ -818,9 +832,17 @@ interface CondEditorProps {
signalType: 'buy'|'sell';
onChange: (c: ConditionDSL) => void;
def: DefType;
/** Stoch 과열×보조 복합 — 캔들범위 대신 보조지표 선택 */
stochPairEdit?: {
secondaryIndicator: string;
onSecondaryChange: (indicator: string) => void;
stochLocked?: boolean;
};
}
export const CondEditor: React.FC<CondEditorProps> = ({ cond, signalType, onChange, def }) => {
export const CondEditor: React.FC<CondEditorProps> = ({
cond, signalType, onChange, def, stochPairEdit,
}) => {
const normalized = normalizeCompositeCondition(cond);
const fieldOpts = getFieldOpts(normalized.indicatorType, signalType, def, normalized);
const condOpts = normalized.indicatorType === 'ICHIMOKU' ? ICHIMOKU_CONDS : COND_OPTIONS;
@@ -936,14 +958,15 @@ export const CondEditor: React.FC<CondEditorProps> = ({ cond, signalType, onChan
</div>
<div className="sp-cond-row4">
<div className="sp-cond-field">
<label className="sp-cond-lbl">캔들 범위</label>
<select className="sp-cond-sel" value={normalized.candleRange ?? 1}
onChange={e => onChange({ ...normalized, candleRange: Number(e.target.value) })}>
<option value={1}>현재 캔들</option>
<option value={2}>2개 캔들</option>
<option value={3}>3개 캔들</option>
<option value={4}>4개 캔들</option>
<option value={5}>5개 캔들</option>
<label className="sp-cond-lbl">지표</label>
<select
className="sp-cond-sel"
value={normalized.indicatorType}
onChange={e => onChange(switchCompositeIndicatorType(normalized, e.target.value, def))}
>
{COMPOSITE_INDICATOR_ITEMS.map(o => (
<option key={o.value} value={o.value}>{o.label}</option>
))}
</select>
</div>
<div className="sp-cond-field">
@@ -995,17 +1018,41 @@ export const CondEditor: React.FC<CondEditorProps> = ({ cond, signalType, onChan
<div className="sp-cond-editor">
{/* 4컬럼 row */}
<div className="sp-cond-row4">
{/* 캔들 범위 */}
{/* 캔들 범위 / Stoch×보조 복합 보조지표 */}
<div className="sp-cond-field">
<label className="sp-cond-lbl">캔들 범위</label>
<select className="sp-cond-sel" value={cond.candleRange ?? 1}
onChange={e => onChange({ ...cond, candleRange: Number(e.target.value) })}>
<option value={1}>현재 캔들</option>
<option value={2}>2개 캔들</option>
<option value={3}>3개 캔들</option>
<option value={4}>4개 캔들</option>
<option value={5}>5개 캔들</option>
</select>
{stochPairEdit ? (
stochPairEdit.stochLocked ? (
<>
<label className="sp-cond-lbl">고정 지표</label>
<output className="sp-cond-readout">Stochastic %K</output>
</>
) : (
<>
<label className="sp-cond-lbl">보조지표</label>
<select
className="sp-cond-sel"
value={stochPairEdit.secondaryIndicator}
onChange={e => stochPairEdit.onSecondaryChange(e.target.value)}
>
{STOCH_PAIR_SECONDARY_OPTIONS.map(o => (
<option key={o.value} value={o.value}>{o.label}</option>
))}
</select>
</>
)
) : (
<>
<label className="sp-cond-lbl">캔들 범위</label>
<select className="sp-cond-sel" value={cond.candleRange ?? 1}
onChange={e => onChange({ ...cond, candleRange: Number(e.target.value) })}>
<option value={1}>현재 캔들</option>
<option value={2}>2개 캔들</option>
<option value={3}>3개 캔들</option>
<option value={4}>4개 캔들</option>
<option value={5}>5개 캔들</option>
</select>
</>
)}
</div>
{/* 조건대상1 */}
<div className="sp-cond-field">
@@ -1117,17 +1164,29 @@ export type MakeNodeOptions = {
rightPeriod?: number;
leftCandleType?: string;
rightCandleType?: string;
/** Stoch 과열×보조 복합 */
stochPair?: boolean;
secondaryIndicator?: string;
};
/** 팔레트 드래그 payload → makeNode 옵션 */
export function makeNodeOptionsFromPalette(data: {
composite?: boolean;
stochPair?: boolean;
secondaryIndicator?: string;
period?: number;
shortPeriod?: number;
longPeriod?: number;
leftCandleType?: string;
rightCandleType?: string;
value?: string;
}): MakeNodeOptions | undefined {
if (data.stochPair || (data.value && isStochOverboughtPairPaletteValue(data.value))) {
return {
stochPair: true,
secondaryIndicator: data.secondaryIndicator ?? 'CCI',
};
}
if (data.composite) {
return {
composite: true,
@@ -1146,6 +1205,9 @@ export const makeNode = (
options?: MakeNodeOptions,
): LogicNode => {
if (type === 'operator') return { id: genId(), type: value as LogicNodeType, children: [] };
if (options?.stochPair || isStochOverboughtPairPaletteValue(value)) {
return buildStochOverboughtPairTree(options?.secondaryIndicator ?? 'CCI', DEF);
}
if (options?.composite) {
let condition = makeCompositeCondition(value, signalType, DEF);
condition = {
frontend/src/utils/strategyFlowLayout.ts
+7 -2
View File
@@ -40,6 +40,8 @@ export type StrategyFlowNodeData = {
onDeleteStart?: (startId: string) => void;
onDelete?: (id: string) => void;
onUpdateCondition?: (nodeId: string, condition: ConditionDSL) => void;
/** Stoch 과열×보조 복합 — 보조지표 변경 */
onUpdateStochPairSecondary?: (nodeId: string, secondaryIndicator: string) => void;
/** AND ↔ OR 전환 */
onChangeLogicGateType?: (nodeId: string, gateType: 'AND' | 'OR') => void;
onDropTarget?: (targetId: string, data: { type: string; value: string; label: string }, flowPos: { x: number; y: number }) => void;
@@ -472,7 +474,7 @@ function layoutTree(
signalTab: 'buy' | 'sell',
callbacks: Pick<
StrategyFlowNodeData,
'onDelete' | 'onUpdateCondition' | 'onChangeLogicGateType'
'onDelete' | 'onUpdateCondition' | 'onUpdateStochPairSecondary' | 'onChangeLogicGateType'
| 'onDropTarget' | 'onDragOverTarget' | 'onDragLeaveTarget'
>,
dragOverId: string | null,
@@ -494,6 +496,7 @@ function layoutTree(
signalTab,
onDelete: callbacks.onDelete,
onUpdateCondition: callbacks.onUpdateCondition,
onUpdateStochPairSecondary: callbacks.onUpdateStochPairSecondary,
onChangeLogicGateType: callbacks.onChangeLogicGateType,
onDropTarget: callbacks.onDropTarget,
onDragOverTarget: callbacks.onDragOverTarget,
@@ -623,7 +626,7 @@ function appendOrphanFlowNodes(
signalTab: 'buy' | 'sell',
callbacks: Pick<
StrategyFlowNodeData,
'onDelete' | 'onUpdateCondition' | 'onChangeLogicGateType'
'onDelete' | 'onUpdateCondition' | 'onUpdateStochPairSecondary' | 'onChangeLogicGateType'
| 'onDropTarget' | 'onDragOverTarget' | 'onDragLeaveTarget'
>,
): void {
@@ -645,6 +648,7 @@ function appendOrphanFlowNodes(
signalTab,
onDelete: callbacks.onDelete,
onUpdateCondition: callbacks.onUpdateCondition,
onUpdateStochPairSecondary: callbacks.onUpdateStochPairSecondary,
onChangeLogicGateType: callbacks.onChangeLogicGateType,
onDropTarget: callbacks.onDropTarget,
onDragOverTarget: callbacks.onDragOverTarget,
@@ -668,6 +672,7 @@ export function logicNodeToFlow(
StrategyFlowNodeData,
| 'onDelete'
| 'onUpdateCondition'
| 'onUpdateStochPairSecondary'
| 'onDropTarget'
| 'onDragOverTarget'
| 'onDragLeaveTarget'
frontend/src/utils/strategyNodeIds.ts
+3
View File
@@ -0,0 +1,3 @@
/** 전략 DSL 노드 id — 순환 import 방지를 위해 별도 모듈 */
let _cnt = 0;
export const genId = () => `n_${++_cnt}_${Date.now()}`;
frontend/src/utils/strategyPaletteStorage.ts
+19 -4
View File
@@ -1,6 +1,10 @@
/** 전략편집기 우측 팔레트 — 보조·복합 지표 목록 (DB ui_preferences) */
import { getUiPreferences, patchUiPreferences } from './uiPreferencesDb';
import { COMPOSITE_INDICATOR_ITEMS } from './compositeIndicators';
import {
STOCH_OVERBOUGHT_PAIR_VALUE,
stochPairPaletteDesc,
} from './stochOverboughtPair';
export type PaletteItemKind = 'auxiliary' | 'composite';
@@ -16,6 +20,8 @@ export interface PaletteItem {
/** 복합지표 단기·장기 기간 */
shortPeriod?: number;
longPeriod?: number;
/** Stoch 과열×보조 복합 — 기본 보조지표 (CCI 등) */
secondaryIndicator?: string;
builtIn?: boolean;
}
@@ -40,20 +46,29 @@ export const DEFAULT_AUXILIARY_ITEMS: Omit<PaletteItem, 'id' | 'kind'>[] = [
{ value: 'NEW_LOW', label: '신저가', desc: '직전 N봉 최저가 이탈 — 종가/저가 vs N일 신저가선 (9·20일)', builtIn: true, period: 9 },
];
export const DEFAULT_COMPOSITE_ITEMS: Omit<PaletteItem, 'id' | 'kind'>[] =
COMPOSITE_INDICATOR_ITEMS.map(i => ({
export const DEFAULT_COMPOSITE_ITEMS: Omit<PaletteItem, 'id' | 'kind'>[] = [
{
value: STOCH_OVERBOUGHT_PAIR_VALUE,
label: 'Stoch 과열×보조',
desc: stochPairPaletteDesc('CCI'),
builtIn: true,
secondaryIndicator: 'CCI',
},
...COMPOSITE_INDICATOR_ITEMS.map(i => ({
value: i.value,
label: i.label,
desc: i.desc,
builtIn: true,
}));
})),
];
export const AUXILIARY_TYPE_OPTIONS = DEFAULT_AUXILIARY_ITEMS.map(i => ({
value: i.value,
label: i.label,
}));
export const COMPOSITE_TYPE_OPTIONS = DEFAULT_COMPOSITE_ITEMS.map(i => ({
/** 팔레트 추가 모달 — 동일 지표 2기간 교차만 선택 (Stoch×보조는 내장 칩) */
export const COMPOSITE_TYPE_OPTIONS = COMPOSITE_INDICATOR_ITEMS.map(i => ({
value: i.value,
label: i.label,
}));
frontend/src/utils/strategyTypes.ts
+4
View File
@@ -38,6 +38,10 @@ export interface LogicNode {
candleType?: string;
/** TIMEFRAME 노드 — 동일 조건을 여러 분봉 마감마다 평가 */
candleTypes?: string[];
/** Stoch 과열×보조지표 순차 OR 복합 — OR 루트에만 설정 */
stochPair?: {
secondaryIndicatorType: string;
};
}
export interface StrategyDSLDto {