Apq
/
syncthing
mirror of https://github.com/syncthing/syncthing.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248
							<!DOCTYPE html>
<!--
Copyright (C) 2014 Jakob Borg and other contributors. All rights reserved.
Use of this source code is governed by an MIT-style license that can be
found in the LICENSE file.
-->
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="">
  <meta name="author" content="">
  <link rel="shortcut icon" href="static/assets/img/favicon.png">

  <title>Syncthing Usage Reports</title>
  <link href="static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script type="text/javascript" src="static/bootstrap/js/bootstrap.min.js"></script>
  <style type="text/css">
    body {
      margin: 40px;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    }
  </style>
  <script type="text/javascript"
          src="https://www.google.com/jsapi?autoload={
            'modules':[{
              'name':'visualization',
              'version':'1',
              'packages':['corechart']
            }]
          }"></script>

  <script type="text/javascript">
    google.setOnLoadCallback(drawVersionChart);
    google.setOnLoadCallback(drawMovementChart);

    function drawVersionChart() {
      var jsonData = $.ajax({url: "summary.json", dataType:"json", async: false}).responseText;
      var rows = JSON.parse(jsonData);

      var data = new google.visualization.DataTable();
      data.addColumn('date', 'Day');
      for (var i = 1; i < rows[0].length; i++){
        data.addColumn('number', rows[0][i]);
      }
      for (var i = 1; i < rows.length; i++){
        rows[i][0] = new Date(rows[i][0]);
        data.addRow(rows[i]);
      };

      var options = {
        legend: { position: 'bottom', alignment: 'center' },
        isStacked: true,
        colors: ['rgb(102,194,165)','rgb(252,141,98)','rgb(141,160,203)','rgb(231,138,195)','rgb(166,216,84)','rgb(255,217,47)'],
        chartArea: {left: 80, top: 20, width: '1020', height: '300'},
      };

      var chart = new google.visualization.AreaChart(document.getElementById('versionChart'));
      chart.draw(data, options);
    }

    function drawMovementChart() {
      var jsonData = $.ajax({url: "movement.json", dataType:"json", async: false}).responseText;
      var rows = JSON.parse(jsonData);

      var data = new google.visualization.DataTable();
      data.addColumn('date', 'Day');
      for (var i = 1; i < rows[0].length; i++){
        data.addColumn('number', rows[0][i]);
      }

      for (var i = 1; i < rows.length; i++){
        rows[i][0] = new Date(rows[i][0]);
        if (rows[i][1] > 500) {
          rows[i][1] = null;
        }
        if (rows[i][2] < -500) {
          rows[i][2] = null;
        }
        data.addRow(rows[i]);
      };

      var options = {
        legend: { position: 'bottom', alignment: 'center' },
        colors: ['rgb(102,194,165)','rgb(252,141,98)','rgb(141,160,203)','rgb(231,138,195)','rgb(166,216,84)','rgb(255,217,47)'],
        chartArea: {left: 80, top: 20, width: '1020', height: '300'},
      };

      var chart = new google.visualization.AreaChart(document.getElementById('movementChart'));
      chart.draw(data, options);
    }
  </script>
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <h1>Syncthing Usage Data</h1>

        <h4>Active Users per Day and Version</h4>
        <p>
          This is the total number of unique users with reporting enabled, per day. Area color represents the major version.
        </p>
        <div class="img-thumbnail" id="versionChart" style="width: 1130px; height: 400px; padding: 10px;"></div>

        <h4>Users Joining and Leaving per Day</h4>
        <p>
          This is the total number of unique users joining and leaving per day. A user is counted as "joined" on first the day their unique ID is seen, and as "left" on the last day the unique ID was seen before a two weeks or longer absence. "Bounced" refers to users who joined and left on the same day.
        </p>
        <div class="img-thumbnail" id="movementChart" style="width: 1130px; height: 400px; padding: 10px;"></div>
        <p class="text-muted">
         Reappearance of users cause the "left" data to shrink retroactively.
         Spikes in December 2014 were due to the unique ID format changing and have been partly removed to avoid skewing the graph scale.
        </p>

        <h4>Usage Metrics</h4>
        <p>
          This is the aggregated usage report data for the last 24 hours. Data based on <b>{{.nodes}}</b> devices that have reported in.
        </p>

        <table class="table table-striped">
          <thead>
            <tr>
              <th></th><th class="text-right">5%</th><th class="text-right">50%</th><th class="text-right">95%</th><th class="text-right">100%</th>
            </tr>
          </thead>
          <tbody>
            {{range .categories}}
            <tr>
              <td>{{.Descr}}</td>
              <td class="text-right">{{index .Values 0 | number .Binary | commatize " "}}{{.Unit}}</td>
              <td class="text-right">{{index .Values 1 | number .Binary | commatize " "}}{{.Unit}}</td>
              <td class="text-right">{{index .Values 2 | number .Binary | commatize " "}}{{.Unit}}</td>
              <td class="text-right">{{index .Values 3 | number .Binary | commatize " "}}{{.Unit}}</td>
            </tr>
            {{end}}
          </tbody>
        </table>
      </div>
    </div>

    <div class="row">

      <div class="col-md-4">
        <table class="table table-striped">
          <thead>
            <tr>
              <th>Version</th><th class="text-right">Devices</th><th class="text-right">Share</th>
            </tr>
          </thead>
          <tbody>
            {{range .versions}}
            <tr>
              <td>{{.Key}}</td>
              <td class="text-right">{{.Count}}</td>
              <td class="text-right">{{.Percentage | printf "%.01f"}}%</td>
            </tr>
            {{end}}
          </tbody>
        </table>
      </div>

      <div class="col-md-4">
        <table class="table table-striped">
          <thead>
            <tr>
              <th>Platform</th><th class="text-right">Devices</th><th class="text-right">Share</th>
            </tr>
          </thead>
          <tbody>
            {{range .platforms}}
            <tr>
              <td>{{.Key}}</td>
              <td class="text-right">{{.Count}}</td>
              <td class="text-right">{{.Percentage | printf "%.01f"}}%</td>
            </tr>
            {{end}}
          </tbody>
        </table>
      </div>

      <div class="col-md-4">
        <table class="table table-striped">
          <thead>
            <tr>
              <th>OS</th><th class="text-right">Devices</th><th class="text-right">Share</th>
            </tr>
          </thead>
          <tbody>
            {{range .os}}
            <tr>
              <td>{{.Key}}</td>
              <td class="text-right">{{.Count}}</td>
              <td class="text-right">{{.Percentage | printf "%.01f"}}%</td>
            </tr>
            {{end}}
          </tbody>
        </table>
      </div>

    </div>
    <div class="row">

      <div class="col-md-6">
        <table class="table table-striped">
          <thead>
            <tr>
              <th>Compiler</th><th class="text-right">Devices</th><th class="text-right">Share</th>
            </tr>
          </thead>
          <tbody>
            {{range .compilers}}
            <tr>
              <td>{{.Key}}</td>
              <td class="text-right">{{.Count}}</td>
              <td class="text-right">{{.Percentage | printf "%.01f"}}%</td>
            </tr>
            {{end}}
          </tbody>
        </table>
      </div>

      <div class="col-md-6">
        <table class="table table-striped">
          <thead>
            <tr>
              <th>Builder</th><th class="text-right">Devices</th><th class="text-right">Share</th>
            </tr>
          </thead>
          <tbody>
            {{range .builders}}
            <tr>
              <td>{{.Key}}</td>
              <td class="text-right">{{.Count}}</td>
              <td class="text-right">{{.Percentage | printf "%.01f"}}%</td>
            </tr>
            {{end}}
          </tbody>
        </table>
      </div>

    </div>
  </div>
</body>
</html>