{% extends 'base.html' %}


{% block title %}Result View{% endblock %}
{% block style %}
.card-body {
  <!-- background-image: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), url({{ url_for('static', filename='img/cat.png') }});
  background-attachment: fixed-bottom;
  background-position: right bottom -10px;
  background-repeat: no-repeat; -->
  <!-- background-size: 40%; -->
}
{% 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">{{ a|safe }}</span>
                {% endfor %}
              </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>
                              </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>
                              </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 src="https://code.highcharts.com/highcharts.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 %}