vn-stock-analysis-app/templates/vsa.html

{% extends "base.html" %}

{% block title %}Phân tích VSA - {{ symbol if symbol else 'Dòng tiền' }}{% endblock %}

{% block og_title %}Phân tích VSA - {{ symbol if symbol else 'Dòng tiền' }}{% endblock %}
{% block twitter_title %}Phân tích VSA - {{ symbol if symbol else 'Dòng tiền' }}{% endblock %}

{% block head %}
<style>
    .chart-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: 20px;
    }
    .chart-grid canvas {
        width: 100% !important;
        height: 300px;
        background: #fff;
        padding: 10px;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    }
    .form-inline {
        display: flex;
        align-items: center;
        gap: 15px;
        flex-wrap: wrap;
    }
</style>
{% endblock %}

{% block header_title %}
    Phân tích Dòng tiền & VSA - {{ symbol if symbol else 'Chọn cổ phiếu' }}
{% endblock %}

{% block content %}
<div class="card">
    <div class="form-inline">
        <form action="{{ url_for('vsa.vsa_index') }}" method="get" class="d-flex align-items-center gap-2">
            <label for="stock-symbol">Mã cổ phiếu:</label>
            <input type="text" id="stock-symbol" name="symbol" value="{{ symbol or 'VCB' }}" class="form-control">
            <button id="analyze-button" type="submit" class="btn btn-primary">Phân tích</button>
        </form>
        <form id="update-financial-form" action="{{ url_for('api_update_financial_data', symbol=symbol) }}" method="post" class="d-flex">
            <input type="hidden" id="update-symbol" name="symbol" value="{{ symbol or 'VCB' }}">
            <button id="update-financial-btn" type="submit" class="btn btn-secondary">Tải dữ liệu mới</button>
        </form>
    </div>
</div>

<div class="card">
    <h3>Biểu đồ Phân tích</h3>
    <div class="chart-grid">
        <canvas id="priceChart"></canvas>
        <canvas id="volumeChart"></canvas>
        <canvas id="pvChart"></canvas>
        <p><b>Price Volume (PV)</b>: Tích số giá và khối lượng. Đường ngang ở mức 0 là ngưỡng trung bình. PV trên 0 cho thấy dòng tiền vào, dưới 0 cho thấy dòng tiền ra.</p>
        <canvas id="mfiChart"></canvas>
        <p><b>Money Flow Index (MFI)</b>: Chỉ số dòng tiền. Đường ngang ở mức 50 là ngưỡng trung bình. MFI trên 50 cho thấy áp lực mua, dưới 50 cho thấy áp lực bán.</p>
    </div>
    <div id="analysis-results" class="mt-3"></div>
</div>

<div class="card">
    <h3>Định giá & Chỉ số tài chính ({{ financial_valuation.year if financial_valuation.year else '' }})</h3>
    {% if symbol and symbol.upper() == 'VNINDEX' %}
        <div class="alert alert-info">
            <i class="fas fa-info-circle"></i> Chỉ số <b>VNINDEX</b> không có dữ liệu tài chính doanh nghiệp.
        </div>
    {% elif financial_valuation.error %}
        <div class="alert alert-danger">{{ financial_valuation.error }}</div>
    {% else %}
        <ul class="list-group list-group-flush">
            <li class="list-group-item d-flex justify-content-between"><span>Giá đóng cửa cuối năm:</span> <strong>{{ financial_valuation.close_price | round(2) if financial_valuation.close_price else 'N/A' }}</strong></li>
            <li class="list-group-item d-flex justify-content-between"><span>P/E:</span> <strong>{{ financial_valuation.pe if financial_valuation.pe else 'N/A' }}</strong></li>
            <li class="list-group-item d-flex justify-content-between"><span>P/B:</span> <strong>{{ financial_valuation.pb if financial_valuation.pb else 'N/A' }}</strong></li>
            <li class="list-group-item d-flex justify-content-between"><span>ROE (%):</span> <strong>{{ financial_valuation.roe if financial_valuation.roe else 'N/A' }}</strong></li>
            <li class="list-group-item d-flex justify-content-between"><span>EPS:</span> <strong>{{ financial_valuation.eps if financial_valuation.eps else 'N/A' }}</strong></li>
        </ul>
    {% endif %}
</div>

<div class="card">
    <h3>Phân tích tự động với Groq AI</h3>
    <form id="gemini-form">
        <input type="hidden" name="symbol" value="{{ symbol }}">
        <div class="mb-3">
            <input type="text" name="question" class="form-control" placeholder="Nhập câu hỏi về dữ liệu tài chính (tùy chọn)">
        </div>
        <button type="submit" class="btn btn-info">Phân tích với AI <span id="ai-loading" class="spinner" style="display:none;"></span></button>
    </form>
    <div id="gemini-result" class="alert alert-light mt-3">Kết quả phân tích sẽ hiển thị ở đây.</div>
</div>
{% endblock %}

{% block scripts %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script type="module" src="{{ url_for('static', filename='js/app.js') }}"></script>
<script src="{{ url_for('static', filename='js/vsa.js') }}"></script>
{% endblock %}