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

보조지표 툴바추가

Browse Source
This commit is contained in:
Macbook
2026-05-29 23:51:13 +09:00
parent 095b0d7db7
commit 6332d198b1
11 changed files with 846 additions and 436 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/SettingsPage.tsx
+89 -65
View File
@@ -37,7 +37,7 @@ import {
CHART_LEGEND_SETTING_ITEMS,
type ChartLegendVisibility,
} from '../types/chartLegend';
import type { ChartPaneSeparatorOptions } from '../types/chartPaneSeparator';
import type { ChartPaneSeparatorOptions, PaneSeparatorStyle } from '../types/chartPaneSeparator';
import {
LINE_STYLE_LABELS,
LINE_STYLE_OPTIONS,
@@ -661,6 +661,72 @@ const GeneralPanel: React.FC<{
);
};
function PaneSeparatorStyleFields({
style,
onChange,
}: {
style: PaneSeparatorStyle;
onChange: (next: PaneSeparatorStyle) => void;
}) {
return (
<>
<SettingRow label="구분선 표시">
<label className="stg-toggle">
<input
type="checkbox"
checked={style.visible}
onChange={e => onChange({ ...style, visible: e.target.checked })}
/>
<span className="stg-toggle-slider" />
</label>
</SettingRow>
{style.visible && (
<>
<SettingRow label="선 색상">
<div className="stg-color-row">
<input
type="color"
className="stg-color"
value={style.color.startsWith('#') ? style.color.slice(0, 7) : '#2a2e3a'}
onChange={e => onChange({ ...style, color: e.target.value })}
/>
<span className="stg-color-label">{style.color}</span>
</div>
</SettingRow>
<SettingRow label="선 굵기">
<select
className="stg-select"
value={style.width}
onChange={e => onChange({
...style,
width: Number(e.target.value) as PaneSeparatorStyle['width'],
})}
>
{LINE_WIDTH_OPTIONS.map(w => (
<option key={w} value={w}>{w}px</option>
))}
</select>
</SettingRow>
<SettingRow label="선 유형">
<select
className="stg-select"
value={style.lineStyle}
onChange={e => onChange({
...style,
lineStyle: e.target.value as PaneSeparatorStyle['lineStyle'],
})}
>
{LINE_STYLE_OPTIONS.map(s => (
<option key={s} value={s}>{LINE_STYLE_LABELS[s]}</option>
))}
</select>
</SettingRow>
</>
)}
</>
);
}
interface ChartPanelProps {
chartRealtimeSource?: string;
onChartRealtimeSource?: (v: string) => void;
@@ -820,70 +886,28 @@ const ChartPanel: React.FC<ChartPanelProps> = ({
{chartPaneSeparator && onChartPaneSeparatorChange && (
<SettingSection title="차트 영역 구분선">
<SettingRow
label="구분선 표시"
desc="캔들·거래량·보조지표 pane 사이에 구분선을 표시합니다."
>
<label className="stg-toggle">
<input
type="checkbox"
checked={chartPaneSeparator.visible}
onChange={e => onChartPaneSeparatorChange({
...chartPaneSeparator,
visible: e.target.checked,
})}
/>
<span className="stg-toggle-slider" />
</label>
</SettingRow>
{chartPaneSeparator.visible && (
<>
<SettingRow label="선 색상" desc="pane 사이 구분선 색상입니다.">
<div className="stg-color-row">
<input
type="color"
className="stg-color"
value={chartPaneSeparator.color.startsWith('#')
? chartPaneSeparator.color.slice(0, 7)
: '#2a2e3a'}
onChange={e => onChartPaneSeparatorChange({
...chartPaneSeparator,
color: e.target.value,
})}
/>
<span className="stg-color-label">{chartPaneSeparator.color}</span>
</div>
</SettingRow>
<SettingRow label="선 굵기" desc="구분선 두께(px)입니다.">
<select
className="stg-select"
value={chartPaneSeparator.width}
onChange={e => onChartPaneSeparatorChange({
...chartPaneSeparator,
width: Number(e.target.value) as ChartPaneSeparatorOptions['width'],
})}
>
{LINE_WIDTH_OPTIONS.map(w => (
<option key={w} value={w}>{w}px</option>
))}
</select>
</SettingRow>
<SettingRow label="선 스타일" desc="실선·점선·도트 중 선택합니다.">
<select
className="stg-select"
value={chartPaneSeparator.lineStyle}
onChange={e => onChartPaneSeparatorChange({
...chartPaneSeparator,
lineStyle: e.target.value as ChartPaneSeparatorOptions['lineStyle'],
})}
>
{LINE_STYLE_OPTIONS.map(s => (
<option key={s} value={s}>{LINE_STYLE_LABELS[s]}</option>
))}
</select>
</SettingRow>
</>
)}
<div className="stg-subsection-label">
캔들·보조지표
<span className="stg-subsection-desc">캔들(·거래량) 영역과 첫 보조지표 pane 사이</span>
</div>
<PaneSeparatorStyleFields
style={chartPaneSeparator.mainToIndicator}
onChange={mainToIndicator => onChartPaneSeparatorChange({
...chartPaneSeparator,
mainToIndicator,
})}
/>
<div className="stg-subsection-label stg-subsection-label--spaced">
보조지표 간
<span className="stg-subsection-desc">보조지표 pane 사이</span>
</div>
<PaneSeparatorStyleFields
style={chartPaneSeparator.indicatorToIndicator}
onChange={indicatorToIndicator => onChartPaneSeparatorChange({
...chartPaneSeparator,
indicatorToIndicator,
})}
/>
</SettingSection>
)}