Converted the 'Dashboard' tab of the ViewRepoImpact view to use a sin…

…gle SVG div.

WebGitNet/Scripts/repo-impact.js

@@ -1,37 +1,57 @@
 /// <reference path="jquery-1.4.4-vsdoc.js" />
 
-function buildGraph(div, column) {
+function readValues(column, normalize) {
+    normalize = normalize || function (a) { return a; };
+
     var headers = $("#stats-table thead th").get();
     var getIndex = function (headerText) {
         return headers.indexOf($.map(headers, function (h) { if ($(h).text() === headerText) { return h; } })[0]);
     };
 
     var rows = $("#stats-table tbody tr");
     var getValues = function (headerText, normalize) {
-        normalize = normalize || function (a) { return a; };
         var colIndex = getIndex(headerText);
         return $.map(rows, function (item) { return normalize($($(item).find("td")[colIndex]).text()); });
     };
 
-    var names = getValues("Author");
-    var values = getValues(column, function (a) { return +a; });
+    return getValues(column, normalize);
+}
+
+function buildGraph(div) {
 
-    var r = Raphael(div);
-    r.g.text(250, 20, column).attr({ "font-size": 20 });
-    var pie = r.g.piechart(110, 110, 100, values, { legend: names, legendpos: "east" })
-    pie.hover(function () {
+    var labels = readValues("Author");
+    var commits = readValues("Commits", function (a) { return +a; });
+    var insertions = readValues("Insertions", function (a) { return +a; });
+    var deletions = readValues("Deletions", function (a) { return +a; });
+    var impact = readValues("Impact", function (a) { return +a; });
+
+    var hIn = function () {
         this.sector.stop();
         this.sector.scale(1.1, 1.1, this.cx, this.cy);
         if (this.label) {
             this.label[0].stop();
             this.label[0].scale(1.5);
             this.label[1].attr({ "font-weight": 800 });
         }
-    }, function () {
+    };
+
+    var hOut = function () {
         this.sector.animate({ scale: [1, 1, this.cx, this.cy] }, 500, "bounce");
         if (this.label) {
             this.label[0].animate({ scale: 1 }, 500, "bounce");
             this.label[1].attr({ "font-weight": 400 });
         }
-    });
+    };
+
+    var r = Raphael(div, 1000, 220);
+    r.g.text(250, 20, "Commits").attr({ "font-size": 20 });
+    r.g.text(750, 20, "Impact").attr({ "font-size": 20 });
+    r.g.piechart(110, 110, 100, commits, { legend: labels, legendpos: "east" }).hover(hIn, hOut);
+    r.g.piechart(610, 110, 100, impact, { legend: labels, legendpos: "east" }).hover(hIn, hOut);
 }
+
+$(function () {
+    impact("weekly-graph", data, { heightfunc: Math.sqrt });
+
+    buildGraph("users-dashboard");
+});

WebGitNet/Views/Browse/ViewRepoImpact.cshtml

@@ -54,46 +54,30 @@
     <script src="@Url.Content("~/Scripts/g.raphael/g.pie-min.js")" type="text/javascript"></script>
     <script src="@Url.Content("~/Scripts/g.raphael/g.impact.js")" type="text/javascript"></script>
     <script type="text/javascript">
+        var data = @Html.Raw(serializer.Serialize(json));
+
         $(function () {
             $(".tabs").tabs();
             $(".tablesorter").tablesorter();
-
-            buildGraph("commit-graph", "Commits");
-            buildGraph("impact-graph", "Impact");
-
-            var data = @Html.Raw(serializer.Serialize(json));
-            impact("weekly-graph", data, { heightfunc: Math.sqrt });
         });
     </script>
     <script src="@Url.Content("~/Scripts/repo-impact.js")" type="text/javascript"></script>
     <style>
-        #commit-graph, #impact-graph
-        {
-            width: 500px;
-            height: 220px;
-            display: inline-block;
-        }
-
         #weekly-graph
         {
-            clear: left;
             overflow: auto;
-            width: 100%;
+            min-height: 400px;
         }
     </style>
 }
 
 <div class="tabs">
 <ul>
-    <li><a href="#impact-graphs">Dashboard</a></li>
+    <li><a href="#users-dashboard">Dashboard</a></li>
     <li><a href="#users-details">Details</a></li>
     <li><a href="#weekly-graph">Weekly Impact</a></li>
 </ul>
-<div id="impact-graphs">
-    <div id="commit-graph"></div>
-    <div id="impact-graph"></div>
-</div>
-<div id="weekly-graph"></div>
+<div id="users-dashboard"></div>
 <div id="users-details">
 <table class="tablesorter" id="stats-table">
   <thead>
@@ -119,4 +103,5 @@
   </tbody>
 </table>
 </div>
-</div>
+<div id="weekly-graph"></div>
+</div>