github.com/docker/app@v0.9.1-beta3.0.20210611140623-a48f773ab002/examples/dockercoins/webui/files/index.html (about)

     1  <!doctype html>
     2  <html>
     3  <head>
     4  <title>DockerCoin Miner WebUI</title>
     5  <link rel="stylesheet" type="text/css" href="rickshaw.min.css">
     6  <style>
     7  #graph {
     8      background-color: #eee;
     9      width: 800px;
    10      height: 400px;
    11  }
    12  #tweet {
    13      color: royalblue;
    14  }
    15  </style>
    16  <script src="jquery.js"></script>
    17  <script src="d3.min.js"></script>
    18  <script src="rickshaw.min.js"></script>
    19  <script>
    20  
    21  String.prototype.format = function () {
    22      var args = arguments;
    23      return this.replace(/\{(\d+)\}/g, function (m, n) { return args[n]; });
    24  };
    25  
    26  var series = [];
    27  var points = []
    28  var graph = null;
    29  
    30  function refresh () {
    31      $.ajax({ url: "json" }).done(function (data) {
    32          series.push(data);
    33          while (series.length < 250) {
    34              data = JSON.parse(JSON.stringify(data));
    35              data.now -= 1;
    36              series.unshift(data);
    37          }
    38          while (series.length > 250) {
    39              series.shift();
    40          }
    41          while (points.length > 0) {
    42              points.pop();
    43          }
    44          var speed;
    45          for (var i=0; i<series.length-1; i++) {
    46              // Compute instantaneous speed
    47              var s1 = series[i];
    48              var s2 = series[i+1];
    49              speed = (s2.hashes-s1.hashes)/(s2.now-s1.now);
    50              points.push({ x: s2.now, y: speed });
    51          }
    52          $("#speed").text("~" + speed.toFixed(1) + " hashes/second");
    53          var msg = ("I'm attending a @docker orchestration workshop, "
    54                     + "and my #DockerCoins mining rig is crunching "
    55                     + speed.toFixed(1) + " hashes/second! W00T!");
    56          $("#tweet").attr(
    57              "href",
    58              "https://twitter.com/intent/tweet?text="+encodeURIComponent(msg)
    59          );
    60          if (graph == null) {
    61              graph = new Rickshaw.Graph({
    62                  renderer: "area",
    63                  stroke: true,
    64                  width: 800,
    65                  height: 400,
    66                  element: $("#graph")[0],
    67                  preserve: true,
    68                  series: [
    69                      { name: "Coins",
    70                        color: "steelblue",
    71                        data: points
    72                      }
    73                  ]
    74              });
    75              graph.render();
    76              var yAxis = new Rickshaw.Graph.Axis.Y({
    77                  graph: graph,
    78                  tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
    79                  ticksTreatment: "glow"
    80              });
    81              yAxis.render();
    82          } else {
    83              graph.update();
    84              $("text").css({
    85                  "font-size": "15px",
    86                  "font-weight": "normal",
    87                  "opacity": 0.5,
    88              });
    89          }
    90      });
    91  }
    92  
    93  $(function () {
    94      setInterval(refresh, 1000);
    95  });
    96  </script>
    97  </head>
    98  <body>
    99  
   100  <h1>DockerCoin Miner WebUI</h1>
   101  
   102  <div id="graph"></div>
   103  
   104  <h2>
   105    Current mining speed:
   106    <span id="speed">-</span>
   107    <a id="tweet" href="#">(Tweet this!)</a>
   108  </h2>
   109  
   110  </body>
   111  </html>