charts
This commit is contained in:
parent
6b6b0ed552
commit
89daced3ad
|
@ -69,6 +69,10 @@ def battle_tick():
|
||||||
tick()
|
tick()
|
||||||
return jsonify({'status': 0, 'message': 'success', 'result': ''})
|
return jsonify({'status': 0, 'message': 'success', 'result': ''})
|
||||||
|
|
||||||
|
@app.route('/charts', methods=['GET'])
|
||||||
|
def charts():
|
||||||
|
return app.send_static_file("charts.html")
|
||||||
|
|
||||||
@app.route('/metrics', methods=['GET'])
|
@app.route('/metrics', methods=['GET'])
|
||||||
def metrics():
|
def metrics():
|
||||||
type = request.args.get('type')
|
type = request.args.get('type')
|
||||||
|
|
|
@ -0,0 +1,85 @@
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="https://cdn.staticfile.org/jquery/2.1.4/jquery.min.js"></script>
|
||||||
|
<script src="https://code.highcharts.com/highcharts.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="container_0" style="width: 80%; height: 400px; margin: 0 auto"></div>
|
||||||
|
<div id="container_1" style="width: 80%; height: 400px; margin: 0 auto"></div>
|
||||||
|
<div id="container_2" style="width: 80%; height: 400px; margin: 0 auto"></div>
|
||||||
|
<script>
|
||||||
|
$(document).ready(function () {
|
||||||
|
$.ajax({
|
||||||
|
url: "metrics?type=lite_resnet",
|
||||||
|
success: function (result) {
|
||||||
|
result = result.result
|
||||||
|
var i = 0
|
||||||
|
positions = ['landlord', 'landlord_down', 'landlord_front', 'landlord_up']
|
||||||
|
for (var rank in result) {
|
||||||
|
debugger
|
||||||
|
if (!result.hasOwnProperty(rank)) {
|
||||||
|
continue
|
||||||
|
}
|
||||||
|
var json = {
|
||||||
|
title: {
|
||||||
|
text: rank
|
||||||
|
},
|
||||||
|
subtitle: {
|
||||||
|
text: ''
|
||||||
|
},
|
||||||
|
}
|
||||||
|
categories = new Set()
|
||||||
|
$.map(positions, function (position) {
|
||||||
|
$.map(result[rank][position], function (_, frame){
|
||||||
|
categories.add(frame)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
categories = Array.from(categories).sort()
|
||||||
|
json.series = $.map(positions, function (position) {
|
||||||
|
if (!result[rank].hasOwnProperty(position)) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
name: position,
|
||||||
|
type: 'spline',
|
||||||
|
connectNulls: true,
|
||||||
|
data: $.map(categories, function (frame) {
|
||||||
|
if (result[rank][position].hasOwnProperty(frame)) {
|
||||||
|
return [[frame, parseFloat(result[rank][position][frame].wp) * 100]]
|
||||||
|
} else {
|
||||||
|
return [[frame, '-']]
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
json.xAxis = {
|
||||||
|
categories: categories
|
||||||
|
}
|
||||||
|
json.yAxis = {
|
||||||
|
title: {
|
||||||
|
text: 'Win Rate (%)'
|
||||||
|
},
|
||||||
|
plotLines: [{
|
||||||
|
value: 0,
|
||||||
|
width: 1,
|
||||||
|
color: '#808080'
|
||||||
|
}]
|
||||||
|
};
|
||||||
|
json.tooltip = {
|
||||||
|
valueSuffix: '%'
|
||||||
|
};
|
||||||
|
json.legend = {
|
||||||
|
layout: 'vertical',
|
||||||
|
align: 'right',
|
||||||
|
verticalAlign: 'middle',
|
||||||
|
borderWidth: 0
|
||||||
|
};
|
||||||
|
$('#container_' + i).highcharts(json);
|
||||||
|
i++
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
Loading…
Reference in New Issue