06/03 Optimize app

2026-06-03 16:22:02 -04:00
parent ec1c0fc7c1
commit eb85e70793
16 changed files with 406 additions and 5 deletions
@@ -74,6 +74,29 @@
        </div>
    </div>

+    {% if inv.ticker %}
+    <div class="col-12">
+        <div class="pcard">
+            <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
+                <div class="d-flex align-items-center gap-2 flex-wrap">
+                    <span class="pcard-title mb-0">Price History — <span class="mono">{{ inv.ticker }}</span></span>
+                    <span id="detail-chg" class="chg-badge chg-flat" style="display:none;"></span>
+                </div>
+                <div class="d-flex gap-1 flex-wrap">
+                    {% for tf in ['1W','1M','3M','6M','1Y'] %}
+                    <button class="tf-btn{% if tf == '1M' %} active{% endif %}"
+                            onclick="loadDetailChart('{{ tf }}')" id="tf-{{ tf }}">{{ tf }}</button>
+                    {% endfor %}
+                </div>
+            </div>
+            <div style="font-size:12px;color:var(--muted);margin-bottom:8px;" id="detail-info">Loading…</div>
+            <div style="position:relative;height:200px;">
+                <canvas id="detailCanvas"></canvas>
+            </div>
+        </div>
+    </div>
+    {% endif %}
+
    <div class="col-12 col-md-7">
        <div class="pcard p-0 h-100">
            <div class="d-flex justify-content-between align-items-center px-4 py-3" style="border-bottom:1px solid var(--border);">
@@ -128,3 +151,94 @@

 <a href="{{ url_for('investments.index') }}" class="btn btn-sm btn-outline-secondary"><i class="bi bi-arrow-left me-1"></i>Back to Portfolio</a>
 {% endblock %}
+
+{% block extra_css %}
+.tf-btn { font-size:11px;font-weight:600;padding:3px 10px;border-radius:4px;border:1px solid var(--border);background:#fff;color:var(--muted);cursor:pointer;transition:all .15s; }
+.tf-btn:hover { border-color:var(--accent);color:var(--accent); }
+.tf-btn.active { background:var(--accent);color:#fff;border-color:var(--accent); }
+.chg-badge { display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:600;font-family:'DM Mono',monospace;padding:2px 7px;border-radius:4px; }
+.chg-up { background:#d1fae5;color:#065f46; }
+.chg-down { background:#fee2e2;color:#991b1b; }
+.chg-flat { background:#f1f5f9;color:#64748b; }
+{% endblock %}
+
+{% if inv.ticker %}
+{% block extra_js %}
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.min.js"></script>
+<script>
+const sym = '{{ current_user.currency_symbol }}';
+const ticker = '{{ inv.ticker }}';
+let chartInst = null;
+
+function fmtP(v) {
+    const n = parseFloat(v);
+    return sym + Math.abs(n).toLocaleString(undefined, {minimumFractionDigits:2, maximumFractionDigits:4});
+}
+function fmtChg(c, p) {
+    const s = c >= 0 ? '+' : '';
+    return `${s}${fmtP(c)} (${s}${parseFloat(p).toFixed(2)}%)`;
+}
+function chgCls(v) { return v > 0 ? 'chg-up' : v < 0 ? 'chg-down' : 'chg-flat'; }
+
+function loadDetailChart(tf) {
+    // Update active button
+    document.querySelectorAll('.tf-btn').forEach(b =>
+        b.classList.toggle('active', b.id === 'tf-' + tf));
+
+    const infoEl = document.getElementById('detail-info');
+    infoEl.textContent = 'Loading…';
+
+    fetch(`{{ url_for('investments.api_price_history', ticker='__T__') }}`.replace('__T__', ticker) + '?tf=' + tf)
+        .then(r => r.ok ? r.json() : Promise.reject())
+        .then(data => {
+            infoEl.innerHTML =
+                `Current: <strong>${fmtP(data.current)}</strong> &nbsp;·&nbsp; ` +
+                `${({'1W':'1 Week','1M':'1 Month','3M':'3 Months','6M':'6 Months','1Y':'1 Year'}[tf]||tf)}: ` +
+                `<strong class="${data.period_change >= 0 ? 'text-income' : 'text-expense'}">${fmtChg(data.period_change, data.period_change_pct)}</strong>`;
+
+            const chgEl = document.getElementById('detail-chg');
+            chgEl.className = 'chg-badge ' + chgCls(data.period_change);
+            chgEl.innerHTML = `<i class="bi bi-${data.period_change >= 0 ? 'arrow-up' : 'arrow-down'}-short"></i>${fmtChg(data.period_change, data.period_change_pct)}`;
+            chgEl.style.display = '';
+
+            const lineColor = data.period_change >= 0 ? '#10b981' : '#ef4444';
+            const ctx = document.getElementById('detailCanvas').getContext('2d');
+            if (chartInst) chartInst.destroy();
+            chartInst = new Chart(ctx, {
+                type: 'line',
+                data: {
+                    labels: data.dates,
+                    datasets: [{
+                        data: data.closes,
+                        borderColor: lineColor,
+                        backgroundColor: lineColor + '18',
+                        borderWidth: 2,
+                        pointRadius: data.closes.length > 60 ? 0 : 2,
+                        pointHoverRadius: 4,
+                        tension: 0.3,
+                        fill: true,
+                    }]
+                },
+                options: {
+                    responsive: true, maintainAspectRatio: false,
+                    interaction: { mode: 'index', intersect: false },
+                    plugins: {
+                        legend: { display: false },
+                        tooltip: { callbacks: { label: c => ' ' + fmtP(c.parsed.y) } }
+                    },
+                    scales: {
+                        x: { grid: { display: false }, ticks: { font: { size: 10 }, maxTicksLimit: 8, maxRotation: 0 } },
+                        y: { position: 'right', grid: { color: '#f1f5f9' },
+                             ticks: { font: { size: 10 }, callback: v => sym + parseFloat(v).toLocaleString(undefined, {minimumFractionDigits: 2}) } }
+                    }
+                }
+            });
+        })
+        .catch(() => { infoEl.textContent = 'Price data unavailable.'; });
+}
+
+// Load 1M chart on page load
+loadDetailChart('1M');
+</script>
+{% endblock %}
+{% endif %}