flask_tpm/templates/result_view.html

{% extends 'base.html' %}


{% block title %}Result View{% endblock %}
{% block style %}
{% endblock %}

{% block content %}
<div class="container-fluid" style="background-color: #eee;min-height:92%;position:relative;">
  <div class="container-fluid py-4">
    <div class="row d-flex justify-content-center align-items-center h-100">
      <div class="col-lg-12 col-xl-11">

        <div class="alert alert-light text-dark" role="alert">
          <div class="container">
            <div class="row">
              <div class="col-4">
                <strong>策略編號</strong>
              </div>
              <div class="col-6">
                {{ data.id|safe }}
              </div>
            </div>
            <hr>
            <div class="row">
              <div class="col-4">
                <strong>策略名稱</strong>
              </div>
              <div class="col-6">
                {{ data.name|safe }}
              </div>
            </div>
            <hr>
            <div class="row">
              <div class="col-4">
                <strong>建立者</strong>
              </div>
              <div class="col-6">
                {{ data.username|safe }}
              </div>
            </div>
            <hr>
            <div class="row">
              <div class="col-4">
                <strong>建立時間</strong>
              </div>
              <div class="col-6">
                {{ data.date|safe }}
              </div>
            </div>
            <hr>
            <div class="row">
              <div class="col-4">
                <strong>策略目標</strong>
              </div>
              <div class="col-6">
                {{ data.role|safe }}
              </div>
            </div>
            <hr>
            <div class="row">
              <div class="col-4">
                <strong>資產</strong>
              </div>
              <div class="col-6">
                {% for a in data.assets %}
                <span class="badge text-bg-warning asset" name="stock" value="{{ a|safe }}">{{ a|safe }}</span>
                {% endfor %}
                <a class="btn btn-outline-primary btn-sm" href="{{ url_for('copy_portfolio') }}">
                  複製投資組合
                </a>
              </div>
            </div>
            <div class="row">
              <button class="btn btn-secondary mt-3" type="button" data-bs-toggle="collapse" data-bs-target="#collapse1" aria-expanded="false" aria-controls="collapseExample">
                  詳細資訊
              </button>
              <div class="collapse" id="collapse1">
                <div card="card card-body m-3">
                  <div class="p-1 table-responsive-sm table-responsive-md table-responsive-xl">
                      <table class="table caption-top">
                          <thead>
                              <tr>
                                  <th scope="col">年化報酬率</th>
                                  <th scope="col">年化夏普率</th>
                                  <th scope="col">年化波動率</th>
                                  <th scope="col">最大回落</th>
                                  <th scope="col">Alpha</th>
                                  <th scope="col">Beta</th>
                                  <th scope="col">VaR10</th>
                                  <th scope="col">R2</th>
                                  {% if data.role == '最大化效用函數' %}
                                  <th scope="col">Gamma</th>
                                  {% endif %}
                              </tr>
                          </thead>
                          <thead style="font-size: 1vmin'">
                              <tr>
                                  <td>{{ data.annual_ret }}</td>
                                  <td>{{ data.annual_sr }}</td>
                                  <td>{{ data.vol }}</td>
                                  <td>{{ data.mdd }}</td>
                                  <td>{{ data.alpha }}</td>
                                  <td>{{ data.beta }}</td>
                                  <td>{{ data.var10 }}</td>
                                  <td>{{ data.r2 }}</td>
                                  {% if data.role == '最大化效用函數' %}
                                  <td>{{ data.gamma }}</td>
                                  {% endif %}
                              </tr>
                          </thead>
                      </table>
                  </div>
              </div>
              </div>
            </div>
          </div>
        </div>
        <div class="card mt-3 py-2" style="border-radius: 10px;">
          <div class="card-body p-0" style="border-radius: 10px;">
            <div class="row justify-content-center font-bold text-xl">
                資產權重變化
            </div>
            <div class="mb-4" id="weight" style="max-height:50vh"></div>
            <div class="row justify-content-center font-bold text-xl">
                投組價值走勢
            </div>
            <div class="mb-4" id="price" style="max-height:60vh"></div>
            <div class="row justify-content-center font-bold text-xl">
                投組季報酬率
            </div>
            <div class="mb-4" id="bar" style="max-height:60vh"></div>
          </div>
        </div>



      </div>
    </div>
  </div>
</div>

{% endblock %}

{% block script %}
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script type="text/javascript">
    const wlayout = {
    'autosize': true,
    'barmode': 'relative',
    'title': {'text': ''}, 
    'xaxis': {'anchor': 'y', 'domain': [0.0, 1.0], 'title':''}, 
    'yaxis': {'anchor': 'x', 'domain': [0.0, 1.0], 'title':''},
    'margin': {'l': 50, 'r': 50, 't': 10, 'b': 50},
    'legend': {'yanchor': 'bottom', 'y': 1.3, 'xanchor': 'left', 'x': 0, 'orientation':'h',
                'font': {'size':8}
  }
  };
    const rlayout = {
      'autosize': true,
      'title': {'text': ''}, 
      'xaxis': {'anchor': 'y', 'domain': [0.0, 1.0], 'title':'', 'rangeslider': {'visible': true}
      }, 
      'yaxis': {'anchor': 'x', 'domain': [0.0, 1.0], 'title':''},
      'margin': {'l': 40, 'r': 20, 't': 30, 'b': 50},
      'legend': {'yanchor': 'top', 'y': 1.3, 'xanchor': 'left', 'x': 0.01, 'orientation':'h'}
    };
    const blayout = {
      'autosize': true,
      'title': {'text': ''}, 
      'xaxis': {'anchor': 'y', 'domain': [0.0, 1.0], 'title':''}, 
      'yaxis': {'anchor': 'x', 'domain': [0.0, 1.0], 'title':''},
      'margin': {'l': 40, 'r': 20, 't': 50, 'b': 70},
      'legend': {'yanchor': 'top', 'y': 1.3, 'xanchor': 'left', 'x': 0.01, 'orientation':'h'}
    };
    var w = {{ data.weight|safe }};
    var r = {{ data.ret|safe }};
    var b = {{ data.bar|safe }};
    Plotly.newPlot("weight", w.data, wlayout, {responsive: true});
    Plotly.newPlot("price", r.data, rlayout, {responsive: true});
    Plotly.newPlot("bar", b.data, blayout, {responsive: true});
</script>
{% endblock script %}