refactor: 차트 컨트롤 2줄 분리 + 지정기간 단위 일별 고정

- 1번째 줄: 기간/단위/차트타입(모드) 유지. 지정기간 선택 시 단위 일별 고정(비활성).
- 2번째 줄(지정기간일 때만 노출): 유형(연도별/월별) / 연도 / 월.
- 유형=연도별이면 월 드롭다운 '-' 표시·비활성, 월별이면 월 활성.
- 연도별도 단위 일별 → 그 해 전체 일별 차트(기존 월별집계에서 변경).
- CSS: .chart-controls 컬럼 레이아웃 + .cc-line 행, .cc-line-ym[hidden] 숨김.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
hyowons
2026-06-10 11:13:17 +09:00
parent 8c891a820a
commit e1fd6a7e84
+26 -15
View File
@@ -4979,9 +4979,10 @@ table.market-adr td.adr-breakdown { font-size: 11px; color: #8b8f9a; }
.holdings-toggle-wrap { margin-top: 4px; }
/* 차트 컨트롤 자산정보 상단의 공통 기간·단위 select 묶음. */
.chart-controls { display: flex; gap: 10px; margin: 10px 14px 4px; flex-wrap: wrap; }
.chart-controls { display: flex; flex-direction: column; gap: 6px; margin: 10px 14px 4px; }
.chart-controls .cc-line { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.chart-controls .cc-line-ym[hidden] { display: none; } /* 지정기간 아닐 2번째 숨김 ([hidden] UA 스타일이 flex에 가려지지 않도록 명시) */
.chart-controls .cc-field { display: flex; align-items: center; gap: 6px; }
.chart-controls .cc-ym[hidden] { display: none; } /* 연도별/월별 아닐 · 드롭다운 숨김 ([hidden] UA 스타일이 flex에 가려지지 않도록 명시) */
.chart-controls .cc-label { color: #8b8f9a; font-size: 11px; }
.chart-controls .nw-select {
appearance: none; -webkit-appearance: none;
@@ -5172,14 +5173,20 @@ def _render_chart_controls(selected_days: int, selected_unit: str, selected_mode
f'<option value="{y}"{" selected" if y == cur_year else ""}>{html.escape(y)}년</option>'
for y in years
)
# 월 — 월별일 때만 실제 월 목록(활성), 연도별이면 '-' 한 칸 비활성.
if is_month:
month_opts = ''.join(
f'<option value="{m}"{" selected" if m == cur_month else ""}>{int(m)}월</option>'
for m in months_map.get(cur_year, [])
)
_month_dis = ''
else:
month_opts = '<option value="">-</option>'
_month_dis = ' disabled'
_customhide = '' if period_active else ' hidden'
_mhide = '' if is_month else ' hidden'
months_json = html.escape(json.dumps(months_map, ensure_ascii=False), quote=True)
# 지정기간은 단위 일별 고정 → 단위 select 비활성, '일별' 선택 표시.
unit_opts = ''.join(
f'<option value="{u}"'
f'{" selected" if u == selected_unit else ""}'
@@ -5192,23 +5199,27 @@ def _render_chart_controls(selected_days: int, selected_unit: str, selected_mode
for lbl, m in NET_WORTH_MODE_PRESETS
)
_unit_dis = ' disabled' if period_active else ''
return (
f'<div class="chart-controls" data-ym-months="{months_json}">'
# 1번째 줄: 기간 / 단위 / 차트타입(모드). 2번째 줄(지정기간일 때만): 유형 / 연도 / 월.
line1 = (
f'<div class="cc-line">'
f'<label class="cc-field"><span class="cc-label">기간</span>'
f'<select class="nw-select" data-nw-range>{range_opts}</select></label>'
# 지정기간 선택 시 노출: 유형(연도별/월별) → 연도 → 월(월별일 때만). 데이터 있는 기간만.
f'<label class="cc-field cc-ym" data-ym-type-field{_customhide}><span class="cc-label">유형</span>'
f'<select class="nw-select" data-nw-ymtype>{type_opts}</select></label>'
f'<label class="cc-field cc-ym" data-ym-year-field{_customhide}><span class="cc-label">연도</span>'
f'<select class="nw-select" data-nw-year>{year_opts}</select></label>'
f'<label class="cc-field cc-ym" data-ym-month-field{_mhide}><span class="cc-label">월</span>'
f'<select class="nw-select" data-nw-month>{month_opts}</select></label>'
# 단위·모드 한 cc-field 묶음. period 활성 시 단위 강제(disabled).
f'<label class="cc-field cc-unit"><span class="cc-label">단위</span>'
f'<select class="nw-select" data-nw-unit{_unit_dis}>{unit_opts}</select>'
f'<select class="nw-select nw-mode-inline" data-nw-mode aria-label="차트 모드">{mode_opts}</select></label>'
'</div>'
f'</div>'
)
line2 = (
f'<div class="cc-line cc-line-ym"{_customhide}>'
f'<label class="cc-field"><span class="cc-label">유형</span>'
f'<select class="nw-select" data-nw-ymtype>{type_opts}</select></label>'
f'<label class="cc-field"><span class="cc-label">연도</span>'
f'<select class="nw-select" data-nw-year>{year_opts}</select></label>'
f'<label class="cc-field"><span class="cc-label">월</span>'
f'<select class="nw-select" data-nw-month{_month_dis}>{month_opts}</select></label>'
f'</div>'
)
return f'<div class="chart-controls" data-ym-months="{months_json}">{line1}{line2}</div>'
def _format_signed_billion(v: int | None) -> tuple[str, str]:
@@ -5765,7 +5776,7 @@ def _render_summary_panel(ordered_owners: list[str], owner_data: dict, balances:
# 연도별/월별 절대 선택 — chart_ym('YYYY'=연도별·월별집계 / 'YYYY-MM'=월별·일별) 있으면 단위 강제 + period 필터.
period = (chart_ym or '').strip()
eff_unit = ('day' if len(period) > 4 else 'month') if period else chart_unit
eff_unit = 'day' if period else chart_unit # 지정기간(연도별·월별)은 단위 일별 고정.
# 절대 선택이 과거 기간(이번달·올해가 아님)이면 오늘 라이브 점·라이브 갱신을 끈다 —
# 과거 차트(예: 4월)에 today 순자산이 마지막 점·델타·하단값으로 섞이는 것 방지. 프리셋은 항상 today 포함.
_now_dt = datetime.now(KST)