unity-ngo-hostmigration/view_stats.js

const csv = require('csvtojson');
const fs = require('fs');
const os = require('os');

(function () {

    view_stats = function( app )
    {
        app.get('/stats', async (req, res) => {

            let d = (new Date()); 
            let file_date = d.getYear() + "_" + d.getMonth() + "_" + d.getDate() ;
            let csv_file = `./log/stats_${file_date}.csv`;

            if( ! fs.existsSync(csv_file) )
            {
                res.send("refresh in a few minutes , no stats have been generated yet" );
                return;
            }

            var raw_csv = fs.readFileSync( csv_file ).toString(); // .split( os.EOL );

            let labels_time = [];

            let chart1_cpu = [];
            let chart1_ram = [];
            let chart2_connections = [];
            let chart2_activeLobbies = [];
            let chart3_requestsCount = [];


            const array = await csv().fromFile(csv_file);

            var i = 0;

            if( array.length > 150 ) i = array.length - 150;

            for( i ; i < array.length; ++i ) 
            {
                var csv_obj = array[ i ];

                chart1_cpu.push( `${ csv_obj['cpu'] }` );
                chart1_ram.push( `${csv_obj['ram']}` );
                chart2_connections.push( `${ csv_obj['connections'] }` );
                chart2_activeLobbies.push( `${csv_obj['activeLobbies']}` );
                chart3_requestsCount.push( `${csv_obj['requestsCount']}` );

                var time_str = new Date( parseInt( csv_obj['time'] ) ).toLocaleTimeString("en-US");
                time_str = time_str.slice(0,4) + time_str.slice(8).toLocaleLowerCase() + " ";
                // var time_str = new Date( parseInt( csv_obj['time'] ) ).toISOString().slice(11, 16);

                labels_time.push( `"${time_str}"` );
            }

            res.set('Content-Type', 'text/html');
            res.send(
            // ----------------------------
`
<div class="graph-container"><canvas id="canvas1"></canvas></div>
<div class="graph-container"><canvas id="canvas2"></canvas></div>
<div class="graph-container"><canvas id="canvas3"></canvas></div>

<div class="grid3">
    <div class="box">CSV Data<textarea>${raw_csv}</textarea></div>
    <div class="box">Connected Clients<textarea>${stats_request_ip_list}</textarea></div>
    <div class="box"></div>
    <div class="box">A</div>
    <div class="box">B</div>
    <div class="box">C</div>
</div>
<div class="grid2">
    <div class="box">0</div>
    <div class="box">1</div>
     <div class="box">2</div>
     <div class="box">3</div>
  </div>



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>  
<script>

window.chartColors = 
{
    red: 'rgb(255, 99, 132)',
    orange: 'rgb(255, 159, 64)',
    yellow: 'rgb(255, 205, 86)',
    green: 'rgb(75, 192, 192)',
    blue: 'rgb(54, 162, 235)',
    purple: 'rgb(153, 102, 255)',
    grey: 'rgb(231,233,237)'
  };
  
  var chart_canvas1 = new Chart( document.getElementById("canvas1").getContext("2d"), {
    type: 'line',
    options: {
        maintainAspectRatio : false,
        responsive: true,
        tooltips: { mode: 'index', intersect: false },
        hover: { mode: 'nearest', intersect: true },
        scales: {
            xAxes: [{ display: false, scaleLabel: { display: true } }],
            yAxes: [{ display: true, scaleLabel: { display: true } }]
        }
    },
    data: {
        labels: [ ${labels_time} ],
        datasets:  
        [
            {
                label: "CPU %",
                backgroundColor: window.chartColors.red,
                borderColor: window.chartColors.red,
                data: [ ${chart1_cpu} ],
                fill: false,
            }, {
                label: "RAM %",
                fill: false,
                backgroundColor: window.chartColors.blue,
                borderColor: window.chartColors.blue,
                data: [ ${chart1_ram} ],
            }
        ]
    }
  });

  new Chart( document.getElementById("canvas2").getContext("2d"), {
    type: 'line',
    options: {
        maintainAspectRatio : false,
        responsive: true,
        tooltips: { mode: 'index', intersect: false },
        hover: { mode: 'nearest', intersect: true },
        scales: {
            xAxes: [{ display: false, scaleLabel: { display: true } }],
            yAxes: [{ display: true, scaleLabel: { display: true } }]
        }
    },
    data: {
        labels: [ ${labels_time} ],
        datasets: 
        [
            {
                label: "Connections",
                backgroundColor: window.chartColors.orange,
                borderColor: window.chartColors.orange,
                data: [ ${chart2_connections} ],
                fill: false,
            }, 
            {
                label: "Active Lobbies",
                fill: false,
                backgroundColor: window.chartColors.red,
                borderColor: window.chartColors.red,
                data: [ ${chart2_activeLobbies} ],
            }
        ]
    }
  });
  
new Chart( document.getElementById("canvas3").getContext("2d"), {
    type: 'line',
    options: {
        maintainAspectRatio : false,
        responsive: true,
        tooltips: { mode: 'index', intersect: false },
        hover: { mode: 'nearest', intersect: true },
        scales: {
            xAxes: [{ display: false, scaleLabel: { display: true } }],
            yAxes: [{ display: true, scaleLabel: { display: true } }]
        }
    },
    data: {
        labels: [ ${labels_time} ],
        datasets: 
        [
            {
                label: "Requests Count",
                fill: false,
                backgroundColor: window.chartColors.green,
                borderColor: window.chartColors.green,
                data: [ ${chart3_requestsCount} ],
            }
        ]
    }
  });

</script>

<style>
html , body  { margin: 0; }

*Small media devices specific styles*/
@media screen and (max-width: 800px) {
.graph-container {
        display: block;
        float: none;
        width: 100%;
        margin-top: 0px;
        margin-right:0px;
        margin-left:0px;
        height: auto;
    }
}
.graph-container {
    width: 100%;
    height: 200px;
}
/* Grid with responsive column width */
.grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-gap: 10px;
  }
  .grid3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr 0fr;
    grid-gap: 10px;
  }
.box {
    background-color: #EFEFEF;
    border-radius: 5px;
    color: #fff;
    font-size: 1em;
    padding: 10px 15px;
  }
  textarea { 
    width:95%; 
    height: 200px;
  }
  div {
	font-family: "Lato", "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
	font-size: 17px;
}
</style>
`
            // ----------------------------
            );
        });
    };
    // ----------
})();