165 lines
7.9 KiB
HTML
165 lines
7.9 KiB
HTML
<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>
|
|
<script src="https://code.highcharts.com/modules/series-label.js"></script>
|
|
<script src="https://code.highcharts.com/modules/exporting.js"></script>
|
|
<script src="https://code.highcharts.com/modules/export-data.js"></script>
|
|
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
|
|
</head>
|
|
<body>
|
|
<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>
|
|
<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>
|
|
position_map = {
|
|
'landlord': '地主',
|
|
'landlord_down': '地主下家',
|
|
'landlord_front': '地主对家',
|
|
'landlord_up': '地主上家',
|
|
}
|
|
function load_charts(model_type){
|
|
$.ajax({
|
|
url: "metrics?type=" + model_type,
|
|
success: function (result) {
|
|
result = result.result
|
|
var i = 0
|
|
positions = ['landlord', 'landlord_down', 'landlord_front', 'landlord_up']
|
|
for (var rank in result) {
|
|
if (!result.hasOwnProperty(rank)) {
|
|
continue
|
|
}
|
|
var json = {
|
|
title: {
|
|
text: 'Baseline: ' + rank
|
|
},
|
|
subtitle: {
|
|
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/>' +
|
|
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
|
|
},
|
|
colors: ['#e02f1b', '#a82314', '#1be02f', '#14a823', '#1bcce0', '#1499a8', '#2f1be0', '#2314a8'],
|
|
symbols: ['circle', 'circle', 'triangle-down', 'triangle-down', 'square', 'square', 'triangle', 'triangle'],
|
|
yAxis: [
|
|
{
|
|
title: {text: 'Win Rate (%)'},
|
|
plotLines: [
|
|
{
|
|
label: { text: 'landlord_wp'},
|
|
color: '#e0887e',
|
|
width: 2,
|
|
zIndex: 5,
|
|
value: parseFloat(result[rank]['baseline'].landlord_wp) * 100,
|
|
dashStyle: 'shortdash'
|
|
},
|
|
{
|
|
label: { text: 'farmer_wp'},
|
|
color: '#7ed6e0',
|
|
width: 2,
|
|
zIndex: 5,
|
|
value: parseFloat(result[rank]['baseline'].farmer_wp) * 100,
|
|
dashStyle: 'shortdash'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: { text: 'ADP'},
|
|
opposite: true,
|
|
plotLines: [
|
|
{
|
|
label: { text: 'landlord_adp'},
|
|
color: '#e0887e',
|
|
width: 2,
|
|
value: parseFloat(result[rank]['baseline'].landlord_adp),
|
|
zIndex: 5,
|
|
dashStyle: 'longdashdot'
|
|
},
|
|
{
|
|
label: { text: 'farmer_adp'},
|
|
color: '#7ed6e0',
|
|
width: 2,
|
|
value: parseFloat(result[rank]['baseline'].farmer_adp),
|
|
zIndex: 5,
|
|
dashStyle: 'longdashdot'
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
categories = new Set()
|
|
$.map(positions, function (position) {
|
|
$.map(result[rank][position], function (_, frame){
|
|
categories.add(parseInt(frame))
|
|
})
|
|
})
|
|
categories = Array.from(categories).sort(function (a,b) {
|
|
return a > b ? 1 : (a === b ? 0 : -1)
|
|
})
|
|
json.series = $.map(positions, function (position) {
|
|
if (!result[rank].hasOwnProperty(position)) {
|
|
return null;
|
|
}
|
|
return [{
|
|
name: position_map[position] + " WP",
|
|
type: 'spline',
|
|
connectNulls: true,
|
|
yAxis: 0,
|
|
tooltip: {
|
|
pointFormat: position_map[position] + " WP: {point.y:.2f}%<br>"
|
|
},
|
|
data: $.map(categories, function (frame) {
|
|
if (result[rank][position].hasOwnProperty(frame)) {
|
|
return [[frame, (parseFloat(result[rank][position][frame].wp) * 100)]]
|
|
} else {
|
|
return [[frame, null]]
|
|
}
|
|
})
|
|
}, {
|
|
name: position_map[position] + " ADP",
|
|
type: 'spline',
|
|
connectNulls: true,
|
|
yAxis: 1,
|
|
visible: false,
|
|
tooltip: {
|
|
pointFormat: position_map[position] + " ADP: {point.y:.2f}<br>"
|
|
},
|
|
data: $.map(categories, function (frame) {
|
|
if (result[rank][position].hasOwnProperty(frame)) {
|
|
return [[frame, parseFloat(result[rank][position][frame].adp)]]
|
|
} else {
|
|
return [[frame, null]]
|
|
}
|
|
})
|
|
}]
|
|
})
|
|
json.legend = {
|
|
layout: 'vertical',
|
|
align: 'right',
|
|
verticalAlign: 'middle',
|
|
borderWidth: 0
|
|
};
|
|
$('#container_' + i).highcharts(json);
|
|
debugger
|
|
|
|
i++
|
|
}
|
|
}
|
|
});
|
|
}
|
|
$(document).ready(function () {
|
|
load_charts("lite_resnet");
|
|
$("#model_type").on('change', function(){
|
|
load_charts($("#model_type").val())
|
|
})
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |