204 lines
7.7 KiB
Cheetah
204 lines
7.7 KiB
Cheetah
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Backtest Report</title>
|
|
<meta name="author" content="https://coolplay.website"/>
|
|
<meta name="description" content="Trade Backtest Report"/>
|
|
<meta charset="utf-8"/>
|
|
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
|
<script language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
|
|
<script language="javascript">
|
|
|
|
function drawTotalProfit(domID, source) {
|
|
let datas = [];
|
|
let labels = []
|
|
let totalProfit = 0;
|
|
let i = 0;
|
|
for (d in source){
|
|
totalProfit = source[d].TotalProfit;
|
|
if (totalProfit === 0){
|
|
continue;
|
|
}
|
|
datas.push(totalProfit);
|
|
labels.push(source[d].Time);
|
|
i++;
|
|
}
|
|
var ctx = document.getElementById(domID).getContext('2d');
|
|
var myChart = new Chart(ctx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: labels,
|
|
datasets: [{
|
|
label: 'Total Profit',
|
|
data: datas,
|
|
backgroundColor: ['rgba(54, 162, 235, 0.2)',
|
|
'rgba(255, 206, 86, 0.2)',
|
|
'rgba(75, 192, 192, 0.2)',
|
|
'rgba(153, 102, 255, 0.2)',
|
|
'rgba(255, 159, 64, 0.2)']
|
|
}],
|
|
|
|
},
|
|
options: {
|
|
}
|
|
});
|
|
}
|
|
|
|
function drawChart(domID, source, attr, title) {
|
|
let datas = [];
|
|
let labels = []
|
|
let i = 0;
|
|
for (d in source){
|
|
let data = source[d];
|
|
if (!data.IsFinish){
|
|
continue
|
|
}
|
|
let value = data[attr];
|
|
datas.push(value);
|
|
labels.push(source[d].Time);
|
|
i++;
|
|
}
|
|
var ctx = document.getElementById(domID).getContext('2d');
|
|
var myChart = new Chart(ctx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: labels,
|
|
datasets: [{
|
|
label: attr,
|
|
data: datas,
|
|
backgroundColor: ['rgba(255, 99, 132, 0.2)',
|
|
'rgba(54, 162, 235, 0.2)',
|
|
'rgba(255, 206, 86, 0.2)',
|
|
'rgba(75, 192, 192, 0.2)',
|
|
'rgba(153, 102, 255, 0.2)',
|
|
'rgba(255, 159, 64, 0.2)']
|
|
}],
|
|
|
|
},
|
|
options: {
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1 class="text-center">Trade backtest report</h1>
|
|
<div class="container">
|
|
<div class="form-group row">
|
|
<label for="totalAction" class="col-sm-6 col-form-label text-right">Total Actions:</label>
|
|
<div class="col-sm-4">
|
|
<input type="text" readonly class="form-control-plaintext" id="totalAction" value="{{.totalAction}}">
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label for="winRate" class="col-sm-6 col-form-label text-right">Win Rate:</label>
|
|
<div class="col-sm-4">
|
|
<input type="text" readonly class="form-control-plaintext" id="winRate" value="{{.winRate}}">
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label for="profit" class="col-sm-6 col-form-label text-right">Profit:</label>
|
|
<div class="col-sm-4">
|
|
<input type="text" readonly class="form-control-plaintext" id="profit" value="{{.profit}}">
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label for="maxDrawdown" class="col-sm-6 col-form-label text-right">Max drawdown percent: </label>
|
|
<div class="col-sm-4">
|
|
<input type="text" readonly class="form-control-plaintext" id="maxLose" value="{{.maxDrawdown}}%">
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label for="maxDrawdownValue" class="col-sm-6 col-form-label text-right">Max drawdown value: </label>
|
|
<div class="col-sm-4">
|
|
<input type="text" readonly class="form-control-plaintext" id="maxLose" value="{{.maxDrawdownValue}}">
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label for="maxLose" class="col-sm-6 col-form-label text-right">Max lose percent per round: </label>
|
|
<div class="col-sm-4">
|
|
<input type="text" readonly class="form-control-plaintext" id="maxLose" value="{{.maxLose}}%">
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label for="profitLoseRatio" class="col-sm-6 col-form-label text-right">Profit lose ratio: </label>
|
|
<div class="col-sm-4">
|
|
<input type="text" readonly class="form-control-plaintext" id="maxLose" value="{{.profitLoseRatio}}">
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label for="startBalance" class="col-sm-6 col-form-label text-right">Start Balance: </label>
|
|
<div class="col-sm-4">
|
|
<input type="text" readonly class="form-control-plaintext" id="startBalance" value="{{.startBalance}}">
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label for="endBalance" class="col-sm-6 col-form-label text-right">End Balance: </label>
|
|
<div class="col-sm-4">
|
|
<input type="text" readonly class="form-control-plaintext" id="endBalance" value="{{.endBalance}}">
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label for="profitPercent" class="col-sm-6 col-form-label text-right">Profit Percent: </label>
|
|
<div class="col-sm-4">
|
|
<input type="text" readonly class="form-control-plaintext" id="profitPercent" value="{{.profitPercent}}%">
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label for="profitVariance" class="col-sm-6 col-form-label text-right">Profit Variance: </label>
|
|
<div class="col-sm-4">
|
|
<input type="text" readonly class="form-control-plaintext" id="profitVariance" value="{{.profitVariance}}">
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label for="loseVariance" class="col-sm-6 col-form-label text-right">Lose Variance: </label>
|
|
<div class="col-sm-4">
|
|
<input type="text" readonly class="form-control-plaintext" id="loseVariance" value="{{.loseVariance}}">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<canvas id="profitChart" width="400" height="100"></canvas>
|
|
<canvas id="totalProfitChart" width="400" height="100"></canvas>
|
|
<canvas id="fundsChart" width="400" height="100"></canvas>
|
|
|
|
<h3 class="text-center">Trade detail</h3>
|
|
<table class="table">
|
|
<thead class="thead-dark">
|
|
<tr>
|
|
<th scope="col">Time</th>
|
|
<th scope="col">Action</th>
|
|
<th scope="col">Price</th>
|
|
<th scope="col">Amount</th>
|
|
<th scope="col">Total</th>
|
|
<th scope="col">Profit</th>
|
|
<th scope="col">Fee</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{{range .actions}}
|
|
<tr>
|
|
<td>{{.Time}}</td>
|
|
<td>{{.Action}}</td>
|
|
<td>{{.Price}}</td>
|
|
<td>{{.Amount}}</td>
|
|
<td>{{.Total}}</td>
|
|
<td>{{.Profit}}</td>
|
|
<td>{{.Fee}}</td>
|
|
</tr>
|
|
{{end}}
|
|
</table>
|
|
</div>
|
|
<script>
|
|
var actions = {{.actions}};
|
|
// drawProfit("profitChat", actions);
|
|
drawChart("profitChart", actions, "Profit", "Profit");
|
|
drawChart("totalProfitChart", actions, "TotalProfit", "TotalProfit");
|
|
drawChart("fundsChart", actions, "Total", "Funds");
|
|
// drawTotalProfit("totalProfitChat", actions);
|
|
// drawTotalProfit("fundsChat", actions);
|
|
</script>
|
|
</body>
|
|
</html>
|