From 0b03d535494b1b9d008183820e325566f3ac52cb Mon Sep 17 00:00:00 2001
From: Austin Clark <austin.clark@hp.com>
Date: Wed, 15 Jul 2015 13:18:04 -0600
Subject: [PATCH] formatted sunburst chart

---
 .../{templates/tempest => static}/logs.json   |   0
 .../templates/tempest/latest_results.html     | 119 +++++++++---------
 stackviz/templates/template.html              |   1 +
 3 files changed, 63 insertions(+), 57 deletions(-)
 rename stackviz/{templates/tempest => static}/logs.json (100%)

diff --git a/stackviz/templates/tempest/logs.json b/stackviz/static/logs.json
similarity index 100%
rename from stackviz/templates/tempest/logs.json
rename to stackviz/static/logs.json
diff --git a/stackviz/templates/tempest/latest_results.html b/stackviz/templates/tempest/latest_results.html
index 5f28c99..6d2885c 100644
--- a/stackviz/templates/tempest/latest_results.html
+++ b/stackviz/templates/tempest/latest_results.html
@@ -5,85 +5,90 @@
 {% block body %}
 
 <div class="row">
-    <div class="col-lg-12">
         <h1 class="page-header">Latest Results</h1>
-    </div>
-    <!-- /.col-lg-12 -->
 </div>
 
-<div class="row">
-    <div class="col-lg-12">
-
+<div id="container" class="row">
+    <div class="col-lg-5">
+        <div id="sunburst" class="panel panel-default">
+        </div>
     </div>
-    <div class="col-lg-12">
 
+    <div class="col-lg-5">
+        <div id="chart" class="panel panel-default">
+                <p>Jquery me baby</p>
+                <p>Right there</p>
+                <p>Oh yeah</p>
+        </div>
     </div>
+
 </div>
+        <script>
 
-<script>
+        window.addEventListener('load', function() {
 
-window.addEventListener('load', function() {
+            var width = 700,
+                height = 500,
+                radius = Math.min(width, height) / 2;
 
-    var width = 960,
-        height = 700,
-        radius = Math.min(width, height) / 2;
+            var x = d3.scale.linear()
+                .range([0, 2 * Math.PI]);
 
-    var x = d3.scale.linear()
-        .range([0, 2 * Math.PI]);
+            var y = d3.scale.sqrt()
+                .range([0, radius]);
 
-    var y = d3.scale.sqrt()
-        .range([0, radius]);
+            var color = d3.scale.category20c();
 
-    var color = d3.scale.category20c();
+            var svg = d3.select("#sunburst").append("svg")
+                .attr("width", width)
+                .attr("height", height)
+              .append("g")
+                .attr("transform", "translate(" + width / 2 + "," + (height / 2 + 10) + ")");
 
-    var svg = d3.select("body").append("svg")
-        .attr("width", width)
-        .attr("height", height)
-      .append("g")
-        .attr("transform", "translate(" + width / 2 + "," + (height / 2 + 10) + ")");
+            var partition = d3.layout.partition()
+                .value(function(d) { return d.size; });
 
-    var partition = d3.layout.partition()
-        .value(function(d) { return d.size; });
+            var arc = d3.svg.arc()
+                .startAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x))); })
+                .endAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx))); })
+                .innerRadius(function(d) { return Math.max(0, y(d.y)); })
+                .outerRadius(function(d) { return Math.max(0, y(d.y + d.dy)); });
 
-    var arc = d3.svg.arc()
-        .startAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x))); })
-        .endAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx))); })
-        .innerRadius(function(d) { return Math.max(0, y(d.y)); })
-        .outerRadius(function(d) { return Math.max(0, y(d.y + d.dy)); });
+            d3.json("/static/logs.json", function(error, root) {
+              if (error) throw error;
 
-    d3.json("logs.json", function(error, root) {
-      if (error) throw error;
+              var path = svg.selectAll("path")
+                  .data(partition.nodes(root))
+                .enter().append("path")
+                  .attr("d", arc)
+                  .style("fill", function(d) { return color((d.children ? d : d.parent).name); })
+                  .on("click", click);
 
-      var path = svg.selectAll("path")
-          .data(partition.nodes(root))
-        .enter().append("path")
-          .attr("d", arc)
-          .style("fill", function(d) { return color((d.children ? d : d.parent).name); })
-          .on("click", click);
+              function click(d) {
+                path.transition()
+                  .duration(750)
+                  .attrTween("d", arcTween(d));
+              }
+            });
 
-      function click(d) {
-        path.transition()
-          .duration(750)
-          .attrTween("d", arcTween(d));
-      }
-    });
+            d3.select(self.frameElement).style("height", height + "px");
 
-    d3.select(self.frameElement).style("height", height + "px");
+            // Interpolate the scales!
+            function arcTween(d) {
+              var xd = d3.interpolate(x.domain(), [d.x, d.x + d.dx]),
+                  yd = d3.interpolate(y.domain(), [d.y, 1]),
+                  yr = d3.interpolate(y.range(), [d.y ? 20 : 0, radius]);
+              return function(d, i) {
+                return i
+                    ? function(t) { return arc(d); }
+                    : function(t) { x.domain(xd(t)); y.domain(yd(t)).range(yr(t)); return arc(d); };
+              };
+            }
 
-    // Interpolate the scales!
-    function arcTween(d) {
-      var xd = d3.interpolate(x.domain(), [d.x, d.x + d.dx]),
-          yd = d3.interpolate(y.domain(), [d.y, 1]),
-          yr = d3.interpolate(y.range(), [d.y ? 20 : 0, radius]);
-      return function(d, i) {
-        return i
-            ? function(t) { return arc(d); }
-            : function(t) { x.domain(xd(t)); y.domain(yd(t)).range(yr(t)); return arc(d); };
-      };
-    }
+        }, false);
+
+        </script>
 
-}, false);
-</script>
 
 
 {% endblock %}
\ No newline at end of file
diff --git a/stackviz/templates/template.html b/stackviz/templates/template.html
index 9bc3bef..90a51b1 100644
--- a/stackviz/templates/template.html
+++ b/stackviz/templates/template.html
@@ -90,6 +90,7 @@
     <!-- d3.js -->
     <script src="{% static 'components/d3/d3.min.js' %}"></script>
 
+
 </body>
 
 </html>