Skip to content
Browse files

Epic cargocult of Cubism.js examples.

  • Loading branch information...
1 parent f8dc500 commit 63bcbb0b00f2bc6b81fcb79c9d2f11ddb1902171 @therealadam committed Feb 9, 2013
Showing with 88 additions and 10 deletions.
  1. +6 −10 src/main/webapp/WEB-INF/templates/views/index.ssp
  2. +32 −0 src/main/webapp/css/stella.css
  3. +50 −0 src/main/webapp/js/stella.js
View
16 src/main/webapp/WEB-INF/templates/views/index.ssp
@@ -4,16 +4,7 @@
<title>Stella by Starlight</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen"/>
- <style>
- .container-narrow {
- margin: 0 auto;
- max-width: 700px;
- }
- .jumbotron {
- margin: 60px 0;
- text-align: center;
- }
- </style>
+ <link href="css/stella.css" rel="stylesheet" media="screen"/>
</head>
<body>
<div class="container-narrow">
@@ -29,6 +20,7 @@
<div class="jumbotron">
<h1><a name="#dashboard">Everything is OK.</a></h1>
+ <div id="graph"></div>
<p class="lead">Don't panic!</p>
</div>
@@ -66,5 +58,9 @@
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
+ <script src="js/d3.v3.js"></script>
+ <script src="js/cubism.v1.js"></script>
+ <script src="js/stella.js"></script>
</body>
</html>
+
View
32 src/main/webapp/css/stella.css
@@ -0,0 +1,32 @@
+/* Cargo culted from Bootstrap example */
+.container-narrow {
+ margin: 0 auto;
+ max-width: 700px;
+}
+
+.jumbotron {
+ margin: 60px 0;
+ text-align: center;
+}
+
+/* Cargo culted from Cubism example */
+.horizon {
+ border-top: solid 1px #000;
+ border-bottom: solid 1px #000;
+ overflow: hidden;
+ position: relative;
+}
+.horizon .title, .horizon .value {
+ bottom: 0;
+ line-height: 30px;
+ margin: 0 6px;
+ position: absolute;
+ whitespace: nowrap;
+}
+.horizon .title {
+ left: 0;
+}
+
+.horizon .value {
+ right: 0;
+}
View
50 src/main/webapp/js/stella.js
@@ -0,0 +1,50 @@
+jQuery(function() {
+ var stellaMetric = function(name) {
+ var value = 0,
+ values = [],
+ i = 0,
+ last;
+
+ return context.metric(function(start, stop, step, callback) {
+ start = +start, stop = +stop;
+ if (isNaN(last)) { last = start; }
+
+ while (last < stop) {
+ last += step;
+ value = Math.max(-10, Math.min(10, value + .8 * Math.random() - .4 + .2 * Math.cos(i += 2)));
+ values.push(value);
+ }
+ callback(null, values = values.slice((start - stop) / step));
+ }, name);
+ }
+
+ var context = cubism.context()
+ .serverDelay(0)
+ .clientDelay(0)
+ .step(1e3)
+ .size(700);
+
+ var foo = stellaMetric("foo"),
+ bar = stellaMetric("bar");
+
+ d3.select("#graph").call(function(div) {
+ div.append("div")
+ .attr("class", "axis")
+ .call(context.axis().orient("top"));
+
+ div.selectAll(".horizon")
+ .data([foo, bar, foo.add(bar), foo.subtract(bar)])
+ .enter().append("div")
+ .attr("class", "horizon")
+ .call(context.horizon().extent([-20, 20]));
+
+ div.append("div")
+ .attr("class", "rule")
+ .call(context.rule());
+ });
+
+ context.on("focus", function(i) {
+ d3.selectAll(".value").style("right", i == null ? null : context.size() - i + "px");
+ });
+});
+

0 comments on commit 63bcbb0

Please sign in to comment.
Something went wrong with that request. Please try again.