charts

2021-12-27 10:10:41 +08:00 · 2021-12-27 10:10:41 +08:00 · 89daced3ad
parent 6b6b0ed552
commit 89daced3ad
2 changed files with 89 additions and 0 deletions
--- a/evaluate_server.py
+++ b/evaluate_server.py
@ -69,6 +69,10 @@ def battle_tick():
    tick()
    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'])
 def metrics():
    type = request.args.get('type')
--- a/static/charts.html
+++ b/static/charts.html
@ -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>