GPII-1584: begin implementing transitions

fluid-project · Mar 8, 2016 · 3ae0c3d · 3ae0c3d
1 parent 33ca0fd
commit 3ae0c3d
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 18 deletions.
diff --git a/public/src/js/line.js b/public/src/js/line.js
@@ -46,7 +46,9 @@ https://raw.githubusercontent.com/fluid-project/chartAuthoring/master/LICENSE.tx
             addArea: false,
             // Whether or not to add a point to each datapoint forming the line
             addPoints: false,
-            pointRadius: 2
+            pointRadius: 2,
+            // In milliseconds
+            transitionLength: 2000
         },
         styles: {
             svg: "floe-ca-lineChart-chart",
@@ -157,7 +159,7 @@ https://raw.githubusercontent.com/fluid-project/chartAuthoring/master/LICENSE.tx
         // Remove any older drawn elements from a previous dataset
         that.locate("xAxis").remove();
         that.locate("yAxis").remove();
-        that.locate("chartLine").remove();
+        // that.locate("chartLine").remove();
         that.locate("chartLinePoint").remove();
     };
 
@@ -190,20 +192,43 @@ https://raw.githubusercontent.com/fluid-project/chartAuthoring/master/LICENSE.tx
         var dataSet = that.model.wrappedDataSet,
             chartLineClass = that.classes.chartLine,
             svg = that.svg,
-            color = that.colorScale;
+            color = that.colorScale,
+            transitionLength = that.options.lineOptions.transitionLength;
 
-        // Append the line based on the dataset
-        fluid.each(dataSet, function (setItem, idx) {
-            svg.append("path")
-                .data([setItem.data])
-                .attr({
-                    "class": chartLineClass,
-                    "fill": "none",
-                    "stroke": color(idx),
-                    "d": that.line
-                });
-        });
+        // Bind data
+        var chartLinePaths = svg.selectAll("path")
+            .data(dataSet, function (d) {
+                return d.id;
+            });
+
+        // Append lines where needed
+        chartLinePaths.enter()
+            .append("path")
+            .attr({
+                "class": chartLineClass,
+                "fill": "none",
+                "stroke": function (d, idx) {
+                    return color(idx);
 
+                },
+                "d": function (d) {
+                    return that.line(d.data);
+                }
+
+            });
+
+        // Remove any removed lines
+        chartLinePaths.exit().remove();
+
+        // Transition lines where needed
+        var transitionPaths = svg.selectAll("." + chartLineClass);
+
+        transitionPaths.transition().duration(transitionLength)
+            .attr({
+                "d": function (d) {
+                    return that.line(d.data);
+                }
+            });
     };
 
     floe.chartAuthoring.lineChart.chart.addArea = function (that) {

diff --git a/public/tests/js/lineTests.js b/public/tests/js/lineTests.js
@@ -473,6 +473,7 @@ https://raw.githubusercontent.com/fluid-project/chartAuthoring/master/LICENSE.tx
 
         fluid.each(chartLines, function (chartLine, idx) {
             jqUnit.assertNotEquals("The chart line element is created with the proper selector", 0, chartLine.length);
+
             floe.tests.chartAuthoring.validateBoundData(chartLine, expectedDataSet[idx].data);
         });
     };
@@ -481,7 +482,7 @@ https://raw.githubusercontent.com/fluid-project/chartAuthoring/master/LICENSE.tx
     // dataset, checks that the data is bound and matches the dataset
     floe.tests.chartAuthoring.validateBoundData = function (boundElement,  expectedDataSet) {
 
-        var boundElementData = boundElement.__data__ !== undefined ? boundElement.__data__ : boundElement[0].__data__;
+        var boundElementData = boundElement.__data__ !== undefined ? boundElement.__data__.data : boundElement[0].__data__.data;
 
         jqUnit.assertEquals("The length of the bound data is the same as that of the expected dataset", expectedDataSet.length, boundElementData.length);
 
@@ -497,7 +498,7 @@ https://raw.githubusercontent.com/fluid-project/chartAuthoring/master/LICENSE.tx
             lineDescId = that.locate("description").attr("id"),
             lineAriaLabelledByAttr = chart.attr("aria-labelledby"),
             shouldHaveArea = that.options.lineOptions.addArea,
-            shouldHavPoints = that.options.lineOptions.addPoints;
+            shouldHavePoints = that.options.lineOptions.addPoints;
 
         jqUnit.assertNotEquals("The SVG element is created with the proper selector", 0, chart.length);
 
@@ -530,7 +531,7 @@ https://raw.githubusercontent.com/fluid-project/chartAuthoring/master/LICENSE.tx
             });
         }
 
-        if (shouldHavPoints) {
+        if (shouldHavePoints) {
             var chartLinePointGroups = that.locate("chartLinePointGroup");
 
             jqUnit.assertNotEquals("The chart line point group element is created with the proper selector", 0, chartLinePointGroups.length);
@@ -569,7 +570,8 @@ https://raw.githubusercontent.com/fluid-project/chartAuthoring/master/LICENSE.tx
             },
             lineOptions: {
                 addArea: true,
-                addPoints: true
+                addPoints: true,
+                interpolation: "cardinal"
             }
         });