add pivot table for veris stats, closes #254

meteor/app/client/incidentsveris.html

@@ -12,7 +12,9 @@ Jeff Bryner jbryner@mozilla.com
 <style>
 
 </style>
-<div class="veris-wrapper" id="veris-wrapper">
-
+<div class="container">
+    <div class="veris-wrapper" id="veris-wrapper">
+    
+    </div>
 </div>
 </template>

meteor/app/client/incidentsveris.js

@@ -12,42 +12,7 @@ if (Meteor.isClient) {
     var verisstatsResult = new Object;
 
     Template.incidentsveris.rendered = function () {
-        var ndx = crossfilter();
         var container=document.getElementById('veris-wrapper')
-        var margin = {top: 30, right: 20, bottom: 30, left: 20},
-            width = window.innerWidth - margin.left - margin.right,
-            height = window.innerHeight - margin.top - margin.bottom,
-            minRadius=3,
-            maxRadius=40,
-            clipPadding=4;
-      
-        var fill = d3.scale.category10();
-      
-        var nodes = [],
-            links = [],
-            foci = [{x: width/2, y: height/2}];
-      
-        var svg = d3.select(".veris-wrapper").append("svg")
-            .attr("width", width)
-            .attr("height", height)
-            .append("g")
-            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");    
-      
-        var force = d3.layout.force()
-            .nodes(nodes)
-            .links([])
-            .gravity(.1)
-            .charge(-1000)
-            .size([width, height])
-            .on("tick", tick);
-      
-        var node = svg.selectAll(".node"),
-            link = svg.selectAll(".link");
-
-        //setup the radius scale
-        var r = d3.scale.sqrt()
-            .range([0, maxRadius]);
-
         container.style.cursor='wait'
         Meteor.apply('verisstats',
             [],
@@ -58,20 +23,14 @@ if (Meteor.isClient) {
                     verisstatsResult.result = result;
                     verisstatsResult.content=result.content;
                     verisstatsResult.data=result.data;
-                    ndx.add(result.data);
                     container.style.cursor='auto';
-                    if ( ndx.size() >0 ){
-                        var all = ndx.groupAll();
-                        var tagsDim = ndx.dimension(function(d) {return d.tags;});
-                        var phaseDim = ndx.dimension(function(d) {return d.phase});
-                    }
-                    r.domain([0, d3.max(tagsDim.group().all(), function(d) { return d.value; })]);
-                    tagsDim.group().all().forEach(function(d){
-                        d.r = r(d.value);
-                        d.cr = Math.max(minRadius, d.r);
-                        nodes.push(d);
+                    result.data.forEach(function(d){
+                        //grab just the year from the python datetime object
+                        d.yearOpened=moment(d.dateOpened['$date']).format("YYYY");
+                        //reformat dateOpened from a python datetime object to month date
+                        d.dateOpened=moment(d.dateOpened['$date']).format("MMMM YYYY");
                     });
-                    start();                   
+                    startPivotTable(result.data);
                } else {
                     //debugLog(err,result);
                     verisstatsResult.status='error';
@@ -80,56 +39,14 @@ if (Meteor.isClient) {
            });
 
         container.style.cursor='auto';
-
-        function start() {
-            node = node.data(force.nodes(), function(d) { return d.key;});
-            //make a node for each entry
-            node.enter()
-                .append("a")
-                .attr("class", function(d) { return "node " + d.key; })
-                .attr("class", "node")
-                .call(force.drag);
-        
-            // setp the node body:
-            var nodeBody = node.append("g")
-                .attr("class", "g-success");       
-        
-            nodeBody.append("clipPath")
-                .attr("id", function(d) { return "g-clip-success-" + d.key; })
-                .append("rect");
-                
-            nodeBody.append("circle")
-                .attr("r", function(d) {return d.cr;})
-                .attr("class","successcircle");     
-  
-            node.append("svg:text")
-                .attr("x", "-3em")
-                .attr("y", ".3em")
-                .attr("class","textlabel")
-                .text(function(d) { return d.key; });
-        
-            //make a mouse over
-            node.append("title")
-              .text(function(d) { return d.key + ": " + d.value});
-        
-            //size circle clips  
-            node.selectAll("rect")
-              .attr("y", function(d) { return -d.r - clipPadding; })
-              .attr("height", function(d) { return 2 * d.r + 2 * clipPadding; }); 
-            node.exit().remove();
-            force.start();
-        }
-
-        function tick(e) {
-          var k = .1 * e.alpha;        
-          // Push nodes toward their focus.
-          nodes.forEach(function(o, i) {
-                o.y += (foci[0].y - o.y) * k;
-                o.x += (foci[0].x - o.x) * k;        
-          });
-          
-          svg.selectAll(".node")
-              .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
+        function startPivotTable(tableData){
+        $("#veris-wrapper").pivotUI(
+                        tableData,
+                        {
+                            cols: ["phase"],
+                            rows: ["tags"]
+                        }
+                    );
         }
     };
 

meteor/app/client/js/pivot.mozdef.css

@@ -0,0 +1,20 @@
+table.pvtTable{text-align:left;border-collapse:collapse;}
+table.pvtTable tr th{border:1px solid #CDCDCD;padding:5px}
+table.pvtTable .pvtColLabel{text-align:center}
+table.pvtTable .pvtTotalLabel{text-align:right}
+table.pvtTable tr td{padding:5px;border:1px solid #CDCDCD;vertical-align:top;text-align:right}
+.pvtGrandTotal,.pvtTotal{font-weight:700}
+.pvtVals{text-align:center}
+.pvtAggregator{margin-bottom:5px;}
+.pvtAxisContainer,.pvtVals{border:1px solid gray;padding:5px;min-width:20px;min-height:20px}
+.pvtAxisContainer li{padding:8px 6px;list-style-type:none;cursor:move}
+.pvtAxisContainer li.pvtPlaceholder{-webkit-border-radius:5px;padding:3px 15px;-moz-border-radius:5px;border-radius:5px;border:1px dashed #aaa}
+.pvtAxisContainer li span.pvtAttr{border:1px solid #DEDEDE;padding:2px 5px;white-space:nowrap;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}
+.pvtTriangle{cursor:pointer;color:grey}
+.pvtHorizList li{display:inline}
+.pvtVertList{vertical-align:top}
+.pvtFilteredAttribute{font-style:italic}
+.pvtFilterBox{z-index:100;width:280px;border:1px solid gray;position:absolute;padding:20px;text-align:center}
+.pvtFilterBox h4{margin:0}
+.pvtCheckContainer{text-align:left;overflow:scroll;width:100%;max-height:200px}
+.pvtCheckContainer p{margin:5px}

meteor/public/css/mozdef.css

@@ -132,6 +132,14 @@ caption, legend {
     color: yellow;
 }
 
+.veris-wrapper td{
+    color: black
+}
+
+.veris-wrapper {
+    background-color: rgba(245,245,245,.7)
+}
+
 /*bootstrap overrides*/
 
 .btn {