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


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280
							<!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;
    }
    tr.main td {
      font-weight: bold;
    }
    tr.child td.first {
      padding-left: 2em;
    }
  </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 id="active-users">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 id="joining-leaving">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.
        </p>

        <h4 id="metrics">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-6">
        <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}}
              {{if gt .Percentage 0.5}}
                <tr class="main">
                  <td>{{.Key}}</td>
                  <td class="text-right">{{.Count}}</td>
                  <td class="text-right">{{.Percentage | printf "%.01f"}}%</td>
                </tr>
                {{range .Items}}
                  <tr class="child">
                    <td class="first">{{.Key}}</td>
                    <td class="text-right">{{.Count}}</td>
                    <td class="text-right">{{.Percentage | printf "%.01f"}}%</td>
                  </tr>
                {{end}}
              {{end}}
            {{end}}
          </tbody>
        </table>
      </div>

      <div class="col-md-6">
        <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 class="main">
                <td>{{.Key}}</td>
                <td class="text-right">{{.Count}}</td>
                <td class="text-right">{{.Percentage | printf "%.01f"}}%</td>
              </tr>
              {{range .Items}}
                <tr class="child">
                  <td class="first">{{.Key}}</td>
                  <td class="text-right">{{.Count}}</td>
                  <td class="text-right">{{.Percentage | printf "%.01f"}}%</td>
                </tr>
              {{end}}
            {{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 class="main">
                <td>{{.Key}}</td>
                <td class="text-right">{{.Count}}</td>
                <td class="text-right">{{.Percentage | printf "%.01f"}}%</td>
              </tr>
              {{range .Items}}
                <tr class="child">
                  <td class="first">{{.Key}}</td>
                  <td class="text-right">{{.Count}}</td>
                  <td class="text-right">{{.Percentage | printf "%.01f"}}%</td>
                </tr>
              {{end}}
            {{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 class="row">
    <div class="col-md-12">
    <h4 id="features">Feature Usage</h4>
    <p>
    The following lists feature usage, as a percentage of the v0.12+ population (<b>{{.v2nodes}}</b> devices).
    </p>
    <table class="table table-striped">
    <thead><tr><th>Feature</th><th colspan="2" class="text-center">Usage</th></tr></thead>
    <tbody>
    {{range .features}}
    <tr>
    <td style="width: 30%">{{.Key}}</td>
    <td style="width: 10%" class="text-right">{{if ge .Pct 10.0}}{{.Pct | printf "%.0f"}}{{else if ge .Pct 1.0}}{{.Pct | printf "%.01f"}}{{else}}{{.Pct | printf "%.02f"}}{{end}}%</td>
    <td style="width: 60%">
    <div class="progress-bar" role="progressbar" aria-valuenow="{{.Pct | printf "%.02f"}}" aria-valuemin="0" aria-valuemax="100" style="width: {{.Pct | printf "%.02f"}}%; height:20px"></div>
  </td>
    </tr>
    {{end}}
    </tbody>
    </table>
    </div>
    </div>
  </div>
</body>
</html>