fix($components.line) Fixed bug with line accessor functions.

I broke this in my legend branch.

Removed X and Y line generator functions from being directly
configurable on the line component. Instead using the accessor functions
defined in the data configuration.

Fixed broken tests.

Added new test to ensure data config X and Y accessors functions are
called when supplied.

src/components/line.js

@@ -21,12 +21,20 @@ function (array, config, obj, string) {
       data_,
       root_;
 
+    /**
+     * Default X data accessor function.
+     * TODO: move to common location.
+     */
     x_ = function(d) {
-      return config_.xScale(d.x);
+      return d.x;
     };
 
+    /**
+     * Default Y data accessor function.
+     * TODO: move to common location.
+     */
     y_ = function(d) {
-      return config_.yScale(d.y);
+      return d.y;
     };
 
     defaults_ = {
@@ -36,8 +44,6 @@ function (array, config, obj, string) {
       color: 'steelBlue',
       showInLegend: true,
       lineGenerator: d3.svg.line(),
-      x: x_,
-      y: y_,
       interpolate: 'linear'
     };
 
@@ -59,12 +65,18 @@ function (array, config, obj, string) {
     };
 
     line.update = function () {
-      var dataConfig = line.data();
+      var dataConfig = line.data(),
+          x = dataConfig.x || x_,
+          y = dataConfig.y || y_;
 
       // Configure the lineGenerator function
       config_.lineGenerator
-        .x(config_.x)
-        .y(config_.y)
+        .x(function(d, i) {
+          return config_.xScale(x(d, i));
+        })
+        .y(function(d, i) {
+          return config_.yScale(y(d, i));
+        })
         .interpolate(config_.interpolate);
 
       root_.select('.gl-line')
@@ -100,9 +112,7 @@ function (array, config, obj, string) {
         'id',
         'xScale',
         'yScale',
-        'lineGenerator',
-        'x',
-        'y'
+        'lineGenerator'
       ]
     ));
 

test/unit/components/line.spec.js

@@ -19,9 +19,9 @@ function (d3, object, components) {
       ]
     }];
 
-    function setData() {
-      testLine.config({'dataId': 'fakeData'});
-      testLine.data(data);
+    function setData(d, id) {
+      testLine.config({'dataId': id || 'fakeData'});
+      testLine.data(d || data);
     }
 
     function setScales() {
@@ -44,9 +44,7 @@ function (d3, object, components) {
         'xScale',
         'yScale',
         'data',
-        'lineGenerator',
-        'x',
-        'y'
+        'lineGenerator'
       );
     });
 
@@ -98,6 +96,59 @@ function (d3, object, components) {
 
     });
 
+    describe('line generator', function() {
+      var lineGenerator,
+        mockScale,
+        dataConfig,
+        selection,
+        accessor;
+
+      beforeEach(function() {
+        selection = jasmine.svgFixture();
+        lineGenerator = testLine.lineGenerator();
+        accessor = {
+          x: function(d) { return d; },
+          y: function(d) { return d + 2; }
+        };
+        mockScale = function(d) { return d; };
+        dataConfig = {
+          id: 'fakeData',
+          data: [{ x: 100, y: 200 }]
+        };
+        setData([dataConfig]);
+        testLine.xScale(mockScale);
+        testLine.yScale(mockScale);
+        spyOn(accessor, 'x').andCallThrough();
+        spyOn(accessor, 'y').andCallThrough();
+        testLine.render(selection);
+      });
+
+      it('applies the default X accessor fn', function() {
+        lineGenerator.x(1);
+        expect(accessor.x).not.toHaveBeenCalled();
+      });
+
+      it('applies the data config X accessor fn when present', function() {
+        dataConfig.x = accessor.x;
+        testLine.update();
+        lineGenerator.x(1);
+        expect(accessor.x).toHaveBeenCalled();
+      });
+
+      it('applies the default Y accessor fn', function() {
+        lineGenerator.y(1);
+        expect(accessor.y).not.toHaveBeenCalled();
+      });
+
+      it('applies the data config X accessor fn when present', function() {
+        dataConfig.y = accessor.y;
+        testLine.update();
+        lineGenerator.y(1);
+        expect(accessor.y).toHaveBeenCalled();
+      });
+
+    });
+
     describe('xScale()', function () {
 
       it('sets/gets the xScale', function () {
@@ -198,4 +249,4 @@ function (d3, object, components) {
 
   });
 
-});
+});