{% extends ../base.html %} {% block meta %} {% end %} {% block title %}Crafty Controller - {{ translate('serverDetails', 'serverDetails', data['lang']) }}{% end %} {% block content %} <div class="content-wrapper"> <!-- Page Title Header Starts--> <div class="row page-title-header"> <div class="col-12"> <div class="page-header"> <h4 class="page-title"> {{ translate('serverDetails', 'serverDetails', data['lang']) }} - {{ data['server_stats']['server_id']['server_name'] }} <br /> <small>UUID: {{ data['server_stats']['server_id']['server_uuid'] }}</small> </h4> </div> </div> </div> <!-- Page Title Header Ends--> {% include "parts/details_stats.html %} <div class="row"> <div class="col-sm-12 grid-margin"> <div class="card"> <div class="card-body pt-0"> <span class="d-none d-sm-block"> {% include "parts/server_controls_list.html %} </span> <span class="d-block d-sm-none"> {% include "parts/m_server_controls_list.html %} </span> <div class="col-2"> <div class="form-group"> <label for="days">Metric Period</label> <select required class="form-control form-control-lg select-css" id="days" name="days"> {% for value in data['options'] %} <option value="{{value}}">{{value}} Day(s)</option> {% end %} </select> </div> </div> <button style="float: right; visibility: hidden;" class="btn btn-outline-success reset-button" id="reset-button"><i class="fas fa-undo"></i> {{ translate('serverMetrics', 'resetZoom', data['lang']) }}</button> {% if data['user_data']['hints'] %} <span data-html="true" class="hints text-center" title="<i class='fa fa-info-circle'></i> " , data-content="{{ translate('serverMetrics', 'zoomHint1' , data['lang'])}} <br> <br> {{ translate('serverMetrics', 'zoomHint2', data['lang'])}}" , data-placement="top"></span> {% end %} <div class="chart-wrapper"> <canvas id="lineChart"></canvas> </div> </div> </div> </div> </div> </div> <style> .chart-wrapper { height: 65vh; } .popover-body { color: white !important; ; } </style> <script type="text/javascript"> const serverId = new URLSearchParams(document.location.search).get('id') var zoomed = false; //line var ctxL = document.getElementById("lineChart").getContext('2d'); const players = [] const dates = [] const ram = [] const cpu = [] {% for item in data['history_stats'] %} {% if 'minecraft-java' in data['server_stats']['server_type'] %} players.push("{{ item.online }}"); {% end %} dates.push("{{ item.created.strftime('%Y/%m/%d, %H:%M:%S') }}"); ram.push("{{ item.mem_percent }}") cpu.push("{{ item.cpu }}") {% end %} var hist_chart = new Chart(ctxL, { type: 'line', data: { labels: dates, datasets: [{ label: "Players", data: players, borderColor: [ 'rgba(136, 98, 224, .5)', ], borderWidth: 2, lineTension: 0, }, { label: "MEM", data: ram, borderColor: [ 'rgba(33, 150, 243, .5)', ], borderWidth: 2, lineTension: 0, }, { label: "CPU", data: cpu, borderColor: [ 'rgba(255, 175, 0, .5)', ], borderWidth: 2, lineTension: 0, }, ] }, options: { maintainAspectRatio: false, plugins: { zoom: { zoom: { onZoom({ hist_chart }) { console.log("zooming"); document.getElementById("reset-button").style.visibility = "visible"; zoomed = true; }, wheel: { enabled: true, modifierKey: 'shift', }, drag: { enabled: true, modifierKey: "shift" }, pinch: { enabled: true }, mode: 'x', }, pan: { enabled: true, mode: "x", threshhold: 1, } }, }, fill: false, lineTension: 5, responsive: true, scales: { y: { min: 0, }, x: { position: 'right', min: dates.length - 200, } } } }); $(window).ready(function () { $('#days').on("change", function () { let days = $('#days').find(":selected").val(); window.location.href = "/panel/server_detail?id=" + serverId + "&days=" + days + "&subpage=metrics" }); $('body').click(function () { $('.hints').popover("hide"); }); }); $(document).ready(function () { if ($(window).width() > 1000) { $('[data-toggle="popover"]').popover(); $('.hints').popover("show"); } webSocket.on('update_server_details', function (data) { dates.push(data.created); players.push(data.online); cpu.push(data.cpu) ram.push(data.mem_percent) data = { labels: dates, datasets: [{ label: "Players", data: players, borderColor: [ 'rgba(136, 98, 224, .5)', ], borderWidth: 2, lineTension: 0, }, { label: "MEM", data: ram, borderColor: [ 'rgba(33, 150, 243, .5)', ], borderWidth: 2, lineTension: 0, }, { label: "CPU", data: cpu, borderColor: [ 'rgba(255, 175, 0, .5)', ], borderWidth: 2, lineTension: 0, }, ] } if (!zoomed) { hist_chart.options.scales.x.min = dates.length - 200; } hist_chart.update(data) }); $(".reset-button").click(function () { console.log("resetting zoom"); zoomed = false; hist_chart.resetZoom(); document.getElementById("reset-button").style.visibility = "hidden"; }); }); </script> {% end %}