Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

85 lines (71 sloc) 2.371 kb
<!DOCTYPE html>
<meta charset="utf-8">
<title>Cube</title>
<style>
@import url(style.css);
</style>
<select id="step">
<option value="1e4">10 seconds</option>
<option value="6e4">1 minute</option>
<option value="3e5">5 minutes</option>
</select>
<script src="d3.v2.js"></script>
<script src="cubism.v1.js"></script>
<script>
//
var step = +cubism.option("step", 1e4);
//
var context = cubism.context()
.step(step)
.size(1440);
//
var cube = context.cube();
// Add top and bottom axes to display the time.
d3.select("body").selectAll(".axis")
.data(["top", "bottom"])
.enter().append("div")
.attr("class", function(d) { return d + " axis"; })
.each(function(d) { d3.select(this).call(context.axis().ticks(12).orient(d)); });
// Add a mouseover rule.
d3.select("body").append("div")
.attr("class", "rule")
.call(context.rule());
//
d3.select("body").insert("div", ".bottom")
.attr("class", "group")
.call(function() { this.append("header").text("performance"); })
.selectAll(".horizon")
.data([
{title: "load", metric: cube.metric("sum(cube_compute(ms))").divide(step)},
{title: "median latency (ms)", metric: cube.metric("median(cube_compute(ms))")}
])
.enter().append("div")
.attr("class", "horizon")
.call(context.horizon()
.title(function(d) { return d.title; })
.metric(function(d) { return d.metric; }));
//
d3.json("/1.0/types", function(types) {
d3.select("body").insert("div", ".bottom")
.attr("class", "group")
.call(function() { this.append("header").text("incoming events (/s)"); })
.selectAll(".horizon")
.data(types)
.enter().append("div")
.attr("class", "horizon")
.call(context.horizon()
.metric(function(d) { return cube.metric("sum(" + d + ")").divide(step / 1e3); }));
});
// On mousemove, reposition the chart values to match the rule.
context.on("focus", function(i) {
d3.selectAll(".value").style("right", i == null ? null : context.size() - i + "px");
});
// Initialize the step menu's selection.
d3.selectAll("#step option").property("selected", function() {
return this.value == step;
});
// Update the location on step change.
d3.select("#step").on("change", function() {
window.location = "?step=" + this.value + "&" + location.search.replace(/[?&]step=[^&]*(&|$)/g, "$1").substring(1);
});
</script>
Jump to Line
Something went wrong with that request. Please try again.