Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width,initial-scale=1" /> | |
| <title>Vietnam Economic Growth Report — 2025 Dashboard</title> | |
| <!-- Fonts & Icons --> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" integrity="sha512-w3q7F3rj7q8qA1m3lKX8pR4pQGm6g5YV0w1N5aKxJr9b3p2Y6s8Zs5R6d3j4k1v2bW8z5c6d9f0g3h5k2j1g==" crossorigin="anonymous" referrerpolicy="no-referrer" /> | |
| <style> | |
| :root{ | |
| --bg:#0f1724; | |
| --card:#0b1220; | |
| --muted:#9aa4b2; | |
| --accent:#0ea5a4; | |
| --accent-2:#7c3aed; | |
| --glass: rgba(255,255,255,0.03); | |
| --success:#10b981; | |
| --danger:#ef4444; | |
| --gap: clamp(0.5rem, 0.9vw, 1.25rem); | |
| --radius: 12px; | |
| color-scheme: dark; | |
| } | |
| *{box-sizing:border-box} | |
| html,body{height:100%} | |
| body{ | |
| margin:0; | |
| font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial; | |
| background:linear-gradient(180deg,#071224 0%, #071422 45%, #04101b 100%); | |
| color: #e6eef6; | |
| -webkit-font-smoothing:antialiased; | |
| -moz-osx-font-smoothing:grayscale; | |
| padding: clamp(0.5rem,1.5vw,1.5rem); | |
| display:flex; | |
| flex-direction:column; | |
| gap:var(--gap); | |
| min-height:100%; | |
| } | |
| /* Layout */ | |
| .app{ | |
| display:grid; | |
| grid-template-columns: 1fr; | |
| gap:var(--gap); | |
| align-items:start; | |
| width:100%; | |
| max-width:1400px; | |
| margin:0 auto; | |
| } | |
| header{ | |
| background:linear-gradient(90deg, rgba(255,255,255,0.02), transparent); | |
| border-radius:var(--radius); | |
| padding: clamp(0.75rem,1.6vw,1.4rem); | |
| display:flex; | |
| gap:var(--gap); | |
| align-items:center; | |
| position:relative; | |
| overflow:hidden; | |
| } | |
| .brand{ | |
| display:flex; | |
| gap:0.75rem; | |
| align-items:center; | |
| min-width:0; | |
| } | |
| .logo{ | |
| width:56px;height:56px;border-radius:12px; | |
| background:linear-gradient(135deg,var(--accent),var(--accent-2)); | |
| display:flex;align-items:center;justify-content:center; | |
| font-weight:800;font-size:20px; | |
| box-shadow: 0 6px 18px rgba(15,120,120,0.15); | |
| } | |
| .title{ | |
| min-width:0; | |
| } | |
| .title h1{ | |
| margin:0;font-size:clamp(1rem,2.3vw,1.45rem);letter-spacing:-0.3px; | |
| font-weight:700; | |
| } | |
| .title p{margin:0;color:var(--muted);font-size:0.85rem} | |
| /* Controls */ | |
| .controls{margin-left:auto;display:flex;gap:0.5rem;align-items:center} | |
| .search{ | |
| display:flex;align-items:center;gap:0.5rem;background:var(--glass); | |
| padding:6px 10px;border-radius:10px;color:var(--muted); | |
| width:220px; | |
| } | |
| .search input{background:transparent;border:0;outline:none;color:inherit;font-size:0.95rem;width:100%} | |
| .btn{ | |
| background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); | |
| border:1px solid rgba(255,255,255,0.04); | |
| padding:8px 10px;border-radius:10px;color:inherit;cursor:pointer; | |
| display:inline-flex;gap:0.5rem;align-items:center;font-weight:600;font-size:0.9rem; | |
| } | |
| .btn.ghost{background:transparent;border:1px dashed rgba(255,255,255,0.03)} | |
| .btn.primary{background:linear-gradient(90deg,var(--accent),var(--accent-2)); color:#04111a;border:0} | |
| /* Main grid: TOC + content */ | |
| .main{ | |
| display:grid; | |
| grid-template-columns: 1fr; | |
| gap:var(--gap); | |
| } | |
| /* Sticky TOC for wide screens */ | |
| .layout{ | |
| display:grid; | |
| gap:var(--gap); | |
| grid-template-columns: 300px 1fr; | |
| } | |
| .toc{ | |
| position:sticky;top:calc(1rem + 16px);align-self:start; | |
| background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent); | |
| border-radius:var(--radius); | |
| padding:var(--gap); | |
| min-height:200px; | |
| display:flex;flex-direction:column;gap:0.75rem; | |
| font-size:0.95rem;color:var(--muted); | |
| } | |
| .toc h3{margin:0 0 0.25rem 0;font-size:0.95rem;color:#d9eef6} | |
| .toc nav{display:flex;flex-direction:column;gap:0.25rem} | |
| .toc a{ | |
| color:var(--muted);text-decoration:none;padding:6px 8px;border-radius:8px;display:flex;gap:8px;align-items:center; | |
| } | |
| .toc a.active, .toc a:hover{background:rgba(255,255,255,0.02);color:var(--accent);font-weight:600} | |
| /* Content */ | |
| .content{ | |
| display:grid;gap:var(--gap); | |
| } | |
| /* KPI strip */ | |
| .kpis{ | |
| display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap); | |
| } | |
| .kpi{ | |
| background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); | |
| padding:var(--gap);border-radius:var(--radius);display:flex;align-items:center;gap:0.75rem; | |
| min-height:84px; | |
| } | |
| .kpi .icon{width:52px;height:52px;border-radius:10px;background:rgba(255,255,255,0.02);display:flex;align-items:center;justify-content:center;font-size:1.2rem} | |
| .kpi h4{margin:0;font-size:1.05rem} | |
| .kpi p{margin:0;color:var(--muted);font-size:0.9rem} | |
| .kpi-grid{ | |
| display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap); | |
| } | |
| /* Cards */ | |
| .card{ | |
| background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); | |
| padding:var(--gap);border-radius:var(--radius);overflow:hidden; | |
| } | |
| .card h3{margin:0 0 0.5rem 0;font-size:1rem} | |
| .card .meta{color:var(--muted);font-size:0.9rem;margin-bottom:0.6rem} | |
| /* Charts area */ | |
| .charts{ | |
| display:grid; | |
| grid-template-columns: 1fr; | |
| gap:var(--gap); | |
| } | |
| .chart-row{ | |
| display:grid; | |
| grid-template-columns: 2fr 1fr; | |
| gap:var(--gap); | |
| } | |
| .mini-charts{ | |
| display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap); | |
| } | |
| /* Table */ | |
| table{width:100%;border-collapse:collapse;font-size:0.95rem} | |
| th,td{padding:10px 12px;text-align:left;border-bottom:1px dashed rgba(255,255,255,0.03)} | |
| th{color:var(--muted);font-weight:700;cursor:pointer} | |
| tr:hover td{background:rgba(255,255,255,0.01)} | |
| /* Collapsible */ | |
| .collapsible{border-radius:10px;overflow:hidden} | |
| .collapsible summary{ | |
| list-style:none;cursor:pointer;padding:10px;background:rgba(255,255,255,0.01);display:flex;justify-content:space-between;align-items:center;border:1px solid rgba(255,255,255,0.02) | |
| } | |
| .collapsible summary::-webkit-details-marker{display:none} | |
| /* References */ | |
| .sources{display:grid;gap:8px;font-size:0.92rem;color:var(--muted)} | |
| /* Progress & footer */ | |
| .progress-wrap{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:60;display:flex;gap:8px;align-items:center} | |
| .progress{width:260px;height:8px;background:rgba(255,255,255,0.03);border-radius:999px;overflow:hidden} | |
| .progress > i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));width:0%} | |
| footer{padding:10px 12px;border-radius:12px;background:transparent;color:var(--muted);display:flex;justify-content:space-between;align-items:center;font-size:0.9rem} | |
| /* Tooltips */ | |
| .tooltip{ | |
| position:fixed;pointer-events:none;padding:8px 10px;background:rgba(10,14,18,0.95);border:1px solid rgba(255,255,255,0.04); | |
| color:#dff6f5;border-radius:8px;font-size:0.9rem;transform:translate(-50%,-120%);white-space:nowrap;z-index:80;opacity:0;transition:opacity .15s ease; | |
| } | |
| /* Small screens adjustments */ | |
| @media (max-width:1024px){ | |
| .layout{grid-template-columns: 1fr} | |
| .toc{position:relative;top:0;order:2} | |
| .chart-row{grid-template-columns:1fr} | |
| .mini-charts{grid-template-columns:repeat(2,1fr)} | |
| .kpi-grid{grid-template-columns:repeat(2,1fr)} | |
| } | |
| @media (max-width:768px){ | |
| header{flex-direction:column;align-items:flex-start} | |
| .controls{width:100%;justify-content:space-between} | |
| .search{width:100%} | |
| .kpi-grid{grid-template-columns:1fr} | |
| .mini-charts{grid-template-columns:1fr} | |
| } | |
| /* Container queries */ | |
| .card[style]{ | |
| container-type: inline-size; | |
| } | |
| @container (min-width:420px){ | |
| .card h3{font-size:1.05rem} | |
| } | |
| /* Utility */ | |
| .muted{color:var(--muted)} | |
| .tag{padding:6px 8px;border-radius:999px;background:rgba(255,255,255,0.03);font-size:0.85rem;color:var(--muted)} | |
| .positive{color:var(--success);font-weight:700} | |
| .negative{color:var(--danger);font-weight:700} | |
| .small{font-size:0.85rem;color:var(--muted)} | |
| .legend{display:flex;gap:0.5rem;flex-wrap:wrap} | |
| .legend button{border:0;background:rgba(255,255,255,0.02);padding:6px 8px;border-radius:8px;color:var(--muted);cursor:pointer} | |
| </style> | |
| </head> | |
| <body> | |
| <div class="app" id="app"> | |
| <header> | |
| <div class="brand"> | |
| <div class="logo" aria-hidden>VN</div> | |
| <div class="title"> | |
| <h1>Vietnam Economic Growth Report — 2025</h1> | |
| <p>Executive analytics dashboard — KPIs, trends, sectoral insights & risk analysis</p> | |
| </div> | |
| </div> | |
| <div class="controls"> | |
| <div class="search" title="Search in report"> | |
| <i class="fa fa-magnifying-glass"></i> | |
| <input id="globalSearch" placeholder="Search report..." aria-label="Search report" /> | |
| </div> | |
| <button class="btn ghost" id="toggleTheme" title="Copy executive summary"><i class="fa fa-sun"></i></button> | |
| <button class="btn" id="copySummary" title="Copy executive summary"><i class="fa fa-copy"></i> Copy</button> | |
| <button class="btn primary" id="exportCsv" title="Export indicators CSV"><i class="fa fa-file-export"></i> Export</button> | |
| </div> | |
| </header> | |
| <main class="main"> | |
| <section class="layout"> | |
| <aside class="toc" id="toc"> | |
| <h3>Contents</h3> | |
| <nav> | |
| <a href="#executive" data-target="executive" class="active"><i class="fa fa-star"></i> Executive Summary</a> | |
| <a href="#kpis" data-target="kpis"><i class="fa fa-tachometer-alt"></i> Key Indicators</a> | |
| <a href="#charts" data-target="charts"><i class="fa fa-chart-line"></i> Charts & Trends</a> | |
| <a href="#sector" data-target="sector"><i class="fa fa-industry"></i> Sectoral Analysis</a> | |
| <a href="#risks" data-target="risks"><i class="fa fa-exclamation-triangle"></i> Risks & Mitigation</a> | |
| <a href="#methodology" data-target="methodology"><i class="fa fa-cogs"></i> Methodology</a> | |
| <a href="#references" data-target="references"><i class="fa fa-book"></i> Sources</a> | |
| </nav> | |
| <div style="margin-top:8px"> | |
| <div class="small muted">Jump to</div> | |
| <div style="display:flex;gap:6px;margin-top:6px"> | |
| <button class="btn ghost" id="backTop"><i class="fa fa-arrow-up"></i></button> | |
| <button class="btn ghost" id="saveView"><i class="fa fa-save"></i></button> | |
| </div> | |
| </div> | |
| </aside> | |
| <section class="content" id="content"> | |
| <article id="executive" class="card"> | |
| <h3>Executive Summary</h3> | |
| <div class="meta">High-level synthesis and context — 2025 performance highlights</div> | |
| <div style="display:flex;gap:var(--gap);flex-direction:column"> | |
| <p id="execText" class="small" style="line-height:1.5"> | |
| Vietnam's economy continues to demonstrate robust growth momentum in 2025, with GDP expanding 7.96% year-on-year in Q2 2025 and recording 7.52% growth for H1 2025 — the strongest mid-year result since 2011. Industry and services lead growth despite global trade tensions. Core fundamentals such as low unemployment, controlled inflation, and strong FDI inflows underpin near-term prospects, while external risks (tariffs, geopolitical instability) could moderate outcomes. Government targets remain ambitious relative to multilateral forecasts. | |
| </p> | |
| <div style="display:flex;gap:10px;flex-wrap:wrap"> | |
| <button class="btn" id="copyExec"><i class="fa fa-clipboard"></i> Copy Summary</button> | |
| <button class="btn ghost" id="downloadJson"><i class="fa fa-download"></i> Download JSON</button> | |
| <button class="btn" id="expandExec"><i class="fa fa-chevron-down"></i> Expand</button> | |
| </div> | |
| </div> | |
| </article> | |
| <section id="kpis" class="card"> | |
| <h3>Key Performance Indicators (KPIs)</h3> | |
| <div class="meta">Snapshot of main metrics — click to explore</div> | |
| <div class="kpi-grid" style="margin-top:var(--gap)"> | |
| <div class="kpi" data-kpi="gdp"> | |
| <div class="icon"><i class="fa fa-chart-simple"></i></div> | |
| <div> | |
| <h4 id="gdpNow">GDP H1 2025: 7.52%</h4> | |
| <p class="small">Q2 YoY: 7.96% • Q1: 6.9% • Government Target: 8.3–8.5%</p> | |
| </div> | |
| </div> | |
| <div class="kpi" data-kpi="inflation"> | |
| <div class="icon"><i class="fa fa-percent"></i></div> | |
| <div> | |
| <h4 id="inflNow">Inflation June 2025: 3.57%</h4> | |
| <p class="small">IMF: 2.9% • ADB: 4.0% — within 3–4.5% target</p> | |
| </div> | |
| </div> | |
| <div class="kpi" data-kpi="unemp"> | |
| <div class="icon"><i class="fa fa-briefcase"></i></div> | |
| <div> | |
| <h4 id="unempNow">Unemployment Q1 2025: 2.20%</h4> | |
| <p class="small">Stable, historically low labor-market figure</p> | |
| </div> | |
| </div> | |
| <div class="kpi" data-kpi="fdi"> | |
| <div class="icon"><i class="fa fa-hand-holding-dollar"></i></div> | |
| <div> | |
| <h4 id="fdiNow">FDI H1 2025: US$21.51B (+32.6% YoY)</h4> | |
| <p class="small">Registered capital (5 months): $18.4B; Disbursed: $8.9B</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="charts" class="card"> | |
| <h3>Charts & Trends</h3> | |
| <div class="meta">Interactive visualizations — hover, toggle and filter</div> | |
| <div class="charts" style="margin-top:var(--gap)"> | |
| <div class="chart-row"> | |
| <div class="card" id="gdpChartCard"> | |
| <h3>GDP Growth — Q1 (2020–2025) & H1 2025</h3> | |
| <div class="small muted">Year-on-year (%) — historical and short-run trend</div> | |
| <div id="gdpChart" style="height:260px;margin-top:12px"></div> | |
| <div style="display:flex;justify-content:space-between;align-items:center;margin-top:10px"> | |
| <div class="legend" id="gdpLegend"></div> | |
| <div> | |
| <button class="btn ghost" id="toggleSmooth">Toggle smoothing</button> | |
| <button class="btn" id="copyChartSvg"><i class="fa fa-clone"></i></button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <h3>Forecast Comparison 2025</h3> | |
| <div class="small muted">World Bank, ADB, IMF, Government</div> | |
| <div id="forecastBar" style="height:260px;margin-top:10px"></div> | |
| <div style="margin-top:10px" class="small muted">Click legend to highlight</div> | |
| </div> | |
| </div> | |
| <div class="mini-charts" style="margin-top:var(--gap)"> | |
| <div class="card"> | |
| <h3>Inflation (May–June 2025)</h3> | |
| <div class="small muted">Monthly CPI (%)</div> | |
| <div id="inflationSpark" style="height:140px;margin-top:12px"></div> | |
| </div> | |
| <div class="card"> | |
| <h3>FDI Inflows — H1 2025</h3> | |
| <div class="small muted">Registered vs Disbursed (US$B)</div> | |
| <div id="fdiDonut" style="height:140px;margin-top:12px"></div> | |
| </div> | |
| <div class="card"> | |
| <h3>Retail Sales Q1 2025</h3> | |
| <div class="small muted">1.708 quadrillion VND — YoY growth 9.9%</div> | |
| <div style="margin-top:12px"> | |
| <div class="tag">Consumption-led recovery</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="sector" class="card"> | |
| <h3>Sectoral Analysis</h3> | |
| <div class="meta">Drivers, traction and structural context</div> | |
| <div style="display:grid;grid-template-columns:1fr;gap:var(--gap);margin-top:var(--gap)"> | |
| <div class="collapsible"> | |
| <details open> | |
| <summary> | |
| <div style="display:flex;gap:10px;align-items:center"> | |
| <strong>Primary Growth Drivers</strong> | |
| <div class="small muted">Services, Manufacturing, Exports, Banking</div> | |
| </div> | |
| <i class="fa fa-chevron-down"></i> | |
| </summary> | |
| <div style="padding:12px"> | |
| <ul class="small muted"> | |
| <li><strong>Services:</strong> Leading contributor to GDP growth in H1 2025.</li> | |
| <li><strong>Manufacturing:</strong> Recovery supported by foreign investment and export demand.</li> | |
| <li><strong>Exports:</strong> Remain the backbone despite trade tensions.</li> | |
| <li><strong>Banking:</strong> Projected +17% earnings growth in 2025 based on credit growth of 15%.</li> | |
| </ul> | |
| <div style="margin-top:10px"> | |
| <button class="btn ghost" id="drillSector">Drill into sectors</button> | |
| </div> | |
| </div> | |
| </details> | |
| </div> | |
| <div class="card"> | |
| <h3>Comparative Industry Snapshot</h3> | |
| <div class="small muted">Normalized contributions & narrative insights</div> | |
| <div style="margin-top:12px" id="sectorBars" style="height:160px"></div> | |
| <div style="margin-top:8px" class="small muted">Hover bars for details • Click to pin insight</div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="risks" class="card"> | |
| <h3>Challenges & Risk Factors</h3> | |
| <div class="meta">Scenario-aware planning and mitigation options</div> | |
| <ul class="small muted" style="margin-top:12px"> | |
| <li><strong>Global trade tensions:</strong> Potential export slowdowns.</li> | |
| <li><strong>US tariff policies:</strong> Pressure on export-oriented firms.</li> | |
| <li><strong>Geopolitics:</strong> Elevated uncertainty for supply chains.</li> | |
| <li><strong>FDI concentration:</strong> Overdependence risks and inflationary pressure.</li> | |
| <li><strong>Macroeconomic trade-offs:</strong> Growth vs. inflation and public debt.</li> | |
| </ul> | |
| <div style="display:flex;gap:8px;margin-top:12px"> | |
| <button class="btn" id="mitigateBtn"><i class="fa fa-lightbulb"></i> Mitigation strategies</button> | |
| <button class="btn ghost" id="scenarioBtn"><i class="fa fa-sliders-h"></i> Run scenario</button> | |
| </div> | |
| </section> | |
| <section id="methodology" class="card"> | |
| <h3>Methodology</h3> | |
| <div class="meta">Data processing, assumptions & limitations</div> | |
| <ol class="small muted" style="margin-top:12px"> | |
| <li>Data aggregated from cited sources (GSO, IMF, ADB, Trading Economics).</li> | |
| <li>YoY calculations based on official quarterly releases; forecasts compared across institutions.</li> | |
| <li>Charts use normalized scaling for cross-metric comparison; interactivity does not alter source raw values.</li> | |
| <li>Limitations: near-real-time revisions possible; cross-check with primary sources recommended.</li> | |
| </ol> | |
| </section> | |
| <section id="references" class="card"> | |
| <h3>Sources & Citations</h3> | |
| <div class="meta">Primary sources used to compile this dashboard</div> | |
| <div class="sources" style="margin-top:12px"> | |
| <a href="https://tradingeconomics.com/vietnam/gdp-growth-annual" target="_blank">Trading Economics — Vietnam GDP</a> | |
| <a href="https://www.imf.org/en/Countries/VNM" target="_blank">IMF — Vietnam Country Profile</a> | |
| <a href="https://www.gso.gov.vn/en/" target="_blank">General Statistics Office of Vietnam</a> | |
| <a href="https://www.adb.org/countries/viet-nam/main" target="_blank">Asian Development Bank — Vietnam</a> | |
| <a href="https://vneconomictimes.com/" target="_blank">Vietnam Economic Times</a> | |
| </div> | |
| </section> | |
| <section id="appendices" class="card"> | |
| <h3>Appendices</h3> | |
| <div class="meta">Extended tables & raw figures</div> | |
| <div style="margin-top:12px;overflow:auto"> | |
| <table id="dataTable"> | |
| <thead> | |
| <tr> | |
| <th data-key="metric">Metric</th> | |
| <th data-key="q1">Q1 2025</th> | |
| <th data-key="q2">Q2 2025</th> | |
| <th data-key="h1">H1 2025</th> | |
| <th data-key="note">Note</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td>GDP Growth (YoY)</td> | |
| <td>6.9%</td> | |
| <td>7.96%</td> | |
| <td>7.52%</td> | |
| <td>Strong industry & services</td> | |
| </tr> | |
| <tr> | |
| <td>Inflation</td> | |
| <td>—</td> | |
| <td>3.57% (June)</td> | |
| <td>—</td> | |
| <td>May: 3.24%</td> | |
| </tr> | |
| <tr> | |
| <td>Unemployment</td> | |
| <td>2.20%</td> | |
| <td>—</td> | |
| <td>—</td> | |
| <td>Q1 2025</td> | |
| </tr> | |
| <tr> | |
| <td>FDI (Registered, 5 months)</td> | |
| <td colspan="2">$18.4B (registered)</td> | |
| <td>$21.51B (H1 total)</td> | |
| <td>+32.6% YoY</td> | |
| </tr> | |
| <tr> | |
| <td>Retail Sales</td> | |
| <td colspan="3">1.708 quadrillion VND (Q1) — 9.9% YoY</td> | |
| <td>Consumption growth</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <div style="display:flex;gap:8px;margin-top:8px"> | |
| <button class="btn" id="exportTableCsv"><i class="fa fa-file-csv"></i> Export CSV</button> | |
| <button class="btn ghost" id="sortTable"><i class="fa fa-sort"></i> Sort GDP rows</button> | |
| </div> | |
| </div> | |
| </section> | |
| </section> | |
| </section> | |
| <div style="display:flex;gap:var(--gap);flex-wrap:wrap;align-items:center;justify-content:space-between"> | |
| <div class="small muted">Last updated: 2025 • Dashboard generated from report text</div> | |
| <div style="display:flex;gap:8px"> | |
| <div class="small muted">Saved view: <span id="savedLabel">none</span></div> | |
| </div> | |
| </div> | |
| </main> | |
| <div class="progress-wrap" aria-hidden> | |
| <div class="progress"><i id="progBar"></i></div> | |
| <div class="tag small muted" id="progPct">0%</div> | |
| </div> | |
| <div class="tooltip" id="tooltip" role="tooltip" aria-hidden="true"></div> | |
| <footer> | |
| <div>© Vietnam Economic Dashboard — 2025</div> | |
| <div class="small muted">Built with Web APIs • Interactive • Single-file</div> | |
| </footer> | |
| </div> | |
| <script> | |
| /*************** | |
| * Data model | |
| ***************/ | |
| const DATA = { | |
| historyQ1: [ | |
| {year:2020, q1:3.21}, | |
| {year:2021, q1:4.85}, | |
| {year:2022, q1:5.42}, | |
| {year:2023, q1:3.46}, | |
| {year:2024, q1:5.98}, | |
| {year:2025, q1:6.93} | |
| ], | |
| q2025: {q1:6.9, q2:7.96, h1:7.52}, | |
| forecasts: [ | |
| {name:"World Bank", value:5.8, color:"#0ea5a4"}, | |
| {name:"ADB", value:6.6, color:"#7c3aed"}, | |
| {name:"IMF", value:5.2, color:"#f59e0b"}, | |
| {name:"Government", value:8.4, color:"#ef4444"} | |
| ], | |
| inflation: [ | |
| {label:"May 2025", value:3.24}, | |
| {label:"June 2025", value:3.57} | |
| ], | |
| unemployment_q1:2.20, | |
| fdi: { | |
| registered_5m:18.4, | |
| disbursed_5m:8.9, | |
| total_h1:21.51, | |
| yoy:32.6 | |
| }, | |
| retail_q1_vnd:1708, // trillion? using quadrillion as textual; keep numeric for note | |
| sectorShares: [ | |
| {name:"Services", value:45, color:"#06b6d4"}, | |
| {name:"Manufacturing", value:30, color:"#7c3aed"}, | |
| {name:"Exports", value:15, color:"#34d399"}, | |
| {name:"Banking", value:10, color:"#f97316"} | |
| ] | |
| }; | |
| /******************* | |
| * Utilities | |
| *******************/ | |
| function el(sel){return document.querySelector(sel)} | |
| function els(sel){return Array.from(document.querySelectorAll(sel))} | |
| // Smooth scroll for TOC links | |
| els('.toc a').forEach(a=>{ | |
| a.addEventListener('click', (e)=>{ | |
| e.preventDefault(); | |
| const id = a.getAttribute('data-target'); | |
| const node = el('#'+id); | |
| if(node) node.scrollIntoView({behavior:'smooth', block:'start'}); | |
| els('.toc a').forEach(x=>x.classList.remove('active')); a.classList.add('active'); | |
| }); | |
| }); | |
| // Back to top & save view | |
| el('#backTop').addEventListener('click', ()=>window.scrollTo({top:0,behavior:'smooth'})); | |
| el('#saveView').addEventListener('click', ()=>{ | |
| const view = { | |
| timestamp: Date.now(), | |
| filters: {highlight:el('#globalSearch').value||null} | |
| }; | |
| localStorage.setItem('vn_report_view', JSON.stringify(view)); | |
| el('#savedLabel').textContent = new Date(view.timestamp).toLocaleString(); | |
| flash('Saved view'); | |
| }); | |
| // Load saved view if present | |
| (function(){ | |
| const v = localStorage.getItem('vn_report_view'); | |
| if(v){ try{ | |
| const view = JSON.parse(v); | |
| el('#savedLabel').textContent = new Date(view.timestamp).toLocaleString(); | |
| }catch(e){}} | |
| })(); | |
| // Simple flash notification using tooltip element | |
| function flash(text, ms=1200){ | |
| const t = el('#tooltip'); | |
| t.textContent = text; t.style.opacity=1; t.style.transform='translate(-50%,-60%)'; | |
| t.style.left = '50%'; t.style.top='20%'; | |
| setTimeout(()=>{t.style.opacity=0}, ms); | |
| } | |
| /******************* | |
| * Search & highlight | |
| *******************/ | |
| el('#globalSearch').addEventListener('input', (e)=>{ | |
| const q = e.target.value.trim().toLowerCase(); | |
| if(!q){ // clear highlights | |
| els('.content *').forEach(n=>n.style.outline=''); | |
| return; | |
| } | |
| // naive search: highlight elements containing text | |
| els('.content p, .content li, .content td, .content h3, .content .small').forEach(node=>{ | |
| const txt = node.textContent.toLowerCase(); | |
| if(txt.includes(q)){ | |
| node.style.outline = '2px solid rgba(14,165,164,0.15)'; | |
| } else { | |
| node.style.outline = ''; | |
| } | |
| }); | |
| }); | |
| /******************* | |
| * Copy executive summary & export | |
| *******************/ | |
| const execText = el('#execText').textContent.trim(); | |
| el('#copyExec').addEventListener('click', async ()=>{ | |
| try{ | |
| await navigator.clipboard.writeText(execText); | |
| flash('Executive summary copied'); | |
| }catch(e){flash('Unable to copy')}; | |
| }); | |
| el('#copySummary').addEventListener('click', async ()=>{ | |
| const fullText = `Vietnam Economic Growth Report 2025 — Executive Summary:\n\n${execText}\n\nSources: GSO, IMF, ADB, Trading Economics`; | |
| try{ await navigator.clipboard.writeText(fullText); flash('Summary copied'); }catch(e){ flash('Copy failed') } | |
| }); | |
| el('#downloadJson').addEventListener('click', ()=>{ | |
| const payload = { | |
| summary: execText, | |
| data: DATA, | |
| generated: new Date().toISOString() | |
| }; | |
| const blob = new Blob([JSON.stringify(payload, null, 2)], {type:'application/json'}); | |
| const url = URL.createObjectURL(blob); | |
| const a = document.createElement('a'); a.href=url; a.download = 'vn-economic-report-2025.json'; a.click(); | |
| URL.revokeObjectURL(url); | |
| flash('JSON downloaded'); | |
| }); | |
| // Export CSV (indicators) | |
| function csvFromTable(rows){ | |
| return rows.map(r => r.map(c => `"${String(c).replace(/"/g,'""')}"`).join(',')).join('\n'); | |
| } | |
| el('#exportCsv').addEventListener('click', ()=>{ | |
| const rows = [ | |
| ['Metric','Q1 2025','Q2 2025','H1 2025','Note'], | |
| ['GDP Growth (YoY)', DATA.q2025.q1+'%', DATA.q2025.q2+'%', DATA.q2025.h1+'%','Strong industry & services'], | |
| ['Inflation','May: 3.24%','June: 3.57%','','IMF:2.9%, ADB:4.0%'], | |
| ['Unemployment','2.20%','','','Q1 2025'], | |
| ['FDI','Registered (5 months) $18.4B','Disbursed $8.9B','Total H1 $21.51B','+32.6% YoY'] | |
| ]; | |
| const csv = csvFromTable(rows); | |
| const blob = new Blob([csv], {type:'text/csv'}); | |
| const link = document.createElement('a'); | |
| link.href = URL.createObjectURL(blob); | |
| link.download = 'vn_indicators_2025.csv'; | |
| link.click(); | |
| URL.revokeObjectURL(link.href); | |
| flash('CSV exported'); | |
| }); | |
| // Export table CSV | |
| el('#exportTableCsv').addEventListener('click', ()=>{ | |
| const tbody = Array.from(el('#dataTable tbody').rows); | |
| const rows = [['Metric','Q1 2025','Q2 2025','H1 2025','Note']]; | |
| tbody.forEach(r=>{ | |
| const cells = Array.from(r.cells).map(c=>c.textContent.trim()); | |
| rows.push(cells); | |
| }); | |
| const csv = csvFromTable(rows); | |
| const blob = new Blob([csv], {type:'text/csv'}); | |
| const a = document.createElement('a'); a.href=URL.createObjectURL(blob); a.download='vn_appendix.csv'; a.click(); | |
| URL.revokeObjectURL(a.href); | |
| flash('Table CSV exported'); | |
| }); | |
| // Sort table (basic) | |
| el('#sortTable').addEventListener('click', ()=>{ | |
| const tbody = el('#dataTable tbody'); | |
| const rows = Array.from(tbody.querySelectorAll('tr')); | |
| // sort by numeric in first numeric-like cell (attempt) | |
| rows.sort((a,b)=>{ | |
| const ta = a.cells[1].textContent.match(/[\d\.]+/); | |
| const tb = b.cells[1].textContent.match(/[\d\.]+/); | |
| const na = ta? parseFloat(ta[0]) : 0; | |
| const nb = tb? parseFloat(tb[0]) : 0; | |
| return nb - na; | |
| }); | |
| rows.forEach(r=>tbody.appendChild(r)); | |
| flash('Table sorted'); | |
| }); | |
| /******************* | |
| * Intersection observer for reveal & progress | |
| *******************/ | |
| const progBar = el('#progBar'), progPct = el('#progPct'); | |
| function updateProgress(){ | |
| const doc = document.documentElement; | |
| const top = doc.scrollTop || document.body.scrollTop; | |
| const h = doc.scrollHeight - doc.clientHeight; | |
| const pct = Math.round((top/h)*100); | |
| progBar.style.width = pct + '%'; | |
| progPct.textContent = pct + '%'; | |
| } | |
| window.addEventListener('scroll', updateProgress); | |
| window.addEventListener('resize', updateProgress); | |
| updateProgress(); | |
| // Reveal animations using IntersectionObserver | |
| const observer = new IntersectionObserver((entries)=>{ | |
| entries.forEach(entry=>{ | |
| if(entry.isIntersecting){ | |
| entry.target.style.transform = 'translateY(0)'; | |
| entry.target.style.opacity = 1; | |
| observer.unobserve(entry.target); | |
| } | |
| }); | |
| }, {threshold:0.12}); | |
| // apply to cards | |
| els('.card').forEach(c=>{ | |
| c.style.opacity=0; c.style.transform='translateY(10px)'; c.style.transition='opacity .6s ease, transform .6s ease'; | |
| observer.observe(c); | |
| }); | |
| /******************* | |
| * Simple SVG charting functions | |
| *******************/ | |
| function createSVG(width, height){ | |
| const svgNS = "http://www.w3.org/2000/svg"; | |
| const svg = document.createElementNS(svgNS,'svg'); | |
| svg.setAttribute('width','100%'); | |
| svg.setAttribute('viewBox',`0 0 ${width} ${height}`); | |
| svg.setAttribute('preserveAspectRatio','none'); | |
| svg.style.display='block'; | |
| return svg; | |
| } | |
| // Line chart for GDP q1 history | |
| function drawGDPLine(elm, data, opts={}){ | |
| elm.innerHTML=''; | |
| const w = 760, h = 260, pad = 36; | |
| const svg = createSVG(w,h); | |
| const svgNS = "http://www.w3.org/2000/svg"; | |
| const values = data.map(d => d.q1); | |
| const minVal = Math.min(...values) - 1; | |
| const maxVal = Math.max(...values) + 1; | |
| const xStep = (w - pad*2) / (data.length - 1); | |
| // grid lines | |
| for(let i=0;i<5;i++){ | |
| const y = pad + i*(h - pad*2)/4; | |
| const line = document.createElementNS(svgNS,'line'); | |
| line.setAttribute('x1',pad); line.setAttribute('x2',w-pad); | |
| line.setAttribute('y1',y); line.setAttribute('y2',y); | |
| line.setAttribute('stroke','rgba(255,255,255,0.03)'); | |
| line.setAttribute('stroke-width','1'); | |
| svg.appendChild(line); | |
| } | |
| // path | |
| const pts = data.map((d,i)=>{ | |
| const x = pad + i*xStep; | |
| const y = pad + (1 - (d.q1 - minVal)/(maxVal - minVal))*(h - pad*2); | |
| return [x,y]; | |
| }); | |
| // optionally do smoothing | |
| const pathData = opts.smooth ? catmullRom2bezier(pts) : ('M '+pts.map(p=>p.join(' ')).join(' L ')); | |
| const path = document.createElementNS(svgNS,'path'); | |
| path.setAttribute('d', pathData); | |
| path.setAttribute('fill','none'); | |
| path.setAttribute('stroke','url(#ggrad)'); | |
| path.setAttribute('stroke-width','3'); | |
| path.setAttribute('stroke-linejoin','round'); | |
| path.setAttribute('stroke-linecap','round'); | |
| svg.appendChild(path); | |
| // gradient | |
| const defs = document.createElementNS(svgNS,'defs'); | |
| defs.innerHTML = `<linearGradient id="ggrad" x1="0" x2="1" y1="0" y2="0"> | |
| <stop offset="0%" stop-color="${DATA.forecasts[0].color}" /> | |
| <stop offset="100%" stop-color="${DATA.forecasts[1].color}" /> | |
| </linearGradient>`; | |
| svg.appendChild(defs); | |
| // points & labels & hover | |
| const gPoints = document.createElementNS(svgNS,'g'); | |
| pts.forEach((p,i)=>{ | |
| const c = document.createElementNS(svgNS,'circle'); | |
| c.setAttribute('cx',p[0]); c.setAttribute('cy',p[1]); c.setAttribute('r',4); | |
| c.setAttribute('fill','#fff'); c.setAttribute('stroke','rgba(0,0,0,0.2)'); c.setAttribute('stroke-width',1); | |
| c.style.cursor='pointer'; | |
| c.addEventListener('mouseenter', (ev)=>showTip(`${data[i].year} Q1: ${data[i].q1}%`, ev.clientX, ev.clientY)); | |
| c.addEventListener('mouseleave', hideTip); | |
| gPoints.appendChild(c); | |
| // year labels | |
| const t = document.createElementNS(svgNS,'text'); | |
| t.setAttribute('x', p[0]); t.setAttribute('y', h - 6); | |
| t.setAttribute('font-size', '10'); t.setAttribute('text-anchor','middle'); | |
| t.setAttribute('fill','rgba(255,255,255,0.6)'); | |
| t.textContent = data[i].year; | |
| svg.appendChild(t); | |
| }); | |
| svg.appendChild(gPoints); | |
| // axis left values | |
| for(let i=0;i<5;i++){ | |
| const v = (maxVal - i*(maxVal - minVal)/4).toFixed(1); | |
| const y = pad + i*(h - pad*2)/4; | |
| const t = document.createElementNS(svgNS,'text'); | |
| t.setAttribute('x',6); t.setAttribute('y', y+4); | |
| t.setAttribute('font-size','10'); t.setAttribute('fill','rgba(255,255,255,0.6)'); | |
| t.textContent = v + '%'; | |
| svg.appendChild(t); | |
| } | |
| elm.appendChild(svg); | |
| } | |
| // Simple bar chart for forecasts | |
| function drawForecastBar(elm, data){ | |
| elm.innerHTML=''; | |
| const w = 360, h = 240, pad=40; | |
| const svg = createSVG(w,h); | |
| const svgNS="http://www.w3.org/2000/svg"; | |
| const max = Math.max(...data.map(d=>d.value)) + 1; | |
| const bw = (w - pad*2)/data.length - 8; | |
| data.forEach((d,i)=>{ | |
| const x = pad + i*((w - pad*2)/data.length) + 4; | |
| const y = pad + (1 - d.value/max)*(h - pad*2); | |
| const rect = document.createElementNS(svgNS,'rect'); | |
| rect.setAttribute('x', x); rect.setAttribute('y', y); | |
| rect.setAttribute('width', bw); rect.setAttribute('height', h - pad - y); | |
| rect.setAttribute('fill', d.color); | |
| rect.style.cursor='pointer'; | |
| rect.addEventListener('mouseenter', (ev)=>showTip(`${d.name}: ${d.value}%`, ev.clientX, ev.clientY)); | |
| rect.addEventListener('mouseleave', hideTip); | |
| rect.addEventListener('click', ()=>flash(`${d.name} highlighted`)); | |
| svg.appendChild(rect); | |
| const t = document.createElementNS(svgNS,'text'); | |
| t.setAttribute('x', x + bw/2); t.setAttribute('y', h - 8); t.setAttribute('text-anchor','middle'); | |
| t.setAttribute('font-size','11'); t.setAttribute('fill','rgba(255,255,255,0.8)'); | |
| t.textContent = d.name; | |
| svg.appendChild(t); | |
| }); | |
| elm.appendChild(svg); | |
| } | |
| // Small sparkline for inflation | |
| function drawSparkline(elm, data){ | |
| elm.innerHTML=''; | |
| const w = 320, h = 120, pad=20; | |
| const svg = createSVG(w,h); const NS="http://www.w3.org/2000/svg"; | |
| const values = data.map(d=>d.value); | |
| const max = Math.max(...values)+0.5; | |
| const min = Math.min(...values)-0.5; | |
| const step = (w - pad*2)/(values.length-1); | |
| const pts = values.map((v,i)=>[pad + i*step, pad + (1-(v-min)/(max-min))*(h - pad*2)]); | |
| // path | |
| const dpath = 'M '+pts.map(p=>p.join(' ')).join(' L '); | |
| const path = document.createElementNS(NS,'path'); path.setAttribute('d',dpath); path.setAttribute('fill','none'); | |
| path.setAttribute('stroke','url(#g2)'); path.setAttribute('stroke-width','2'); | |
| svg.appendChild(path); | |
| const defs = document.createElementNS(NS,'defs'); | |
| defs.innerHTML = `<linearGradient id="g2"><stop offset="0%" stop-color="${DATA.forecasts[0].color}"/><stop offset="100%" stop-color="${DATA.forecasts[2].color}"/></linearGradient>`; | |
| svg.appendChild(defs); | |
| pts.forEach((p,i)=>{ | |
| const c = document.createElementNS(NS,'circle'); c.setAttribute('cx',p[0]); c.setAttribute('cy',p[1]); c.setAttribute('r',3); c.setAttribute('fill','#fff'); | |
| c.addEventListener('mouseenter', (ev)=>showTip(`${data[i].label}: ${data[i].value}%`, ev.clientX, ev.clientY)); | |
| c.addEventListener('mouseleave', hideTip); | |
| svg.appendChild(c); | |
| }); | |
| elm.appendChild(svg); | |
| } | |
| // Donut chart for FDI breakdown | |
| function drawDonut(elm, reg, disb){ | |
| elm.innerHTML=''; | |
| const w = 320, h = 140; const NS="http://www.w3.org/2000/svg"; | |
| const svg = createSVG(w,h); | |
| const cx = w/2, cy = h/2, r = 48; | |
| const total = Math.max(reg, disb); | |
| const vals = [{name:'Registered',v:reg,color:'#06b6d4'},{name:'Disbursed',v:disb,color:'#7c3aed'}]; | |
| let angle = -90; | |
| vals.forEach(v=>{ | |
| const slice = (v.v/total)*360; | |
| const [x1,y1] = pol(angle, r, cx, cy); | |
| angle += slice; | |
| const [x2,y2] = pol(angle, r, cx, cy); | |
| const large = slice>180?1:0; | |
| const d = `M ${cx} ${cy} L ${x1} ${y1} A ${r} ${r} 0 ${large} 1 ${x2} ${y2} z`; | |
| const p = document.createElementNS(NS,'path'); p.setAttribute('d',d); p.setAttribute('fill',v.color); | |
| p.addEventListener('mouseenter', (ev)=>showTip(`${v.name}: $${v.v}B`, ev.clientX, ev.clientY)); | |
| p.addEventListener('mouseleave', hideTip); | |
| svg.appendChild(p); | |
| }); | |
| // centre label | |
| const text = document.createElementNS(NS,'text'); text.setAttribute('x',cx); text.setAttribute('y',cy+6); | |
| text.setAttribute('text-anchor','middle'); text.setAttribute('font-size','12'); text.setAttribute('fill','rgba(255,255,255,0.9)'); | |
| text.textContent = `${DATA.fdi.total_h1}B (H1)`; | |
| svg.appendChild(text); | |
| elm.appendChild(svg); | |
| } | |
| // Sector bars | |
| function drawSectorBars(elm, data){ | |
| elm.innerHTML=''; | |
| const w = 680, h = 140, pad=20; | |
| const svg = createSVG(w,h); const NS="http://www.w3.org/2000/svg"; | |
| const max = Math.max(...data.map(d=>d.value)); | |
| const bw = (w - pad*2)/data.length - 12; | |
| data.forEach((d,i)=>{ | |
| const x = pad + i*((w - pad*2)/data.length) + 6; | |
| const barH = (d.value/max)*(h - pad*2); | |
| const y = h - pad - barH; | |
| const rect = document.createElementNS(NS,'rect'); | |
| rect.setAttribute('x',x); rect.setAttribute('y',y); rect.setAttribute('height',barH); rect.setAttribute('width',bw); | |
| rect.setAttribute('rx',6); rect.setAttribute('fill',d.color); | |
| rect.addEventListener('mouseenter', (ev)=>showTip(`${d.name}: ${d.value}% share`, ev.clientX, ev.clientY)); | |
| rect.addEventListener('mouseleave', hideTip); | |
| rect.addEventListener('click', ()=>flash(`${d.name} pinned`)); | |
| svg.appendChild(rect); | |
| const t = document.createElementNS(NS,'text'); t.setAttribute('x', x + bw/2); t.setAttribute('y', h - 6); | |
| t.setAttribute('text-anchor','middle'); t.setAttribute('font-size','11'); t.setAttribute('fill','rgba(255,255,255,0.8)'); | |
| t.textContent = d.name; | |
| svg.appendChild(t); | |
| }); | |
| elm.appendChild(svg); | |
| } | |
| // Helpers | |
| function pol(angleDeg, r, cx, cy){ | |
| const rad = angleDeg * Math.PI/180; | |
| return [cx + r*Math.cos(rad), cy + r*Math.sin(rad)]; | |
| } | |
| function showTip(text, x, y){ | |
| const t = el('#tooltip'); | |
| t.textContent = text; | |
| t.style.opacity = 1; | |
| t.style.left = (x)+'px'; | |
| t.style.top = (y - 16)+'px'; | |
| t.setAttribute('aria-hidden','false'); | |
| } | |
| function hideTip(){ const t = el('#tooltip'); t.style.opacity = 0; t.setAttribute('aria-hidden','true'); } | |
| // Catmull-Rom spline smoothing to bezier | |
| function catmullRom2bezier(pts){ | |
| // pts: array of [x,y] | |
| let d = ''; | |
| for(let i=0;i<pts.length-1;i++){ | |
| const p0 = i==0 ? pts[i] : pts[i-1]; | |
| const p1 = pts[i]; | |
| const p2 = pts[i+1]; | |
| const p3 = i+2<pts.length ? pts[i+2] : p2; | |
| const bp1x = p1[0] + (p2[0] - p0[0]) / 6; | |
| const bp1y = p1[1] + (p2[1] - p0[1]) / 6; | |
| const bp2x = p2[0] - (p3[0] - p1[0]) / 6; | |
| const bp2y = p2[1] - (p3[1] - p1[1]) / 6; | |
| if(i==0) d += 'M '+p1[0]+' '+p1[1]; | |
| d += ' C '+bp1x+' '+bp1y+','+bp2x+' '+bp2y+','+p2[0]+' '+p2[1]; | |
| } | |
| return d; | |
| } | |
| /******************* | |
| * Initial draw | |
| *******************/ | |
| function renderAll(){ | |
| drawGDPLine(el('#gdpChart'), DATA.historyQ1.map(d=>({year:d.year, q1:d.q1})), {smooth:false}); | |
| drawForecastBar(el('#forecastBar'), DATA.forecasts); | |
| drawSparkline(el('#inflationSpark'), DATA.inflation); | |
| drawDonut(el('#fdiDonut'), DATA.fdi.registered_5m, DATA.fdi.disbursed_5m); | |
| drawSectorBars(el('#sectorBars'), DATA.sectorShares); | |
| // legend for GDP chart | |
| const lg = el('#gdpLegend'); lg.innerHTML=''; | |
| DATA.forecasts.slice(0,2).forEach(f=>{ | |
| const btn = document.createElement('button'); | |
| btn.textContent = f.name; btn.style.borderLeft = '4px solid ' + f.color; | |
| btn.addEventListener('click', ()=>flash(f.name + ' selected')); | |
| lg.appendChild(btn); | |
| }); | |
| } | |
| renderAll(); | |
| // Toggle smoothing | |
| let smooth = false; | |
| el('#toggleSmooth').addEventListener('click', ()=>{ | |
| smooth = !smooth; | |
| drawGDPLine(el('#gdpChart'), DATA.historyQ1.map(d=>({year:d.year, q1:d.q1})), {smooth}); | |
| flash(smooth ? 'Smoothing enabled' : 'Smoothing disabled'); | |
| }); | |
| // Copy chart SVG (gdp chart) | |
| el('#copyChartSvg').addEventListener('click', async ()=>{ | |
| const svgEl = el('#gdpChart svg'); | |
| if(!svgEl){ flash('No chart'); return; } | |
| const s = new XMLSerializer().serializeToString(svgEl); | |
| try{ | |
| await navigator.clipboard.writeText(s); | |
| flash('Chart SVG copied to clipboard'); | |
| }catch(e){ flash('Copy failed') } | |
| }); | |
| /******************* | |
| * Interactive drill | |
| *******************/ | |
| el('#drillSector').addEventListener('click', ()=>{ | |
| // quick filter: highlight services card | |
| flash('Services prioritized: monitor urban services & tourism'); | |
| }); | |
| // scenario button: quick scenario simulation using simple scaling | |
| el('#scenarioBtn').addEventListener('click', ()=>{ | |
| // simulate a downside: global shock reduces exports by 3pp | |
| const sim = {...DATA.q2025}; | |
| const drop = 0.9; | |
| const newH1 = +(sim.h1 * drop).toFixed(2); | |
| el('#gdpNow').textContent = `Simulated H1: ${newH1}% (stress)`; | |
| flash('Scenario applied: -10% to H1 growth (exports shock)'); | |
| setTimeout(()=>{ el('#gdpNow').textContent = `GDP H1 2025: ${DATA.q2025.h1}%`; flash('Scenario cleared') }, 3500); | |
| }); | |
| // Mitigation strategies button | |
| el('#mitigateBtn').addEventListener('click', ()=>{ | |
| alert('Recommended mitigation:\n- Diversify export markets\n- Strengthen domestic demand\n- Preserve macro stability\n- Use fiscal buffers to cushion shocks\n- Leverage FDI into high-value sectors'); | |
| }); | |
| /******************* | |
| * Clipboard copy summary via header theme toggle as extra functionality | |
| *******************/ | |
| el('#toggleTheme').addEventListener('click', async ()=>{ | |
| // toggles accent color and also copies a mini summary to clipboard | |
| document.documentElement.style.setProperty('--accent', getRandomColor()); | |
| try{ await navigator.clipboard.writeText('Vietnam — strong H1 2025: GDP H1 7.52%, Q2 7.96%'); flash('Mini-summary copied'); }catch(e){flash('Accent changed') } | |
| }); | |
| function getRandomColor(){ | |
| const colors = ['#06b6d4','#f59e0b','#ef4444','#7c3aed','#0ea5a4']; | |
| return colors[Math.floor(Math.random()*colors.length)]; | |
| } | |
| /******************* | |
| * Accessibility & keyboard shortcuts | |
| *******************/ | |
| window.addEventListener('keydown', (e)=>{ | |
| if(e.ctrlKey && e.key === 'k'){ | |
| e.preventDefault(); | |
| el('#globalSearch').focus(); | |
| } | |
| if(e.ctrlKey && e.key === 'b'){ | |
| e.preventDefault(); el('#backTop').click(); | |
| } | |
| }); | |
| /******************* | |
| * Final touches: adaptive text content from data | |
| *******************/ | |
| // populate dynamic KPI text | |
| el('#gdpNow').textContent = `GDP H1 2025: ${DATA.q2025.h1}%`; | |
| el('#inflNow').textContent = `Inflation June 2025: ${DATA.inflation[1].value}%`; | |
| el('#unempNow').textContent = `Unemployment Q1 2025: ${DATA.unemployment_q1.toFixed(2)}%`; | |
| el('#fdiNow').textContent = `FDI H1 2025: US$${DATA.fdi.total_h1}B (+${DATA.fdi.yoy}% YoY)`; | |
| // Simple cross-reference linking: clicking KPI scrolls to charts | |
| els('.kpi').forEach(k=>{ | |
| k.style.cursor='pointer'; | |
| k.addEventListener('click', ()=>{ | |
| const which = k.getAttribute('data-kpi'); | |
| if(which === 'gdp') el('#charts').scrollIntoView({behavior:'smooth'}); | |
| if(which === 'inflation') el('#charts').scrollIntoView({behavior:'smooth'}); | |
| if(which === 'fdi') el('#sector').scrollIntoView({behavior:'smooth'}); | |
| }); | |
| }); | |
| // On load, small animation | |
| setTimeout(()=>flash('Dashboard ready'), 600); | |
| </script> | |
| </body> | |
| </html> |