2021-12-27 10:10:41 +08:00
|
|
|
<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>
|
2021-12-27 18:00:04 +08:00
|
|
|
<select id='model_type'>
|
|
|
|
|
<option value ="lite_resnet">lite_resnet</option>
|
|
|
|
|
<option value ="lite_vanilla">lite_vanilla</option>
|
|
|
|
|
<option value ="legacy_vanilla">legacy_vanilla</option>
|
|
|
|
|
</select>
|
2021-12-27 10:10:41 +08:00
|
|
|
<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>
|
2021-12-27 16:56:45 +08:00
|
|
|
position_map = {
|
|
|
|
|
'landlord': '地主',
|
|
|
|
|
'landlord_down': '地主下家',
|
|
|
|
|
'landlord_front': '地主对家',
|
|
|
|
|
'landlord_up': '地主上家',
|
|
|
|
|
}
|
2021-12-27 18:00:04 +08:00
|
|
|
function load_charts(model_type){
|
2021-12-27 10:10:41 +08:00
|
|
|
$.ajax({
|
2021-12-27 18:00:04 +08:00
|
|
|
url: "metrics?type=" + model_type,
|
2021-12-27 10:10:41 +08:00
|
|
|
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: {
|
2021-12-27 11:22:49 +08:00
|
|
|
text: 'Baseline: ' + rank
|
2021-12-27 10:10:41 +08:00
|
|
|
},
|
|
|
|
|
subtitle: {
|
2021-12-27 16:56:45 +08:00
|
|
|
text: 'WP: ' + result[rank]['baseline'].landlord_wp + '\t/\t' + result[rank]['baseline'].farmer_wp + ' ' +
|
|
|
|
|
'ADP: ' + result[rank]['baseline'].landlord_adp + '\t/\t' + result[rank]['baseline'].farmer_adp + '<br/>' +
|
2021-12-27 11:22:49 +08:00
|
|
|
result[rank]['baseline'].landlord_path + '\t/\t' +
|
|
|
|
|
result[rank]['baseline'].landlord_down_path + '\t/\t' +
|
|
|
|
|
result[rank]['baseline'].landlord_front_path + '\t/\t' +
|
|
|
|
|
result[rank]['baseline'].landlord_up_path
|
2021-12-27 10:10:41 +08:00
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
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;
|
|
|
|
|
}
|
2021-12-27 16:56:45 +08:00
|
|
|
return [{
|
|
|
|
|
name: position_map[position] + " WP",
|
2021-12-27 10:10:41 +08:00
|
|
|
type: 'spline',
|
|
|
|
|
connectNulls: true,
|
2021-12-27 16:56:45 +08:00
|
|
|
yAxis: 0,
|
|
|
|
|
tooltip: {
|
2021-12-27 16:58:46 +08:00
|
|
|
pointFormat: position_map[position] + " WP: {point.y:.2f}%<br>"
|
2021-12-27 16:56:45 +08:00
|
|
|
},
|
2021-12-27 10:10:41 +08:00
|
|
|
data: $.map(categories, function (frame) {
|
|
|
|
|
if (result[rank][position].hasOwnProperty(frame)) {
|
2021-12-27 16:56:45 +08:00
|
|
|
return [[frame, (parseFloat(result[rank][position][frame].wp) * 100)]]
|
2021-12-27 10:10:41 +08:00
|
|
|
} else {
|
2021-12-27 18:00:04 +08:00
|
|
|
return [[frame, null]]
|
2021-12-27 10:10:41 +08:00
|
|
|
}
|
|
|
|
|
})
|
2021-12-27 16:56:45 +08:00
|
|
|
}, {
|
|
|
|
|
name: position_map[position] + " ADP",
|
|
|
|
|
type: 'spline',
|
|
|
|
|
connectNulls: true,
|
|
|
|
|
yAxis: 1,
|
|
|
|
|
visible: false,
|
|
|
|
|
tooltip: {
|
2021-12-27 16:58:46 +08:00
|
|
|
pointFormat: position_map[position] + " ADP: {point.y:.2f}<br>"
|
2021-12-27 16:56:45 +08:00
|
|
|
},
|
|
|
|
|
data: $.map(categories, function (frame) {
|
|
|
|
|
if (result[rank][position].hasOwnProperty(frame)) {
|
|
|
|
|
return [[frame, parseFloat(result[rank][position][frame].adp)]]
|
|
|
|
|
} else {
|
2021-12-27 18:00:04 +08:00
|
|
|
return [[frame, null]]
|
2021-12-27 16:56:45 +08:00
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}]
|
2021-12-27 10:10:41 +08:00
|
|
|
})
|
|
|
|
|
json.xAxis = {
|
|
|
|
|
categories: categories
|
|
|
|
|
}
|
2021-12-27 16:56:45 +08:00
|
|
|
json.yAxis = [{
|
2021-12-27 10:10:41 +08:00
|
|
|
title: {
|
|
|
|
|
text: 'Win Rate (%)'
|
2021-12-27 16:56:45 +08:00
|
|
|
}
|
|
|
|
|
}, {
|
|
|
|
|
title: {
|
|
|
|
|
text: 'ADP'
|
2021-12-27 10:10:41 +08:00
|
|
|
},
|
2021-12-27 16:56:45 +08:00
|
|
|
opposite: true
|
|
|
|
|
}];
|
2021-12-27 10:10:41 +08:00
|
|
|
json.legend = {
|
|
|
|
|
layout: 'vertical',
|
|
|
|
|
align: 'right',
|
|
|
|
|
verticalAlign: 'middle',
|
|
|
|
|
borderWidth: 0
|
|
|
|
|
};
|
|
|
|
|
$('#container_' + i).highcharts(json);
|
|
|
|
|
i++
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
2021-12-27 18:00:04 +08:00
|
|
|
}
|
|
|
|
|
$(document).ready(function () {
|
|
|
|
|
load_charts("lite_resnet");
|
|
|
|
|
$("#model_type").on('change', function(){
|
|
|
|
|
load_charts($("#model_type").val())
|
|
|
|
|
})
|
2021-12-27 10:10:41 +08:00
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
