html report : zoom enabled

phpmetrics · Nov 18, 2014 · c27c5d5 · c27c5d5
1 parent 2e1c6c8
commit c27c5d5
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 12 deletions.
diff --git a/templates/html/assets/functions.js.twig b/templates/html/assets/functions.js.twig
@@ -75,5 +75,46 @@
         e.className = 'active';
     }
 
+    function zoom(id, callback) {
+        var e = document.getElementById(id);
+
+        // preserve olds values
+        e.setAttribute('data-original-width', e.offsetWidth);
+        e.setAttribute('data-original-height', e.offsetHeight);
+
+        // zoom
+        e.className = 'zoomed';
+
+        // add close button
+        var close = document.createElement('div');
+        close.setAttribute('id', 'btn-close');
+        close.innerHTML = '<a>Close</a>';
+        document.body.appendChild(close);
+        close.className = 'btn-close'
+        close.onclick = function(id, callback) {
+            return function() {
+                zoomOut(id, callback);
+            }
+        }(id, callback);
+
+        // apply callback
+        callback();
+    }
+
+    function zoomOut(id, callback) {
+        var e = document.getElementById(id);
+
+        // zoom
+        e.className = '';
+
+        // remove close button
+        var close = document.getElementById('btn-close');
+        close.parentNode.removeChild(close);
+
+        // apply callback
+        var w = e.getAttribute('data-original-width');
+        callback(w);
+    }
+
 </script>
 {% endautoescape %}
diff --git a/templates/html/assets/styles.css.twig b/templates/html/assets/styles.css.twig
@@ -246,4 +246,31 @@ table {
     box-shadow: 1px 1px 3px;
     text-align: left;
     color:#FFF;
+    z-index: 4;
+}
+
+/* ---- zoom ---- */
+.zoomed {
+    position: fixed;
+    z-index: 2;
+    top: 20px;
+    left: 0;
+    width: 100% !important;
+    height: 95% !important;
+    background: #FFF;
+}
+.btn-close {
+    position: fixed;
+    z-index: 3;
+    top: 0;
+    background: #333;
+    width: 100%;
+    text-align: center;
+    margin: 0 auto;
+    padding: 3px 0;
+    height: 20px;
+    lien-height: 20px;
+}
+.btn-close a {
+    color: #FFF;
 }
diff --git a/templates/html/summary/report-maintenability.js.twig b/templates/html/summary/report-maintenability.js.twig
@@ -2,22 +2,30 @@
 <script type="text/javascript">
 
     function updateMaintenablityChart() {
-        chartMaintenability(xAxis, yAxis, rAxis);
+        chartMaintenability();
     };
 
     function chartMaintenability() {
-        var diameter = 300,
-        format = d3.format(",d"),
-        color = d3.scale.category20c();
+        var maxHeight = document.getElementById('svg-maintenability').offsetHeight,
+            maxWidth = document.getElementById('svg-maintenability').offsetWidth,
+            format = d3.format(",d"),
+            color = d3.scale.category20c();
 
         var bubble = d3.layout.pack()
             .sort(null)
-            .size([diameter, diameter])
+            .size([maxWidth, maxHeight])
             .padding(1.5);
 
+        var r = d3.scale.linear().range([1, maxWidth / 4]).domain([1, 100]);
+        var x = d3.scale.linear().range([1, maxWidth]);
+        var y = d3.scale.linear().range([1, maxHeight]);
+
+
+
+        d3.select("#svg-maintenability").html("<svg></svg>");
         var svg = d3.select("#svg-maintenability").select("svg")
-            .attr("width", diameter)
-            .attr("height", diameter)
+            .attr("width", maxWidth)
+            .attr("height", maxHeight)
             .attr("class", "bubble");
 
 
@@ -69,7 +77,12 @@
 
             node
                 .append('circle')
+                // uncomment following line if you want fixed size for your bubble (cyclo=1 => size=1)
+                //.attr("r", function(d) { return r(d.value);})
                 .attr("r", function(d) { return d.r; })
+                .attr("x", function(d) { return x(d.x)})
+                .attr("y", function(d) { return y(d.y)})
+
                 .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
                 // events
                 .on('mouseover', function(d) {
@@ -131,7 +144,7 @@
             return {"children":datas};
         }
 
-        d3.select(self.frameElement).style("height", diameter + "px");
+        d3.select(self.frameElement).style("height", maxWidth + "px");
 
 
         // Save as

diff --git a/templates/html/summary/report.html.twig b/templates/html/summary/report.html.twig
@@ -15,7 +15,7 @@
 
 
 
-    <h1>PhpMetrics report</h1>
+    <h1 id="title">PhpMetrics report</h1>
 
     <div class="row">
         <div class="well accessibility-box">
@@ -43,7 +43,7 @@
         <div class="row tab active" id="overview">
             <div class="col-3">
                 <h3>Maintenability</h3>
-                <small><a id="btn-save-maintenability" download="phpmetric-maintenability.svg">Download (as SVG)</a></small>
+                <small><a id="btn-save-maintenability" download="phpmetric-maintenability.svg">Download (as SVG)</a> | <a onclick="return zoom('svg-maintenability', updateMaintenablityChart);">zoom</a></small>
                 <div id="svg-maintenability"><svg /></div>
 
                 <div class="well ">
@@ -61,7 +61,7 @@
             <div class=" col-3">
 
                 <h3 id="title-custom">Custom chart</h3>
-                <small><a id="btn-save-custom" download="phpmetric-custom.svg">Download (as SVG)</a></small>
+                <small><a id="btn-save-custom" download="phpmetric-custom.svg">Download (as SVG)</a> | <a onclick="return zoom('svg-custom', updateCustomChart);">zoom</a></small>
                 <div id="svg-custom"><svg /></div>
 
                 <div class="well">
@@ -104,7 +104,7 @@
             </div>
             <div class="col-3">
                 <h3>Abstractness / Instability</h3>
-                <small><a id="btn-save-abstractness" download="phpmetric-abstractness.svg">Download (as SVG)</a></small>
+                <small><a id="btn-save-abstractness" download="phpmetric-abstractness.svg">Download (as SVG)</a> | <a onclick="return zoom('svg-abstractness', updateAbstractnessChart);">zoom</a></small>
                 <div id="svg-abstractness"><svg /></div>
             </div>
         </div>