subDesTagesMitExtraKaese
/
sinusbot-channel-statistics


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225
							<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>TS3 channel usage</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="flot/excanvas.min.js"></script><![endif]-->
  <script language="javascript" type="text/javascript" src="flot/jquery.min.js"></script>
  <script language="javascript" type="text/javascript" src="flot/jquery.flot.min.js"></script>
  <script language="javascript" type="text/javascript" src="flot/jquery.flot.stack.min.js"></script>
  <script language="javascript" type="text/javascript" src="flot/jquery.flot.time.min.js"></script>
  <script language="javascript" type="text/javascript" src="flot/jquery.flot.navigate.min.js"></script>
  <script language="javascript" type="text/javascript" src="flot/jquery.flot.resize.min.js"></script>

</head>

<body>
  <div id="graphs"></div>
  <script>
    var startDate, endDate;
    var eventTimeRange = [0, 0];

    function updateDate(newDate) {
      newDate.setHours(6, 0, 0, 0);
      if (newDate.getTime() > eventTimeRange[1])
        newDate = new Date(eventTimeRange[1]);
      if (newDate.getTime() < eventTimeRange[0])
        newDate = new Date(eventTimeRange[0]);

      newDate.setHours(6, 0, 0, 0);
      startDate = newDate;
      endDate = addDays(startDate, 1);
      updatePlots();
    }
    
    
    function update(init = false) {
      fetch("ajax.php").then(res => res.json()).then(function (json) {
        let urlParams = new URLSearchParams(window.location.search);
        const channelId = parseInt(urlParams.get('channelId'));

        const div = document.getElementById("graphs");
        div.style.width = urlParams.get('width') || "600px";
        div.style.height = urlParams.get('height') || "300px";


        const serverName = json.channels ? json.channels[0].serverName : "Server";
        const channel = json.channels.filter(ch => ch.channelId == channelId)[0];
        if(!channel) {
          console.log("channel", channelId, "not found");
          return;
        }
        
        let channelTree = channel;
        
        eventTimeRange[0] = json.events.reduce((min, e) => min && (min < e[1]) ? min : e[1]) * 1000 - 12 * 3600000;
        eventTimeRange[1] = json.events.reduce((max, e) => max && (max > e[1]) ? max : e[1]) * 1000 + 12 * 3600000;


        if (init)
          updateDate(new Date());
        makeTree(channelTree, json.channels, json.events);

        if (init) {
          plotEvents(channel, div, true);
        }
        console.log(channelTree);
      });
    }
    update(true);
    setInterval(update, 30 * 1000);


    function makeTree(tree, channels, events) {
      tree.events = events.filter(e => e[0] == tree.id);
      if (tree.events.length > 0) {
        tree.events.push([tree.events[tree.events.length - 1][0], (new Date()).getTime() / 1000, tree.events[tree.events.length - 1][2]]);
      }
      tree.children = channels.filter((ch) => ch.parentId == tree.channelId).sort((a, b) => a.position - b.position);
      tree.clientCount = tree.events.reduce((sum, e) => sum + e[2], 0) / (tree.events.length > 0 ? tree.events.length : 1);

      const recentActivity = tree.events.filter(e => e[1] > (new Date()).getTime() / 1000 - 3600 * 24);
      tree.activeCount = recentActivity.length > 2 ? recentActivity.reduce((acc, val) => val[2] > acc ? val[2] : acc, 0) : 0;
      for (const child of tree.children) {
        makeTree(child, channels.filter(ch => ch.parentId != tree.channelId), events.filter(e => e[0] != tree.id));
        tree.clientCount += child.clientCount;
        tree.activeCount += child.activeCount;
      }
    }
   
    function formatHeadings(str, html = true) {
      const res = /(?:\[(.)spacer[^\]]*\])?(.*)/.exec(str);
      if (!html)
        return res[2];
      switch (res[1]) {
        case '*':
          return `<div class='channel'>${res[2].repeat(50)}</div>`;
        case 'l':
          return `<div class='channel' align='left'>${res[2]}</div>`;
        case 'c':
          return `<div class='channel' align='center'>${res[2]}</div>`;
        case 'r':
          return `<div class='channel' align='right'>${res[2]}</div>`;
        default:
          return `<div class='channel'>${res[2]}</div>`;
      }
    }

    var plots = {};
    var viewMin = 0;
    var viewMax = 0;
    function plotEvents(tree, div, visible = true) {
      let placeholder = document.getElementById(`graph_${tree.channelId}`);
      if (!placeholder) {
        placeholder = document.createElement("div");
        placeholder.classList.add("demo-placeholder");
        placeholder.id = `graph_${tree.channelId}`;
        placeholder.style.height = div.style.height;
        placeholder.style.width = div.style.width;
        div.appendChild(placeholder);
      }
      
      let series = [];
      function iterChilds(tree, prefix = "") {
        const data = tree.events.map(e => [e[1] * 1000, e[2]]);
        const name = prefix + formatHeadings(tree.name, false);
        const maxClients = data.reduce((acc, val) => val[1] > acc ? val[1] : acc, 0);
        if (data.length > 0 && maxClients > 0) {
          series.push({
            label: name,
            data: data,
            lines: {
              show: true,
              fill: true,
              steps: true
            }
          });
        }
        for (const channel of tree.children) {
          iterChilds(channel, formatHeadings(tree.name, false) + ' / ');
        }
      }
      iterChilds(tree);
      if (!plots[tree.channelId]) {
        plots[tree.channelId] = $.plot(placeholder, series, {
          xaxis: {
            mode: "time",
            timeBase: "milliseconds",
            timezone: "browser",
            min: viewMin ? viewMin : startDate.getTime(),
            max: viewMax ? viewMax : endDate.getTime(),
            zoomRange: [60000, null],
            panRange: eventTimeRange
          },
          yaxis: {
            zoomRange: false,
            panRange: false,
            min: 0,
            tickDecimals: 0
          },
          zoom: {
            interactive: true
          },
          pan: {
            interactive: true
          },
          legend: {
            position: 'nw'
          }
        });
        plots[tree.channelId].hooks.drawOverlay.push(function (plot, cvs) {
          if (!plot) { return; }
          var cvsWidth = plot.width() / 2;

          var text = tree.name.replace(/\[\/?[^\]]+\]/g, "");
          cvs.font = "bold 16px Arial";
          cvs.fillStyle = "#666666";
          cvs.textAlign = 'center';
          cvs.fillText(text, cvsWidth, 30);
          return cvs;
        });
        $(placeholder).bind("plotpan plotzoom", function (event, plot) {
          var axes = plot.getAxes();
          viewMin = axes.xaxis.min;
          viewMax = axes.xaxis.max;
          for (const id in plots) {
            plots[id].getOptions().xaxes[0].min = axes.xaxis.min;
            plots[id].getOptions().xaxes[0].max = axes.xaxis.max;

            plots[id].setupGrid();
            plots[id].draw();
          }
        });
      } else {
        plots[tree.channelId].getOptions().xaxis.panRange = eventTimeRange;
        plots[tree.channelId].setData(series);
        plots[tree.channelId].setupGrid();
        plots[tree.channelId].draw();
      }
    }

    function updatePlots() {
      viewMin = startDate.getTime();
      viewMax = endDate.getTime();
      for (const id in plots) {
        let opt = plots[id].getXAxes()[0].options;
        opt.min = viewMin;
        opt.max = viewMax;
        if (!document.getElementById(`cb_${id}`).checked)
          continue;
        plots[id].setupGrid();
        plots[id].draw();
      }
    }

    function addDays(date, days) {
      var result = new Date(date);
      result.setDate(result.getDate() + days);
      return result;
    }
  </script>
</body>

</html>