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:
@@ -4979,9 +4979,10 @@ table.market-adr td.adr-breakdown { font-size: 11px; color: #8b8f9a; }
|
|||||||
.holdings-toggle-wrap { margin-top: 4px; }
|
.holdings-toggle-wrap { margin-top: 4px; }
|
||||||
|
|
||||||
/* 차트 컨트롤 — 자산정보 탭 상단의 공통 기간·단위 select 묶음. */
|
/* 차트 컨트롤 — 자산정보 탭 상단의 공통 기간·단위 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-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 .cc-label { color: #8b8f9a; font-size: 11px; }
|
||||||
.chart-controls .nw-select {
|
.chart-controls .nw-select {
|
||||||
appearance: none; -webkit-appearance: none;
|
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>'
|
f'<option value="{y}"{" selected" if y == cur_year else ""}>{html.escape(y)}년</option>'
|
||||||
for y in years
|
for y in years
|
||||||
)
|
)
|
||||||
month_opts = ''.join(
|
# 월 — 월별일 때만 실제 월 목록(활성), 연도별이면 '-' 한 칸 비활성.
|
||||||
f'<option value="{m}"{" selected" if m == cur_month else ""}>{int(m)}월</option>'
|
if is_month:
|
||||||
for m in months_map.get(cur_year, [])
|
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'
|
_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)
|
months_json = html.escape(json.dumps(months_map, ensure_ascii=False), quote=True)
|
||||||
|
|
||||||
|
# 지정기간은 단위 일별 고정 → 단위 select 비활성, '일별' 선택 표시.
|
||||||
unit_opts = ''.join(
|
unit_opts = ''.join(
|
||||||
f'<option value="{u}"'
|
f'<option value="{u}"'
|
||||||
f'{" selected" if u == selected_unit else ""}'
|
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
|
for lbl, m in NET_WORTH_MODE_PRESETS
|
||||||
)
|
)
|
||||||
_unit_dis = ' disabled' if period_active else ''
|
_unit_dis = ' disabled' if period_active else ''
|
||||||
return (
|
# 1번째 줄: 기간 / 단위 / 차트타입(모드). 2번째 줄(지정기간일 때만): 유형 / 연도 / 월.
|
||||||
f'<div class="chart-controls" data-ym-months="{months_json}">'
|
line1 = (
|
||||||
|
f'<div class="cc-line">'
|
||||||
f'<label class="cc-field"><span class="cc-label">기간</span>'
|
f'<label class="cc-field"><span class="cc-label">기간</span>'
|
||||||
f'<select class="nw-select" data-nw-range>{range_opts}</select></label>'
|
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'<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" 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>'
|
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]:
|
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 필터.
|
# 연도별/월별 절대 선택 — chart_ym('YYYY'=연도별·월별집계 / 'YYYY-MM'=월별·일별) 있으면 단위 강제 + period 필터.
|
||||||
period = (chart_ym or '').strip()
|
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 포함.
|
# 과거 차트(예: 4월)에 today 순자산이 마지막 점·델타·하단값으로 섞이는 것 방지. 프리셋은 항상 today 포함.
|
||||||
_now_dt = datetime.now(KST)
|
_now_dt = datetime.now(KST)
|
||||||
|
|||||||
Reference in New Issue
Block a user