You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
165 lines
8.3 KiB
165 lines
8.3 KiB
3 years ago
|
{% extends 'base.html' %}
|
||
|
|
{% set active_page = 'strategy_tw' %}
|
||
|
|
|
||
|
|
|
||
|
|
{% block title %}Strategy Page{% endblock%}
|
||
|
|
{% block style %}
|
||
|
|
.input-group{
|
||
|
|
border: 1px solid #8E8E8E;
|
||
|
|
border-radius: 7px;
|
||
|
|
}
|
||
|
|
.input-group > span{
|
||
|
|
bg-dark;
|
||
|
|
font-bold;
|
||
|
|
}
|
||
|
|
{% endblock style %}
|
||
|
|
|
||
|
|
{% block content %}
|
||
|
|
<div class="container-md">
|
||
|
|
<div class="container-md m-2">
|
||
|
|
<div class="card mb-3">
|
||
|
|
<img src="{{ url_for("static", filename="img/stock.jpeg") }}" class="card-img-top" alt="...">
|
||
|
|
<div class="card-body">
|
||
|
|
<h5 class="card-title text-xl font-bold">投資組合建立步驟</h5>
|
||
|
|
<ol class="list-group list-group-flush list-group-numbered">
|
||
|
|
<li class="list-group-item"><span class="ps-2">輸入投資組合名稱</span></li>
|
||
|
|
<li class="list-group-item"><span class="ps-2">選擇所參加的課程或競賽</span></li>
|
||
|
|
<li class="list-group-item"><span class="ps-2">選擇資產 (可使用搜索功能篩選)</span></li>
|
||
|
|
<li class="list-group-item"><span class="ps-2">確認資產後按下 "確認資產", 查看資產價格動態圖表</span></li>
|
||
|
|
<li class="list-group-item"><span class="ps-2">選擇訓練 / 回測數據比例與最佳化目標函數</span></li>
|
||
|
|
<li class="list-group-item"><span class="ps-2">確認後按下 "建立投資組合", 查看回傳訊息</span></li>
|
||
|
|
</ol>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="input-group mb-1 flex-nowrap">
|
||
|
|
<span class="input-group-text" id="addon-wrapping">投資組合名稱</span>
|
||
|
|
<input name="portName" type="text" class="form-control" placeholder="EX. 空軍一號" aria-label="" aria-describedby="addon-wrapping" required>
|
||
|
|
</div>
|
||
|
|
<div class="input-group mb-3">
|
||
|
|
<span class="input-group-text" id="inputGroup-sizing-default">請選擇所參加的課程/競賽</span>
|
||
|
|
<select id="competition" class="form-select" size="1" aria-label="size 5 select example">
|
||
|
|
{% include 'competitions.html' %}
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div class="input-group mb-1" >
|
||
|
|
<span class="input-group-text" id="search1">搜尋</span>
|
||
|
|
<input id="search" type="text" class="form-control" placeholder="輸入資產代號" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
|
||
|
|
<span class="input-group-text" id="inputGroup-sizing-default">下方加入資產</span>
|
||
|
|
</div>
|
||
|
|
<div class="input-group mb-3">
|
||
|
|
<span class="input-group-text" id="inputGroup-sizing-default">請選擇資產</span>
|
||
|
|
<select id="stock-select" class="form-select" size="2" aria-label="size 5 select example">
|
||
|
|
{% for key, data in stockOpts.items() -%}
|
||
|
|
<option value="{{ key|e }}">{{ key|e }} | {{ data[0]|e }} | {{ data[2]|e }} ~</option>
|
||
|
|
{% endfor %}
|
||
|
|
</select>
|
||
|
|
|
||
|
|
<button class="btn btn-secondary"
|
||
|
|
type="button"
|
||
|
|
id="addStockBtn">
|
||
|
|
加入
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<div class="card" >
|
||
|
|
<div class="card-header d-flex">
|
||
|
|
<div class="py-2 font-bold text-xl">
|
||
|
|
已選擇的資產
|
||
|
|
</div>
|
||
|
|
<div class="btn-group ms-auto">
|
||
|
|
<button type="button" class="btn btn-outline-primary " id="submit-btn">
|
||
|
|
確認資產
|
||
|
|
</button>
|
||
|
|
<button type="button" class="btn btn-outline-danger" id="submit-port">
|
||
|
|
確認建立
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="card-body">
|
||
|
|
<div class="input-group mb-3">
|
||
|
|
<span class="input-group-text me-auto bg-info" id="inputGroup3">請選擇訓練 / 回測數據比例 / 最佳化目標函數</span>
|
||
|
|
<select id="ratio-select" class="form-select" size="1" aria-label="">
|
||
|
|
<option value="0.5">5:5</option>
|
||
|
|
<option value="0.6">6:4</option>
|
||
|
|
<option selected value="0.7">7:3</option>
|
||
|
|
<option value="0.8">8:2</option>
|
||
|
|
<option value="0.9">9:1</option>
|
||
|
|
</select>
|
||
|
|
<select id="role-select" class="form-select" size="1" aria-label="">
|
||
|
|
<option selected value="max_sharpe">最大化夏普比率</option>
|
||
|
|
<option value="max_sortino">最大化索提諾比率</option>
|
||
|
|
<option value="min_volatility">最小化波動率</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<ol class="list-group list-group-numbered" id="stock-list" type="1">
|
||
|
|
<li class="list-group-item">
|
||
|
|
<span class="px-2">2330.TW | 台積電 | 2000-01-05 ~</span>
|
||
|
|
<a class="btn btn-sm btn-danger float-right delete-btn">
|
||
|
|
<i class="fas fa-trash-alt"></i>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
</ol>
|
||
|
|
</div>
|
||
|
|
<hr class="my-3">
|
||
|
|
<div id="graph" style="border-radius: 10px;"></div>
|
||
|
|
</div>
|
||
|
|
<div class="modal" id="portModal" tabindex="-1">
|
||
|
|
<div class="modal-dialog">
|
||
|
|
<div class="modal-content">
|
||
|
|
<div class="modal-header">
|
||
|
|
<h5 class="modal-title font-bold text-xl">確認建立投資組合</h5>
|
||
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||
|
|
</div>
|
||
|
|
<div class="modal-body">
|
||
|
|
<span>
|
||
|
|
確認後將會暫時關閉建立按鈕，請等待完成訊息！
|
||
|
|
</span>
|
||
|
|
<ol class="list-group list-group-flush list-group-numbered">
|
||
|
|
<li class="list-group-item"><span class="ps-2">輸入投資組合名稱</span></li>
|
||
|
|
<li class="list-group-item"><span class="ps-2">選擇所參加的課程或競賽</span></li>
|
||
|
|
<li class="list-group-item"><span class="ps-2">選擇資產 (可使用搜索功能篩選)</span></li>
|
||
|
|
<li class="list-group-item"><span class="ps-2">確認資產後按下 "確認資產", 查看資產價格動態圖表</span></li>
|
||
|
|
<li class="list-group-item"><span class="ps-2">選擇訓練/測試集比率, 確認後按下 "建立投資組合", 查看回傳訊息</span></li>
|
||
|
|
</ol>
|
||
|
|
<div class="input-group">
|
||
|
|
<span class="input-group-text">輸入筆記</span>
|
||
|
|
<textarea id="commentPort" class="form-control" aria-label="With textarea"></textarea>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="modal-footer">
|
||
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
|
||
|
|
<button id="sendPort" type="button" class="btn btn-primary" data-bs-dismiss="modal">確認</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="modal" id="confirmModal" tabindex="-1">
|
||
|
|
<div class="modal-dialog">
|
||
|
|
<div class="modal-content">
|
||
|
|
<div class="modal-header">
|
||
|
|
<h5 class="modal-title font-bold text-xl">開始建立投資組合</h5>
|
||
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||
|
|
</div>
|
||
|
|
<div class="modal-body">
|
||
|
|
<span id="confirmMes">投資組合已開始建立，請1分鐘後至結果分析查詢。</span>
|
||
|
|
</div>
|
||
|
|
<div class="modal-footer">
|
||
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">確認</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{% endblock %}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
{% block script %}
|
||
|
|
<script src="{{ url_for('static', filename='js/addStock.js') }}"></script>
|
||
|
|
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
|
||
|
|
{% endblock script %}
|
||
|
|
|