D3 Examples - sapphire random example

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link
    rel="stylesheet"
    href="https://rawgit.com/praekelt/sapphire/develop/build/sapphire.css">
    <style type="text/css">
body {
  background: #f2f2f2;
}
    </style>
  </head>
  <body>
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/justinvdm/strain/strain.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/praekelt/sapphire/develop/build/sapphire.js"></script>
    <script>
var conf = {
  step: 2000,
  limit: 20
};
​
​
var metrics = [
  'Foo',
  'Bar',
  'Baz',
  'Quux',
  'Corge',
  'Grault',
  'Garply'
].reduce(function(metrics, name) {
  metrics.set(name, {
    name: name,
    values: []
  });
  
  return metrics;
}, d3.map());
​
​
var dashboard = sapphire.dashboard()
  .numcols(10);
​
​
dashboard.types().get('last')
  .title(function(d) { return metrics.get(d.metric).name; })
  .values(function(d) { return metrics.get(d.metric).values; });
​
​
dashboard.types().get('bars')
  .title(function(d) { return metrics.get(d.metric).name; })
  .values(function(d) { return metrics.get(d.metric).values; })
  .x(function(d) { return +d3.time.second(d.x); });
​
​
dashboard.types().get('lines')
  .key(function(d) { return d; })
  .metricTitle(function(d) { return metrics.get(d).name; })
  .values(function(d) { return metrics.get(d).values; });
​
​
var el = d3.select('body').append('div')
  .attr('class', 'sapphire')
  .append('div')
  .datum({
    title: 'Random Metrics',
    widgets: [{
      type: 'lines',
      col: 0,
      row: 0,
      colspan: 6,
      title: 'Foo, Bar, Baz and Quux',
      metrics: [
        'Foo',
        'Bar',
        'Baz',
        'Quux'
      ]
    }, {
      type: 'lines',
      col: 0,
      row: 4,
      colspan: 6,
      title: 'Corge, Grault and Garply',
      metrics: [
        'Corge',
        'Grault',
        'Garply',
      ]
    }, {
      type: 'last',
      row: 0,
      col: 6,
      metric: 'Foo',
    }, {
      type: 'last',
      row: 2,
      col: 6,
      metric: 'Bar'
    }, {
      type: 'last',
      row: 4,
      col: 6,
      metric: 'Baz'
    }, {
      type: 'last',
      row: 6,
      col: 6,
      metric: 'Quux'
    }, {
      type: 'bars',
      col: 0,
      row: 8,
      colspan: 5,
      metric: 'Foo'
    }, {
      type: 'bars',
      col: 5,
      row: 8,
      colspan: 5,
      metric: 'Bar'
    }]
  });
​
​
init();
setInterval(update, conf.step);
​
​
function init() {
  var now = +(new Date());
  var then = now - (conf.limit * conf.step);
​
  d3.range(then, now, conf.step)
    .forEach(function(date) { push(date); });
​
  dashboard(el);
}
​
​
function update() {
  push(+(new Date()));
  pop();
  dashboard(el);
}
​
​
function push(date) {
  metrics.forEach(function(name, metric) {
    metric.values.push({
      x: date,
      y: randint(0, 100000)
    });
  });
}
​
​
function pop() {
  metrics.forEach(function(name, metric) {
    metric.values.shift();
  });
}
​
​
function randint(lo, hi) {
  return Math.round((Math.random() * (hi - lo)) + lo);
}
    </script>
  </body>
</html>
​
    