From 225ef2cb9c4c99cd99cf48492b678537aff7840c Mon Sep 17 00:00:00 2001 From: Kunthawat Greethong Date: Tue, 25 Aug 2026 21:24:28 +0700 Subject: [PATCH] =?UTF-8?q?[verified]=20Dashboard=20polish:=20per-symbol?= =?UTF-8?q?=20detail=20modal=20+=20theme=20column=20+=20uniform=20kickers?= =?UTF-8?q?=20=E2=80=94=207-point=20review?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - F1/F2: table full-width; 'รวม' -> 'คะแนนรวม (60/40)' sortable w/ tooltip - F3: removed 05/บันทึกการวิเคราะห์ (redundant w/ theme panel) - F4: uniform section-kickers (stripped 07/ 05/) - F5: theme cards show long-form Thai narrative (auto: ยอดขายรถ+NPL tศัพท; energy/tourism) - F6: stock table has ธีม column (chips per symbol's themes) - F7: click row -> per-symbol modal showing themes + fundamentals + transparent combined derivation (theme_score×0.6 + siamchart×0.4) - Verified: browser modal for AOT shows 0.57×0.6 + -0.59×0.4 = 0.11 --- frontend/src/App.vue | 123 ++++++++++++++++++++++++++++++++++------- frontend/src/style.css | 28 ++++++++++ 2 files changed, 130 insertions(+), 21 deletions(-) diff --git a/frontend/src/App.vue b/frontend/src/App.vue index cff26f8..ab910e1 100644 --- a/frontend/src/App.vue +++ b/frontend/src/App.vue @@ -8,6 +8,9 @@ const factorData = ref(null) const themeData = ref(null) const dashData = ref(null) const simCapital = ref(1000000) +const selectedSymbol = ref(null) +const symbolDetail = ref(null) +const symbolLoading = ref(false) const simMode = ref('backtest') const simLoading = ref(false) const simResult = ref(null) @@ -55,6 +58,22 @@ const signalSummary = computed(() => { return { long: s?.long ?? 0, short: s?.short ?? 0, neutral: s?.neutral ?? 0, total: s?.total ?? 0 } }) const freqLabel = (f) => ({ monthly: 'รายเดือน', quarterly: 'รายไตรมาส', annual: 'รายปี', daily: 'รายวัน' })[f] || f +// theme id -> Thai label (for the theme column) +const themeLabelById = { + tourism: 'ท่องเที่ยว', auto_credit: 'รถยนต์/สินเชื่อ', refining_energy: 'พลังงาน', +} +// which themes a symbol belongs to (id + th label) +function symbolThemes(symbol) { + const out = [] + for (const t of dashboardThemes.value) { + if ((t.id === 'tourism' && ['AOT','CENTEL','MINT','AWC','ERW','CPN','CRC','BEM','BTS','SNNP','MAJOR','DHOUSE'].includes(symbol)) || + (t.id === 'auto_credit' && ['KKP','TISCO','TCAP','THANI','MTC','SAWAD','NSI','GLAND','THG','ASI','TGPRO','AEONTS','TK'].includes(symbol)) || + (t.id === 'refining_energy' && ['PTT','PTTGC','TOP','IRPC','SPRC','BCP','ESSO','BANPU','GPSC'].includes(symbol))) { + out.push(themeLabelById[t.id]) + } + } + return out +} const factorAvailable = computed(() => factorData.value?.available ?? false) const dividendCount = computed(() => factorData.value?.dividend_count ?? 0) const signalScoreCount = computed(() => factorRows.value.filter((f) => f.signal_side === 'LONG' || f.signal_side === 'SHORT').length) @@ -276,6 +295,23 @@ function chooseSignal(signal) { notice.value = '' } +async function openSymbolDetail(symbol) { + selectedSymbol.value = symbol + symbolDetail.value = null + symbolLoading.value = true + try { + symbolDetail.value = await fetchJson(`/api/v1/symbols/${symbol}`) + } catch (caught) { + symbolDetail.value = { error: caught.message, symbol } + } finally { + symbolLoading.value = false + } +} +function closeSymbolDetail() { + selectedSymbol.value = null + symbolDetail.value = null +} + async function unlockPaper() { if (!paperToken.value) { notice.value = 'Enter the paper-session token to unlock paper recording.' @@ -411,7 +447,7 @@ onMounted(loadDashboard)
-
Alternative factors · ข้อมูลไทย
+
ธีม

ธีม (Themes)

ภาพรวม alternative factors ของไทย — แต่ละธีมมีความถี่ข้อมูลต่างกัน (monthly / quarterly) ดังนั้นอย่าเทียบเป็นจุดเวลาเดียวกัน.

@@ -433,12 +469,12 @@ onMounted(loadDashboard)
กำไรสุทธิ TOP (รายไตรมาส)
signal tourism {{ theme.surprise != null ? formatNumber(theme.surprise,2) : '—' }}σ
-
{{ theme.thesis }}
+
{{ theme.narrative }}
-
ภาพรวมประเทศไทย (macro)
+
ภาพรวมประเทศไทย
การบริโภคภาคเอกชน {{ dashboardMacro.private_consumption_yoy }}% การลงทุนเอกชน {{ dashboardMacro.private_investment_yoy }}% @@ -452,7 +488,7 @@ onMounted(loadDashboard)
-
Alternative factors × SET50
+
ตารางหุ้น

ตารางหุ้น

ตารางเดียวรวมทุกธีม — สัญญาณ + คะแนนรวม (60% ธีม / 40% พื้นฐาน) + มูลค่าพื้นฐานจาก Siamchart. เรียงได้โดยคลิกหัวตาราง; เปิด เฉพาะหุ้นปันผล เพื่อกรองหุ้นที่จ่ายปันผล.

@@ -470,8 +506,9 @@ onMounted(loadDashboard) สัญญาณ {{ sortIndicator('signal_score') }} - รวม {{ sortIndicator('combined') }} + คะแนนรวม (60/40) {{ sortIndicator('combined') }} หุ้น {{ sortIndicator('symbol') }} + ธีม P/E {{ sortIndicator('pe') }} EPS {{ sortIndicator('eps') }} EPS YoY {{ sortIndicator('eps_growth_yoy') }} @@ -481,10 +518,14 @@ onMounted(loadDashboard) - + {{ factor.signal_side }}— {{ boardBySymbol[factor.symbol]?.combined != null ? formatNumber(boardBySymbol[factor.symbol].combined) : '—' }} {{ factor.symbol }} + + {{ th }} + — + {{ factor.pe != null ? formatNumber(factor.pe) : '—' }} {{ factor.eps != null ? formatNumber(factor.eps) : '—' }} {{ factor.eps_growth_yoy != null ? (factor.eps_growth_yoy >= 0 ? '+' : '') + formatNumber(factor.eps_growth_yoy) + '%' : '—' }} @@ -529,7 +570,7 @@ onMounted(loadDashboard)
-
07 / การจำลองการลงทุน
+
การจำลองการลงทุน

จัดสรรทุน (Simulation)

กรอกทุน และระบบจัดสรรตามสัดส่วน 50 / 20 / 30 — หุ้นที่ทำกำไรได้มากสุดแล้วจ่ายปันผล, หุ้นทำกำไรแต่ไม่ปันผล, และหุ้นปันผลสูงสุด (ไม่ซ้ำ) — ขั้นต่ำ 100 หุ้นต่อตัว.

@@ -595,21 +636,61 @@ onMounted(loadDashboard)
กด 'คำนวณการจัดสรร' เพื่อดูว่า 50/20/30 จัดสรรทุนของคุณไปที่หุ้นไหนบ้าง
-
-
-
05 / บันทึกการวิเคราะห์
-

อ่านสัญญาณเป็นสมมติฐาน (3 ธีม).

-
-
- {{ t.label_th }} - {{ t.thesis || '—' }} - {{ t.surprise != null ? formatNumber(t.surprise,2) + 'σ' : '—' }} -
-
-
ความต่าง (surprise) × การเข้าถึงธีม × ความเชื่อมั่น
-
-
+ + + +
+
+
+
+
การวิเคราะห์รายหุ้น
+

{{ selectedSymbol }}

+
+ +
+
กำลังโหลดการวิเคราะห์…
+
{{ symbolDetail.error }}
+
+
+
ธีมที่เกี่ยวข้อง
+
+ {{ themeLabelById[t] || t }} + surprise ต่อธีม +
+ {{ themeLabelById[c.theme] || c.theme }} + {{ formatNumber(c.surprise) }}σ +
+
+
ไม่มีธีมที่ชัดเจน (หุ้นนอกแผนที่ธีม)
+
+ +
+
มูลค่าพื้นฐาน (Siamchart)
+
+ P/E {{ symbolDetail.fundamentals?.pe ?? '—' }} + EPS {{ symbolDetail.fundamentals?.eps ?? '—' }} + P/BV {{ symbolDetail.fundamentals?.pbv ?? '—' }} + ROE {{ symbolDetail.fundamentals?.roe ?? '—' }} + ปันผล {{ symbolDetail.fundamentals?.is_dividend ? 'จ่าย' : '—' }} +
+
ภาพรวม: {{ symbolDetail.company_name || selectedSymbol }}
+
+ +
+
ที่มาของคะแนนรวม (โปร่งใส)
+ + + + + + +
คะแนนธีม (ธีม {{ symbolDetail.themes?.length || 0 }} ธีม){{ formatNumber(symbolDetail.theme_score) }}× {{ symbolDetail.weights?.theme }}
คะแนนพื้นฐาน (EPS + yield){{ formatNumber(symbolDetail.siamchart_score) }}× {{ symbolDetail.weights?.siamchart }}
คะแนนรวม = 60%×ธีม + 40%×พื้นฐาน{{ formatNumber(symbolDetail.combined_score) }}
+
ราคาล่าสุด: {{ symbolDetail.price?.latest != null ? formatNumber(symbolDetail.price.latest) : '—' }} ({{ symbolDetail.price?.date || '—' }})
+
+
+
+
diff --git a/frontend/src/style.css b/frontend/src/style.css index 5f355da..16cfab2 100644 --- a/frontend/src/style.css +++ b/frontend/src/style.css @@ -144,6 +144,34 @@ tbody tr:hover { background: rgba(255,255,255,.025); } .source-name { color: var(--accent); } .combined-cell { color: var(--mint); font-weight: 600; font-family: 'DM Mono', monospace; } +/* theme tag chips */ +.theme-tag { display: inline-block; margin: 2px 3px 2px 0; padding: 2px 6px; border-radius: 4px; background: rgba(63,161,255,.12); color: var(--accent); font-size: 10px; } +.theme-tag.large { font-size: 12px; padding: 4px 8px; } +.clickable-row { cursor: pointer; transition: background .15s ease; } +.clickable-row:hover { background: rgba(63,161,255,.06); } + +/* theme narrative (long-form) */ +.theme-narrative { font-size: 12px; line-height: 1.6; color: var(--text-2, #9aa); border-top: 1px dashed var(--line-bright); padding-top: 8px; margin-top: 8px; } + +/* per-symbol detail modal */ +.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; z-index: 50; overflow: auto; } +.modal-card { background: var(--card, #0e1218); border: 1px solid var(--line-bright); border-radius: 12px; max-width: 640px; width: 100%; padding: 20px; } +.modal-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; } +.modal-kicker { font: 700 10px 'DM Mono', monospace; color: var(--faint); letter-spacing: .08em; text-transform: uppercase; } +.modal-head h3 { font-size: 24px; margin: 4px 0 0; } +.modal-close { background: none; border: 1px solid var(--line-bright); color: var(--text); width: 30px; height: 30px; border-radius: 6px; cursor: pointer; } +.modal-body { display: flex; flex-direction: column; gap: 16px; } +.modal-section { border-top: 1px solid var(--line-weak, rgba(255,255,255,.06)); padding-top: 12px; } +.modal-section-title { font: 700 11px 'DM Mono', monospace; color: var(--faint); margin-bottom: 8px; } +.modal-sub { font-size: 11px; color: var(--faint); margin-top: 6px; } +.contrib-line { display: flex; justify-content: space-between; padding: 3px 0; font-size: 13px; } +.fund-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; font-size: 12px; } +.fund-grid span { background: rgba(255,255,255,.03); border-radius: 6px; padding: 6px 8px; } +.fund-grid strong { color: var(--text); font-family: 'DM Mono', monospace; } +.score-table { width: 100%; border-collapse: collapse; font-size: 13px; } +.score-table td { padding: 7px 6px; border-bottom: 1px solid var(--line-weak, rgba(255,255,255,.05)); } +.score-table tr.score-total td { border-top: 1px solid var(--line-bright); font-weight: 700; color: var(--mint); } + .thesis-list { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; } .thesis-row { display: flex; gap: 10px; align-items: baseline; padding-bottom: 8px; border-bottom: 1px solid var(--line-weak, rgba(255,255,255,.05)); } .thesis-theme { min-width: 130px; color: var(--accent); }