tmpnb metrics

index.html

<div id="container">
  <div id="panel"></div>
</div>

script.js

var capacities = [];
var availabilities = [];
var used = [];
var endpoint = "https://tmp35.tmpnb.org/stats";

function drawCurrent() {
  var d = new Date();

  fetch(endpoint).then((response) => {
    return response.json();
  }).then((data) => {

    capacities.push({
      "date": d,
      "value": data.capacity
    });
    availabilities.push({
      "date": d,
      "value": data.available
    });
    used.push({
      "date": d,
      "value": data.capacity - data.available
    })

    MG.data_graphic({
      title: "Userland Container Metrics",
      description: "How is tmpnb feeling today?",
      data: [capacities, availabilities, used],
      width: 1000,
      height: 500,
      right: 40,
      target: '#panel',
      interpolate: 'basic',
      x_accessor: 'date',
      y_label: "containers",
      aggregate_rollover: true,
      legend: ["capacity", "available", "in use"]
    })

  })

}

setInterval(drawCurrent, 1000);

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/metrics-graphics/2.6.0/metricsgraphics.js"></script>

style.css

/* Note within this CodePen's setup that I'm using
   both PureCSS and MetricsGraphics' CSS */
#container {
  text-align: center;
}

#panel {
  display: inline-block;
  margin: 0 auto;
  padding-left: 20px;
}

styles

<link href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/metrics-graphics/2.6.0/metricsgraphics.css" rel="stylesheet" />

tmpnb-metrics.markdown

tmpnb metrics

A Pen by Kyle Kelley on CodePen.

License.