aidev/goldenChart

Fork 0

Files

T

aidev a4ea7762b5 goldenChat base source add

2026-05-23 15:11:48 +09:00

8.6 KiB

Raw Blame History

이격도 선 ON/OFF 설정 문제 수정 완료

🔍 문제점

이격도 설정에서 초단기, 단기, 중기, 장기 중 항목을 OFF 하고 적용해도 차트에는 여전히 모든 그래프가 표시되는 문제

🐛 발견된 원인

1. CandlestickChart.tsx - visible 속성 누락

// ❌ 문제: visible 속성이 없어서 설정과 무관하게 모든 선 표시
const ultraShortSeries = subChart.addLineSeries({ 
  color: colorSettings?.disparityUltraShortColor || '#FF6B35', 
  lineWidth: (colorSettings?.disparityUltraShortWidth || 1.5) as any,
  lineStyle: colorSettings?.disparityUltraShortLineStyle ? getLineStyle(colorSettings.disparityUltraShortLineStyle) : 0,
  // visible 속성 없음!
});

2. IndicatorSettingsTab.tsx - ON/OFF 스위치 UI 누락

이격도 각 선(초단기, 단기, 중기, 장기)의 ON/OFF 스위치가 없음
사용자가 특정 선만 표시하고 싶어도 설정할 방법이 없음

✅ 수정 사항

1. CandlestickChart.tsx - visible 속성 추가

// ✅ 수정: visible 속성 추가하여 설정에 따라 표시/숨김
// 초단기 이격도 (5일)
const ultraShortSeries = subChart.addLineSeries({ 
  color: colorSettings?.disparityUltraShortColor || '#FF6B35', 
  lineWidth: (colorSettings?.disparityUltraShortWidth || 1.5) as any,
  lineStyle: colorSettings?.disparityUltraShortLineStyle ? getLineStyle(colorSettings.disparityUltraShortLineStyle) : 0,
  visible: indicatorSettings?.disparityUltraShortEnabled ?? true, // ✅ 추가
});

// 단기 이격도 (20일)
const shortSeries = subChart.addLineSeries({ 
  color: colorSettings?.disparityShortColor || '#4CAF50', 
  lineWidth: (colorSettings?.disparityShortWidth || 2) as any,
  lineStyle: colorSettings?.disparityShortLineStyle ? getLineStyle(colorSettings.disparityShortLineStyle) : 0,
  visible: indicatorSettings?.disparityShortEnabled ?? true, // ✅ 추가
});

// 중기 이격도 (60일)
const midSeries = subChart.addLineSeries({ 
  color: colorSettings?.disparityMidColor || '#2196F3', 
  lineWidth: (colorSettings?.disparityMidWidth || 2) as any,
  lineStyle: colorSettings?.disparityMidLineStyle ? getLineStyle(colorSettings.disparityMidLineStyle) : 0,
  visible: indicatorSettings?.disparityMidEnabled ?? true, // ✅ 추가
});

// 장기 이격도 (120일)
const longSeries = subChart.addLineSeries({ 
  color: colorSettings?.disparityLongColor || '#9C27B0', 
  lineWidth: (colorSettings?.disparityLongWidth || 2) as any,
  lineStyle: colorSettings?.disparityLongLineStyle ? getLineStyle(colorSettings.disparityLongLineStyle) : 0,
  visible: indicatorSettings?.disparityLongEnabled ?? true, // ✅ 추가
});

2. IndicatorSettingsTab.tsx - ON/OFF 스위치 UI 추가

{/* 각 선 활성화 스위치 */}
<Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 'bold' }}>
  선 표시 설정
</Typography>
<Grid container spacing={2} sx={{ mb: 3 }}>
  <Grid item xs={6} md={3}>
    <FormControlLabel
      control={
        <Switch
          checked={settings.disparityUltraShortEnabled ?? true}
          onChange={(e) => handleSettingChange({ disparityUltraShortEnabled: e.target.checked })}
        />
      }
      label="초단기 (5일)"
    />
  </Grid>
  <Grid item xs={6} md={3}>
    <FormControlLabel
      control={
        <Switch
          checked={settings.disparityShortEnabled ?? true}
          onChange={(e) => handleSettingChange({ disparityShortEnabled: e.target.checked })}
        />
      }
      label="단기 (20일)"
    />
  </Grid>
  <Grid item xs={6} md={3}>
    <FormControlLabel
      control={
        <Switch
          checked={settings.disparityMidEnabled ?? true}
          onChange={(e) => handleSettingChange({ disparityMidEnabled: e.target.checked })}
        />
      }
      label="중기 (60일)"
    />
  </Grid>
  <Grid item xs={6} md={3}>
    <FormControlLabel
      control={
        <Switch
          checked={settings.disparityLongEnabled ?? true}
          onChange={(e) => handleSettingChange({ disparityLongEnabled: e.target.checked })}
        />
      }
      label="장기 (120일)"
    />
  </Grid>
