audit_rails 2.0.3 → 2.0.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 9e57ca2c04fe002da6cb8926fe248abcd4bcc665
-  data.tar.gz: 2a74a5654f6c7c14b5eed8eb36010ac6b47f21c1
+  metadata.gz: ef20c62dd3cb3e2a5776d7502155c7005b34018a
+  data.tar.gz: 77618e157b6e3ac7d9f05f6d6224834aacec7c12
 SHA512:
-  metadata.gz: 962fad30c9046a061dc79cf8f481f2c74652317c536461bfbb5268c7265ac515bfd046591879ac03881e06fcbb34beb117b415a7eb67da9f268c13775e6c31d6
-  data.tar.gz: b9de65ce03984955cf056421bfd3b0df227be48b303b55849f46111e71269bc92a89ac3f953ecff22962a55ea82ca35c9b0a2030c1264a75400b9e9d033c7743
+  metadata.gz: 0dd0e22106c23a41f2b12204e09c6cc650868e1624d8bebbbf199d5346a247665d8407ecc47c23df9fe80f2ffe8fa56ebf775ea04d81553d2134859a02696a5f
+  data.tar.gz: a7f4fe28afbacdb64d501a1d65f41e58061ec3f0795a57428ccc2ed41758da458b9038534e763c49d09ca592487d6e72a7c2a68f153b54464d5b689d27bcefa5

data/app/assets/javascripts/audit_rails/application.js

@@ -12,11 +12,9 @@
 //
 //= require jquery
 //= require jquery_ujs
+//= require sleek_charts
 //= require audit_rails/jquery-ui
 //= require audit_rails/date-picker
-//= require audit_rails/Chart.min
-//= require audit_rails/d3/d3.v3
-//= require audit_rails/d3/d3.tip
 //= require audit_rails/user-counts
 //= require audit_rails/page-views
 //= require audit_rails/page-views-for-user

data/app/assets/javascripts/audit_rails/hourly-views.js

@@ -1,72 +1,17 @@
 var data  = JSON.parse( $('div#hourlyViewsCount').attr('data-visit-count'));
 
-var right = d3.max([20, (900 - data.length * 50)]);
-var margin = {top: 40, right: right, bottom: 100, left: 40},
-    width = 960 - margin.left - margin.right,
-    height = 360 - margin.top - margin.bottom;
-
-var x = d3.scale.ordinal()
-    .rangeRoundBands([0, width], .1);
-
-var y = d3.scale.linear()
-    .range([height, 0]);
-
-var xAxis = d3.svg.axis()
-    .scale(x)
-    .orient("bottom");
-
-var yAxis = d3.svg.axis()
-    .scale(y)
-    .orient("left");
-
-var tip = d3.tip()
-  .attr('class', 'd3-tip')
-  .offset([-10, 0])
-  .html(function(d) {
-    return "<strong>Page Views:</strong> <span style='color:red'>" + d.count + "</span>";
-  })
-
-var svg = d3.select("div#hourlyViewsCount").append("svg")
-    .attr("width", width + margin.left + margin.right)
-    .attr("height", height + margin.top + margin.bottom)
-  .append("g")
-    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
-
-svg.call(tip);
-
-x.domain(data.map(function(d) { return d.hour; }));
-y.domain([0, d3.max(data, function(d) { return d.count; })]);
-
-svg.append("g")
-    .attr("class", "x axis")
-    .attr("transform", "translate(0," + height + ")")
-    .call(xAxis)
-    .selectAll("text")
-    .style("text-anchor", "end")
-    .attr("dx", "-.8em")
-    .attr("dy", ".15em")
-    .attr("transform", function(d) {
-                return "rotate(-65)" 
-                });
-
-svg.append("g")
-    .attr("class", "y axis")
-    .call(yAxis)
-  .append("text")
-    .attr("transform", "rotate(-90)")
-    .attr("y", -40)
-    .attr("x", -80)
-    .attr("dy", "0.71em")
-    .style("text-anchor", "end")
-    .text("Page Views");
-
-svg.selectAll(".bar")
-    .data(data)
-  .enter().append("rect")
-    .attr("class", "bar")
-    .attr("x", function(d) { return x(d.hour); })
-    .attr("width", x.rangeBand())
-    .attr("y", function(d) { return y(d.count); })
-    .attr("height", function(d) { return height - y(d.count); })
-    .on('mouseover', tip.show)
-    .on('mouseout', tip.hide);
+barTip({
+        selector:   'div#hourlyViewsCount',
+        data:       data,
+        width:      960,
+        height:     360,
+        margin:     {top: 40, right: 20, bottom: 100, left:40},
+        flexRight:  true,
+        labelAngle: -60,
+        xDomain:    'hour',
+        yDomain:    'count',
+        yAxisText:  'Page Views',
+        tipLabel:   '',
+        tipValue:   'count',
+        tipText:    'Page views'
+    });

