cleaned up legend and made it draggable

pjkundert · Apr 5, 2012 · f99bc6f · f99bc6f
1 parent 8615d74
commit f99bc6f
Showing 1 changed file with 93 additions and 30 deletions.
diff --git a/static/burn-down-charts.html b/static/burn-down-charts.html
@@ -17,29 +17,39 @@
     <link href="css/style.css"
           type="text/css" rel="stylesheet" />
     <style type="text/css">
-    html {
-        height: 100%;
-    }
-    body {
-        height: 100%;
-        margin: 0;
-        padding: 0;
-        font-family: calibri;
-    }
-    #container {
-        padding: 50px 10px 40px;
-        border: solid 1px #666;
-        border-radius: 5px;
-        background-color: #FFF;
-    }
-    .project-title {
-        color:          #777;
-        font-size:	16pt;
-    }
-    .project-date {
-        color:          #000;
-        font-size:	14pt;
-    }
+        html {
+          height: 100%;
+        }
+        body {
+          height: 100%;
+          margin: 0;
+          padding: 0;
+          font-family: calibri;
+        }
+        body.noselection {
+          -moz-user-select: none;
+          -webkit-user-select: none;
+        }
+        #container {
+          padding: 50px 10px 40px;
+          border: solid 1px #666;
+          border-radius: 5px;
+          background-color: #FFF;
+        }
+        .legend-container {
+          position: absolute;
+          cursor: move;
+        }
+        .legend-container table {
+          width: 300px;
+          background-color: #FFF;
+        }
+        .graph-title {
+          text-align: center;
+        }
+        .project-date {
+          color:          #000;
+        }
     </style>
 </head>
 <body style="background-color: #EEE;">
@@ -71,6 +81,38 @@ <h2 class="alert-heading">Ajax Error!</h2>
         </div>
     </div>
     <div id="container" class="container">
+        <div class="legend-container">
+            <table class="table table-striped table-bordered">
+                <thead>
+                    <tr>
+                        <th colspan="2">Legend</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>Began:</td>
+                        <td>
+                            <span class="project-date"
+                                  id="project-start"></span>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>Now:</td>
+                        <td>
+                            <span class="project-date"
+                                  id="project-now"></span>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>End:</td>
+                        <td>
+                            <span class="project-date"
+                                  id="project-finish"></span>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
         <div class="graph-container">
         </div>
     </div>
@@ -170,17 +212,34 @@ <h2 class="alert-heading">Ajax Error!</h2>
         $(window).resize(function(e) {
             drawGraph(data)
         })
+        function dragmove(d, i) {
+            d.x += d3.event.dx
+            d.y += d3.event.dy
+            d3.select(this).attr('style', 'left: '+d.x+'px; top: '+d.y+'px;')
+        }
+        $(document).ready(function() {
+            var legendX            = 700
+            var legendY            = 100
+            var drag = d3.behavior.drag()
+                .on('dragstart', function() {
+                    $('body').attr('onselectstart','return false;').addClass('noselection')
+                    console.log('dragstart')
+                })
+                .on('drag', dragmove)
+                .on('dragend',  function() {
+                    $('body').attr('onselectstart','').removeClass('noselection')
+                    console.log('dragend')
+                })
+            var legend = d3.select('.legend-container')
+                .attr('style', 'left: '+legendX+'px; top: '+legendY+'px;')
+                .data([{x: legendX, y: legendY}])
+                .call(drag)
+        })
 
         function drawGraph(data) {
             // Clear the graph-container each time; we'll always just use to
             // D3's .enter()... to reconstruct the SVG from scratch.
-
-            $('.graph-container').html(
-                  '<span class="project-title">'+data.project+'('+data.style+')'
-                +   ' Began: <span class="project-date" id="project-start"></span>'
-                +   ' Now:   <span class="project-date" id="project-now"></span>'
-                +   ' End:   <span class="project-date" id="project-finish"></span>'
-                + '</span>')
+            $('.graph-container').html('')
 
             //   json object structure:
             //   {
@@ -309,6 +368,10 @@ <h2 class="alert-heading">Ajax Error!</h2>
                 .attr('width', w)
                 .attr('height', h)
                 .attr('style', 'display: block; margin: 0 auto;')
+
+            // add title of graph with graph type
+            $('.graph-container').append('<h3 class="graph-title">'+allData.project+'('+allData.style+')</h3>')
+
             // Create x Axis rules
             var xAxis = svg.append('g')
                 .attr('class', 'xAxis')