</Grid>

<Divider sx={{ my: 2 }} />

{/* 기간 설정 (비활성화된 선은 입력 비활성화) */}
<Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 'bold' }}>
  기간 설정
</Typography>
<Grid container spacing={3}>
  <Grid item xs={12} md={3}>
    <TextField
      fullWidth
      label="초단기 기간"
      type="number"
      value={settings.disparityUltraShortPeriod}
      onChange={(e) => handleSettingChange({ disparityUltraShortPeriod: Number(e.target.value) })}
      inputProps={{ min: 1, max: 20 }}
      helperText="기본값: 5일"
      disabled={!settings.disparityUltraShortEnabled} // ✅ 비활성화 시 입력 불가
    />
  </Grid>
  {/* 나머지 단기, 중기, 장기도 동일하게 disabled 속성 추가 */}
</Grid>

3. IndicatorChart.tsx - 이미 올바르게 구현됨

IndicatorChart.tsx는 이미 visible 속성이 올바르게 설정되어 있었습니다:

visible: indicatorSettings.disparityUltraShortEnabled ?? true,
visible: indicatorSettings.disparityShortEnabled ?? true,
visible: indicatorSettings.disparityMidEnabled ?? true,
visible: indicatorSettings.disparityLongEnabled ?? true,

🔄 설정 변경 흐름

1. 사용자가 설정 변경

보조지표 설정 > 이격도 > 선 표시 설정

2. Context 업데이트

// IndicatorSettingsContext
disparityUltraShortEnabled: boolean
disparityShortEnabled: boolean
disparityMidEnabled: boolean
disparityLongEnabled: boolean

3. 차트 자동 재렌더링

// CandlestickChart.tsx
useEffect(() => {
  // 서브차트 재생성
}, [subPanels, data?.length, indicatorData?.length, themeMode, 
    indicatorSettings, colorSettings]); // ✅ indicatorSettings 변경 감지

4. visible 속성 적용

// 각 시리즈 생성 시 visible 속성 적용
const ultraShortSeries = subChart.addLineSeries({ 
  // ...
  visible: indicatorSettings?.disparityUltraShortEnabled ?? true,
});

✅ 테스트 시나리오

1. 모든 선 ON (기본값)

초단기, 단기, 중기, 장기 모두 표시

2. 초단기만 ON

초단기만 표시
단기, 중기, 장기 숨김
기준선은 초단기 시리즈에 표시

3. 초단기 OFF, 단기만 ON

단기만 표시
초단기, 중기, 장기 숨김
기준선은 단기 시리즈에 표시

4. 중기와 장기만 ON

중기와 장기만 표시
초단기, 단기 숨김
기준선은 중기 시리즈에 표시

5. 장기만 ON

장기만 표시
초단기, 단기, 중기 숨김
기준선은 장기 시리즈에 표시

6. 설정 변경 시 즉시 반영

스위치 ON/OFF 시 차트 즉시 업데이트
비활성화된 선의 기간 설정 입력 비활성화

📊 기본값

// IndicatorSettingsContext
disparityUltraShortEnabled: true  // 초단기 (5일)
disparityShortEnabled: true       // 단기 (20일)
disparityMidEnabled: true         // 중기 (60일)
disparityLongEnabled: true        // 장기 (120일)

🎯 결과

이제 이격도 설정에서 각 선(초단기, 단기, 중기, 장기)의 ON/OFF가 완벽하게 동작합니다!

✅ 초단기 ON/OFF 정상 작동
✅ 단기 ON/OFF 정상 작동
✅ 중기 ON/OFF 정상 작동
✅ 장기 ON/OFF 정상 작동
✅ 설정 변경 즉시 차트 반영
✅ 비활성화된 선의 기간 설정 입력 비활성화
✅ 기준선은 활성화된 선 중 하나에 표시
✅ 빌드 성공 (0 에러)

🚀 배포

cd /Users/macbook/dev/goldenAnalysis
docker compose down
docker compose up --build

또는

cd frontend
npm run build

수정 완료일: 2026-02-01
수정 파일:

frontend/src/components/CandlestickChart.tsx - visible 속성 추가
frontend/src/components/settings/IndicatorSettingsTab.tsx - ON/OFF 스위치 UI 추가
frontend/src/components/IndicatorChart.tsx - 이미 올바르게 구현됨 (수정 불필요)

📝 참고

Context 설정 키

interface IndicatorSettings {
  // ...
  disparityUltraShortEnabled: boolean;  // 초단기 활성화
  disparityShortEnabled: boolean;       // 단기 활성화
  disparityMidEnabled: boolean;         // 중기 활성화
  disparityLongEnabled: boolean;        // 장기 활성화
  disparityBaseLineEnabled: boolean;    // 기준선 활성화
  // ...
}

localStorage 저장

설정 변경 시 자동으로 localStorage에 저장되어 다음 접속 시에도 유지됩니다.

8.6 KiB Raw Blame History