data/app/assets/javascripts/audit_rails/page-view-user-contribution.js

@@ -1,122 +1,20 @@
 function pageViewsShareByUser(userName) {
-    var margin = {
-        top: 40,
-        right: 40,
-        bottom: 40,
-        left: 40
-    },
-    width = 500 - margin.left - margin.right,
-    height = 500 - margin.top - margin.bottom,
-    inner = 90,
-    radius = 180, //radius
-    color = d3.scale.category20c(); //builtin range of colors
-
-    var data  = JSON.parse( $('a[data-user="'+ userName +'"]').attr('data-page-visits'));
-    var total = d3.sum(data, function (d) {
-        return d3.sum(d3.values(d));
+    data  = JSON.parse( $('a[data-user="'+ userName +'"]').attr('data-page-visits'));
+    donutTip({
+        selector:       'div#pageViewsShareByUser',
+        data:           data,
+        width:          500,
+        height:         500,
+        margin:         {top: 40, right: 40, bottom: 40, left:40},
+        flexRight:      true,
+        innerRadius:    90,
+        outerRadius:    180,
+        color:          d3.scale.category20c(),
+        xDomain:        'page',
+        yDomain:        'count',
+        tipLabel:       '',
+        tipValue:       'count',
+        tipText:        'Page Views',
+        totalLabel:     'Views'
     });
-    var div = d3.select("body").append("div")
-        .attr("class", "tooltip")
-        .style("opacity", 0);
-
-    var vis = d3.select("div#pageViewsShareByUser")
-                .append("svg:svg") //create the SVG element inside the <body>    
-                .data([data]) //associate our data with the document
-                .attr("width", width + margin.left + margin.right)
-                .attr("height", height + margin.top + margin.bottom)
-                .append("svg:g") //make a group to hold our pie chart
-                .attr("transform", "translate(" + radius * 1.5 + "," + radius * 1.5 + ")");
-    var textTop = vis.append("text")
-                .attr("dy", ".35em")
-                .style("text-anchor", "middle")
-                .attr("class", "textTop")
-                .text("TOTAL")
-                .attr("y", -10),
-        textBottom = vis.append("text")
-                .attr("dy", ".35em")
-                .style("text-anchor", "middle")
-                .attr("class", "textBottom")
-                .text(total + " Views")
-                .attr("y", 10);
-
-    var arc = d3.svg.arc()
-                .innerRadius(inner)
-                .outerRadius(radius);
-    var arcOver = d3.svg.arc()
-                .innerRadius(inner + 5)
-                .outerRadius(radius + 5);
-
-    var pie = d3.layout.pie() //this will create arc data for us given a list of values
-                .value(function (d) {
-                    return d.count;
-                }); //we must tell it out to access the value of each element in our data array
-
-    var arcs = vis.selectAll("g.slice") //this selects all <g> elements with class slice (there aren't any yet)
-                .data(pie) //associate the generated pie data (an array of arcs, each having startAngle, endAngle and value properties) 
-                .enter() //this will create <g> elements for every "extra" data element that should be associated with a selection. The result is creating a <g> for every object in the data array
-                .append("svg:g") //create a group to hold each slice (we will have a <path> and a <text> element associated with each slice)
-                .attr("class", "slice") //allow us to style things in the slices (like text)
-                .on('mousemove', function (d, i) {
-                    d3.select(this).select("path").transition()
-                    .duration(200)
-                    .attr("d", arcOver);
-                    
-                    textTop.text(d3.select(this).datum().data.page)
-                    .attr("y", -10);
-                textBottom.text(d3.select(this).datum().data.count + " Views")
-                    .attr("y", 10);
-                    
-                    div.transition()
-                    .duration(200)
-                    .style("opacity", 0.9);
-                    div.html("<strong>Page Views:</strong> <span style='color:red'>" + d.data.count + "</span>")
-                    .style("left", (d3.event.pageX - 57) + "px")
-                    .style("top", (d3.event.pageY - 50) + "px")
-                    .style("z-index", 10000)
-                })
-                .on("mouseout", function (d) {
-                    d3.select(this).select("path").transition()
-                    .duration(100)
-                    .attr("d", arc);
-        
-                    textTop.text("TOTAL")
-                    .attr("y", -10);
-                    textBottom.text(total + " Views");
-                    
-                    div.transition()
-                    .duration(500)
-                    .style("opacity", 0);
-    });
-
-    arcs.append("svg:path")
-        .attr("fill", function (d, i) {
-            return color(i);
-        }) //set the color for each slice to be chosen from the color function defined above
-        .attr("d", arc); //this creates the actual SVG path using the associated data (pie) with the arc drawing function
-    
-    var legend = d3.select("div#pageViewsShareByUser").append("svg")
-        .attr("class", "legend")
-        .attr("width", radius)
-        .attr("height", radius * 2)
-        .selectAll("g")
-        .data(data)
-        .enter().append("g")
-        .attr("transform", function (d, i) {
-        return "translate(0," + i * 20 + ")";
-    });
-    
-    legend.append("rect")
-        .attr("width", 18)
-        .attr("height", 18)
-        .style("fill", function (d, i) {
-        return color(i);
-    });
-    
-    legend.append("text")
-        .attr("x", 24)
-        .attr("y", 9)
-        .attr("dy", ".35em")
-        .text(function (d) {
-            return d.page;
-        });
 }

data/app/assets/javascripts/audit_rails/page-views-for-user.js

@@ -1,72 +1,19 @@
 function pageViewsForUser(userName){
-
     var data  = JSON.parse( $('a[data-user="'+ userName +'"]').attr('data-page-visits'));
 
-    var right = d3.max([20, (620 - data.length * 50)]);
-    var margin = {top: 40, right: right, bottom: 100, left: 40},
-        width = 650 - margin.left - margin.right,
-        height = 360 - margin.top - margin.bottom;
-
-    var x = d3.scale.ordinal()
-        .rangeRoundBands([0, width], .1);
-
-    var y = d3.scale.linear()
-        .range([height, 0]);
-
-    var xAxis = d3.svg.axis()
-        .scale(x)
-        .orient("bottom");
-
-    var yAxis = d3.svg.axis()
-        .scale(y)
-        .orient("left");
-
-    var tip = d3.tip()
-      .attr('class', 'd3-tip')
-      .offset([-10, 0])
-      .html(function(d) {
-        return "<strong>Page Views:</strong> <span style='color:red'>" + d.count + "</span>";
-      })
-
-    var svg = d3.select("div#pageViewsByUser").append("svg")
-        .attr("width", width + margin.left + margin.right)
-        .attr("height", height + margin.top + margin.bottom)
-      .append("g")
-        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
-
-    svg.call(tip);
-
-    x.domain(data.map(function(d) { return d.page; }));
-    y.domain([0, d3.max(data, function(d) { return d.count; })]);
-
-    svg.append("g")
-        .attr("class", "x axis")
-        .attr("transform", "translate(0," + height + ")")
-        .call(xAxis)
-        .selectAll("text")
-        .style("text-anchor", "end")
-        .attr("dx", "-.8em")
-        .attr("dy", ".15em")
-        .attr("transform", function(d) {
-                    return "rotate(-65)" 
-                    });
-
-    svg.append("g")
-        .attr("class", "y axis")
-        .call(yAxis)
-      .append("text")
-        .attr("transform", "rotate(-90)")
-        .attr("y", -40)
-        .attr("x", -80)
-
-    svg.selectAll(".bar")
-        .data(data)
-      .enter().append("rect")
-        .attr("class", "bar")
-        .attr("x", function(d) { return x(d.page); })
-        .attr("width", x.rangeBand())
-        .attr("y", function(d) { return y(d.count); })
-        .attr("height", function(d) { return height - y(d.count); })
-        .on('mouseover', tip.show)
-        .on('mouseout', tip.hide);
-}
+    barTip({
+            selector:   'div#pageViewsByUser',
+            data:       data,
+            width:      960,
+            height:     360,
+            margin:     {top: 40, right: 20, bottom: 100, left:40},
+            flexRight:  true,
+            labelAngle: -60,
+            xDomain:    'page',
+            yDomain:    'count',
+            yAxisText:  'Page Views',
+            tipLabel:   '',
+            tipValue:   'count',
+            tipText:    'Page views'
+        });
+}

data/app/assets/javascripts/audit_rails/page-views.js

@@ -1,71 +1,17 @@
 var data  = JSON.parse( $('div#pageViewsCount').attr('data-visit-count'));
-var right = d3.max([20, (900 - data.length * 50)]);
-var margin = {top: 40, right: right, bottom: 100, left: 40},
-    width = 960 - margin.left - margin.right,
-    height = 360 - margin.top - margin.bottom;
 
-var x = d3.scale.ordinal()
-    .rangeRoundBands([0, width], .1);
-
-var y = d3.scale.linear()
-    .range([height, 0]);
-
-var xAxis = d3.svg.axis()
-    .scale(x)
-    .orient("bottom");
-
-var yAxis = d3.svg.axis()
-    .scale(y)
-    .orient("left");
-
-var tip = d3.tip()
-  .attr('class', 'd3-tip')
-  .offset([-10, 0])
-  .html(function(d) {
-    return "<strong>Page Views:</strong> <span style='color:red'>" + d.count + "</span>";
-  })
-
-var svg = d3.select("div#pageViewsCount").append("svg")
-    .attr("width", width + margin.left + margin.right)
-    .attr("height", height + margin.top + margin.bottom)
-  .append("g")
-    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
-
-svg.call(tip);
-
-x.domain(data.map(function(d) { return d.page; }));
-y.domain([0, d3.max(data, function(d) { return d.count; })]);
-
-svg.append("g")
-    .attr("class", "x axis")
-    .attr("transform", "translate(0," + height + ")")
-    .call(xAxis)
-    .selectAll("text")
-    .style("text-anchor", "end")
-    .attr("dx", "-.8em")
-    .attr("dy", ".15em")
-    .attr("transform", function(d) {
-                return "rotate(-65)" 
-                });
-
-svg.append("g")
-    .attr("class", "y axis")
-    .call(yAxis)
-  .append("text")
-    .attr("transform", "rotate(-90)")
-    .attr("y", -40)
-    .attr("x", -80)
-    .attr("dy", "0.71em")
-    .style("text-anchor", "end")
-    .text("Page Views");
-
-svg.selectAll(".bar")
-    .data(data)
-  .enter().append("rect")
-    .attr("class", "bar")
-    .attr("x", function(d) { return x(d.page); })
-    .attr("width", x.rangeBand())
-    .attr("y", function(d) { return y(d.count); })
-    .attr("height", function(d) { return height - y(d.count); })
-    .on('mouseover', tip.show)
-    .on('mouseout', tip.hide);
+barTip({
+        selector:   'div#pageViewsCount',
+        data:       data,
+        width:      960,
+        height:     360,
+        margin:     {top: 40, right: 20, bottom: 100, left:40},
+        flexRight:  true,
+        labelAngle: -60,
+        xDomain:    'page',
+        yDomain:    'count',
+        yAxisText:  'Page Views',
+        tipLabel:   '',
+        tipValue:   'count',
+        tipText:    'Page views'
+    });

data/app/assets/javascripts/audit_rails/user-counts.js

@@ -1,72 +1,17 @@
 var data  = JSON.parse( $('div#userViewsCount').attr('data-visit-count'));
 
-var right = d3.max([20, (900 - data.length * 50)]);
-var margin = {top: 40, right: right, bottom: 100, left: 40},
-    width = 960 - margin.left - margin.right,
-    height = 360 - margin.top - margin.bottom;
-
-var x = d3.scale.ordinal()
-    .rangeRoundBands([0, width], .1);
-
-var y = d3.scale.linear()
-    .range([height, 0]);
-
-var xAxis = d3.svg.axis()
-    .scale(x)
-    .orient("bottom");
-
-var yAxis = d3.svg.axis()
-    .scale(y)
-    .orient("left");
-
-var tip = d3.tip()
-  .attr('class', 'd3-tip')
-  .offset([-10, 0])
-  .html(function(d) {
-    return "<strong>Page Views:</strong> <span style='color:red'>" + d.count + "</span>";
-  })
-
-var svg = d3.select("div#userViewsCount").append("svg")
-    .attr("width", width + margin.left + margin.right)
-    .attr("height", height + margin.top + margin.bottom)
-  .append("g")
-    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
-
-svg.call(tip);
-
-x.domain(data.map(function(d) { return d.user; }));
-y.domain([0, d3.max(data, function(d) { return d.count; })]);
-
-svg.append("g")
-    .attr("class", "x axis")
-    .attr("transform", "translate(0," + height + ")")
-    .call(xAxis)
-    .selectAll("text")
-    .style("text-anchor", "end")
-    .attr("dx", "-.8em")
-    .attr("dy", ".15em")
-    .attr("transform", function(d) {
-                return "rotate(-65)" 
-                });
-
-svg.append("g")
-    .attr("class", "y axis")
-    .call(yAxis)
-  .append("text")
-    .attr("transform", "rotate(-90)")
-    .attr("y", -40)
-    .attr("x", -80)
-    .attr("dy", "0.71em")
-    .style("text-anchor", "end")
-    .text("Page Views");
-
-svg.selectAll(".bar")
-    .data(data)
-  .enter().append("rect")
-    .attr("class", "bar")
-    .attr("x", function(d) { return x(d.user); })
-    .attr("width", x.rangeBand())
-    .attr("y", function(d) { return y(d.count); })
-    .attr("height", function(d) { return height - y(d.count); })
-    .on('mouseover', tip.show)
-    .on('mouseout', tip.hide);
+barTip({
+        selector:   'div#userViewsCount',
+        data:       data,
+        width:      960,
+        height:     360,
+        margin:     {top: 40, right: 20, bottom: 100, left:40},
+        flexRight:  true,
+        labelAngle: -60,
+        xDomain:    'user',
+        yDomain:    'count',
+        yAxisText:  'Page Views',
+        tipLabel:   '',
+        tipValue:   'count',
+        tipText:    'Page views'
+    });