[Rt-commit] rt branch, 4.6/canned-reports, updated. rt-4.4.1-160-gd20c5c9

[Dustin Collins]

The branch, 4.6/canned-reports has been updated
       via  d20c5c91784ad08b9f31c80369d5e8af628b5370 (commit)
      from  e44d195ac36c96a6800da595a920fb22c30c2920 (commit)

Summary of changes:
 share/html/CannedReport/Elements/Graph | 53 +++++++++++++++++++++++++---------
 1 file changed, 39 insertions(+), 14 deletions(-)

- Log -----------------------------------------------------------------
commit d20c5c91784ad08b9f31c80369d5e8af628b5370
Author: Dustin Collins <strega at bestpractical.com>
Date:   Mon Jan 2 22:44:31 2017 -0500

    Animate graph changes

diff --git a/share/html/CannedReport/Elements/Graph b/share/html/CannedReport/Elements/Graph
index d82bd21..bc50044 100644
--- a/share/html/CannedReport/Elements/Graph
+++ b/share/html/CannedReport/Elements/Graph
@@ -67,29 +67,54 @@ var svg = d3.select("#graph"),
             width = +svg.attr("width") - margin.left - margin.right,
             height = +svg.attr("height") - margin.top - margin.bottom;
 
+var currentGraphData
 function updateGraphData(data, completion) {
-    d3.select("#graph").selectAll("*").remove();
+
 
     var x = d3.scaleBand().rangeRound([0, width]).padding(0.1),
         y = d3.scaleLinear().rangeRound([height, 0]);
-    var g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+
+    if (currentGraphData) {
+        svg.select("g").selectAll(".bar").data(currentGraphData)
+            .transition()
+            .duration(200)
+            .ease(d3.easeLinear)
+            .attr("y", height)
+            .attr("height", 0)
+    }
+
+    setTimeout(function() {
+            svg.selectAll("*").remove();
+            currentGraphData = data
+            loadGraph(currentGraphData, completion)
+    }, 250);
+}
+
+function loadGraph(data, completion) {
+    var x = d3.scaleBand().rangeRound([0, width]).padding(0.1),
+        y = d3.scaleLinear().rangeRound([height, 0]);
 
     x.domain(data.map(function(d) { return d.name; }));
     y.domain([0, d3.max(data, function(d) { return d.value; })]);
 
+    var g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
     g.append("g")
-    .attr("class", "axis axis--x")
-    .attr("transform", "translate(0," + height + ")")
-    .call(d3.axisBottom(x));
-
-    g.selectAll(".bar")
-    .data(data)
-    .enter().append("rect")
-    .attr("class", "bar")
-    .attr("x", function(d) { return x(d.name); })
-    .attr("y", function(d) { return y(d.value); })
-    .attr("width", x.bandwidth())
-    .attr("height", function(d) { return height - y(d.value); });
+        .attr("class", "axis axis--x")
+        .attr("transform", "translate(0," + height + ")")
+        .call(d3.axisBottom(x));
+
+    g.selectAll(".bar").data(data).enter().append("rect")
+        .attr("class", "bar")
+        .attr("x", function(d) { return x(d.name); })
+        .attr("y", function(d) { return height; })
+        .attr("width", x.bandwidth())
+        .attr("height", 0)
+
+    g.selectAll(".bar").data(data).transition()
+        .duration(300)
+        .ease(d3.easeLinear)
+        .attr("y", function(d) { return y(d.value); })
+        .attr("height", function(d) { return height - y(d.value); })
 
     completion();
 }

-----------------------------------------------------------------------