crafty-4/app/frontend/templates/panel/server_metrics.html

{% 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>


          <canvas id="lineChart"></canvas>

        </div>
      </div>
    </div>
  </div>



</div>
<script type="text/javascript">
  //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 }}");
  ram.push("{{ item.mem_percent }}")
  cpu.push("{{ item.cpu }}")
  {% end %}
  max_nums = [Math.max.apply(this, players), Math.max.apply(this, ram), Math.max.apply(this, cpu)]
  var hist_chart = new Chart(ctxL, {
    type: 'line',
    data: {
      labels: dates,
      datasets: [{
        label: "Players",
        data: players,
        borderColor: [
          'rgba(136, 98, 224, .5)',
        ],
        borderWidth: 2,
        tension: 0
      },
      {
        label: "MEM",
        data: ram,
        borderColor: [
          'rgba(33, 150, 243, .5)',
        ],
        borderWidth: 2,
        tension: 0
      },
      {
        label: "CPU",
        data: cpu,
        borderColor: [
          'rgba(255, 175, 0, .5)',
        ],
        borderWidth: 2,
        tension: 0
      },
      ]
    },
    options: {
      plugins: {
        zoom: {
          zoom: {
            wheel: {
              enabled: true,
            },
            drag: {
              enabled: true,
              modifierKey: "shift"
            },
            pinch: {
              enabled: true
            },
            mode: 'x',
            modifierKey: 'shift',
          },
        },
        pan: {
          enabled: true,
          mode: "xy",
          threshhold: 1,
          pan: {
            enabled: true,
            mode: "xy",
            threshhold: 1,
          }

        }
      },
      fill: false,
      lineTension: 5,
      responsive: true,
      scales: {
        y: {
          min: 0,
        },
        x: {
          position: 'right',
          min: -500,
        }
      }
    }
  });
</script>

{% end %}