Fixes #125

Gruntfile.js

@@ -32,7 +32,6 @@ module.exports = function(grunt) {
       files: ['lib/**/*.coffee', 'test/unit/**/*.mocha.coffee'],
       tasks: ['concat', 'coffeelint', 'coffee', 'karma:unminified', 'uglify', 'karma:minified'],
       // tasks: ['concat', 'coffee', 'uglify']
-
     },
 
     karma: {

dist/line-chart.coffee

@@ -1,5 +1,5 @@
 ###
-line-chart - v1.1.3 - 10 September 2014
+line-chart - v1.1.3 - 14 October 2014
 https://github.com/n3-charts/line-chart
 Copyright (c) 2014 n3-charts
 ###
@@ -16,6 +16,9 @@ directive('linechart', ['n3utils', '$window', '$timeout', (n3utils, $window, $ti
     _u = n3utils
     dim = _u.getDefaultMargins()
 
+    # Hacky hack so the chart doesn't grow in height when resizing...
+    element[0].style['font-size'] = 0
+
     scope.updateDimensions = (dimensions) ->
       top = _u.getPixelCssProp(element[0].parentElement, 'padding-top')
       bottom = _u.getPixelCssProp(element[0].parentElement, 'padding-bottom')
@@ -24,20 +27,18 @@ directive('linechart', ['n3utils', '$window', '$timeout', (n3utils, $window, $ti
       dimensions.width = (element[0].parentElement.offsetWidth || 900) - left - right
       dimensions.height = (element[0].parentElement.offsetHeight || 500) - top - bottom
 
-    scope.update = ->
+    scope.redraw = ->
       scope.updateDimensions(dim)
-      scope.redraw(dim)
+      scope.update(dim)
 
 
     isUpdatingOptions = false
     initialHandlers =
       onSeriesVisibilityChange: ({series, index, newVisibility}) ->
-        isUpdatingOptions = true
         scope.options.series[index].visible = newVisibility
         scope.$apply()
-        isUpdatingOptions = false
 
-    scope.redraw = (dimensions) ->
+    scope.update = (dimensions) ->
       options = _u.sanitizeOptions(scope.options, attrs.mode)
       handlers = angular.extend(initialHandlers, _u.getTooltipHandlers(options))
       dataPerSeries = _u.getDataPerSeries(scope.data, options)
@@ -84,15 +85,12 @@ directive('linechart', ['n3utils', '$window', '$timeout', (n3utils, $window, $ti
     promise = undefined
     window_resize = ->
       $timeout.cancel(promise) if promise?
-      promise = $timeout(scope.update, 1)
+      promise = $timeout(scope.redraw, 1)
 
     $window.addEventListener('resize', window_resize)
 
-    scope.$watch('data', scope.update, true)
-    scope.$watch('options', (v) ->
-      return if isUpdatingOptions
-      scope.update()
-    , true)
+    scope.$watch('data', scope.redraw, true)
+    scope.$watch('options', scope.redraw, true)
 
   return {
     replace: true
@@ -403,10 +401,11 @@ mod.factory('n3utils', ['$window', '$log', '$rootScope', ($window, $log, $rootSc
             )
 
         item.on('click', (s, i) ->
-          isNowVisible = that.toggleSeries(svg, i)
-
-          d3.select(this).attr('opacity', if isNowVisible then '1' else '0.2')
-          handlers.onSeriesVisibilityChange?({series: s, index: i, newVisibility: isNowVisible})
+          handlers.onSeriesVisibilityChange?({
+            series: s,
+            index: i,
+            newVisibility: !(s.visible isnt false)
+          })
         )
 
         item.append('circle')
@@ -1095,7 +1094,7 @@ mod.factory('n3utils', ['$window', '$log', '$rootScope', ($window, $log, $rootSc
         return [] unless o = options.axes[key]
 
         domain = this.yExtent(
-          series.filter (s) -> s.axis is key
+          series.filter (s) -> s.axis is key and s.visible isnt false
           data
           options.stacks.filter (stack) -> stack.axis is key
         )

dist/line-chart.js

@@ -1,6 +1,6 @@
 
 /*
-line-chart - v1.1.3 - 10 September 2014
+line-chart - v1.1.3 - 14 October 2014
 https://github.com/n3-charts/line-chart
 Copyright (c) 2014 n3-charts
  */
@@ -23,6 +23,7 @@ directive('linechart', [
       var dim, initialHandlers, isUpdatingOptions, promise, window_resize, _u;
       _u = n3utils;
       dim = _u.getDefaultMargins();
+      element[0].style['font-size'] = 0;
       scope.updateDimensions = function(dimensions) {
         var bottom, left, right, top;
         top = _u.getPixelCssProp(element[0].parentElement, 'padding-top');
@@ -32,22 +33,20 @@ directive('linechart', [
         dimensions.width = (element[0].parentElement.offsetWidth || 900) - left - right;
         return dimensions.height = (element[0].parentElement.offsetHeight || 500) - top - bottom;
       };
-      scope.update = function() {
+      scope.redraw = function() {
         scope.updateDimensions(dim);
-        return scope.redraw(dim);
+        return scope.update(dim);
       };
       isUpdatingOptions = false;
       initialHandlers = {
         onSeriesVisibilityChange: function(_arg) {
           var index, newVisibility, series;
           series = _arg.series, index = _arg.index, newVisibility = _arg.newVisibility;
-          isUpdatingOptions = true;
           scope.options.series[index].visible = newVisibility;
-          scope.$apply();
-          return isUpdatingOptions = false;
+          return scope.$apply();
         }
       };
-      scope.redraw = function(dimensions) {
+      scope.update = function(dimensions) {
         var axes, columnWidth, dataPerSeries, handlers, isThumbnail, options, svg;
         options = _u.sanitizeOptions(scope.options, attrs.mode);
         handlers = angular.extend(initialHandlers, _u.getTooltipHandlers(options));
@@ -86,16 +85,11 @@ directive('linechart', [
         if (promise != null) {
           $timeout.cancel(promise);
         }
-        return promise = $timeout(scope.update, 1);
+        return promise = $timeout(scope.redraw, 1);
       };
       $window.addEventListener('resize', window_resize);
-      scope.$watch('data', scope.update, true);
-      return scope.$watch('options', function(v) {
-        if (isUpdatingOptions) {
-          return;
-        }
-        return scope.update();
-      }, true);
+      scope.$watch('data', scope.redraw, true);
+      return scope.$watch('options', scope.redraw, true);
     };
     return {
       replace: true,
@@ -431,13 +425,10 @@ mod.factory('n3utils', [
           }
         });
         item.on('click', function(s, i) {
-          var isNowVisible;
-          isNowVisible = that.toggleSeries(svg, i);
-          d3.select(this).attr('opacity', isNowVisible ? '1' : '0.2');
           return typeof handlers.onSeriesVisibilityChange === "function" ? handlers.onSeriesVisibilityChange({
             series: s,
             index: i,
-            newVisibility: isNowVisible
+            newVisibility: !(s.visible !== false)
           }) : void 0;
         });
         item.append('circle').attr({
@@ -1171,7 +1162,7 @@ mod.factory('n3utils', [
           return [];
         }
         domain = this.yExtent(series.filter(function(s) {
-          return s.axis === key;
+          return s.axis === key && s.visible !== false;
         }), data, options.stacks.filter(function(stack) {
           return stack.axis === key;
         }));

lib/line-chart.coffee

@@ -10,6 +10,9 @@ directive('linechart', ['n3utils', '$window', '$timeout', (n3utils, $window, $ti
     _u = n3utils
     dim = _u.getDefaultMargins()
 
+    # Hacky hack so the chart doesn't grow in height when resizing...
+    element[0].style['font-size'] = 0
+
     scope.updateDimensions = (dimensions) ->
       top = _u.getPixelCssProp(element[0].parentElement, 'padding-top')
       bottom = _u.getPixelCssProp(element[0].parentElement, 'padding-bottom')
@@ -18,20 +21,18 @@ directive('linechart', ['n3utils', '$window', '$timeout', (n3utils, $window, $ti
       dimensions.width = (element[0].parentElement.offsetWidth || 900) - left - right
       dimensions.height = (element[0].parentElement.offsetHeight || 500) - top - bottom
 
-    scope.update = ->
+    scope.redraw = ->
       scope.updateDimensions(dim)
-      scope.redraw(dim)
+      scope.update(dim)
 
 
     isUpdatingOptions = false
     initialHandlers =
       onSeriesVisibilityChange: ({series, index, newVisibility}) ->
-        isUpdatingOptions = true
         scope.options.series[index].visible = newVisibility
         scope.$apply()
-        isUpdatingOptions = false
 
-    scope.redraw = (dimensions) ->
+    scope.update = (dimensions) ->
       options = _u.sanitizeOptions(scope.options, attrs.mode)
       handlers = angular.extend(initialHandlers, _u.getTooltipHandlers(options))
       dataPerSeries = _u.getDataPerSeries(scope.data, options)
@@ -78,15 +79,12 @@ directive('linechart', ['n3utils', '$window', '$timeout', (n3utils, $window, $ti
     promise = undefined
     window_resize = ->
       $timeout.cancel(promise) if promise?
-      promise = $timeout(scope.update, 1)
+      promise = $timeout(scope.redraw, 1)
 
     $window.addEventListener('resize', window_resize)
 
-    scope.$watch('data', scope.update, true)
-    scope.$watch('options', (v) ->
-      return if isUpdatingOptions
-      scope.update()
-    , true)
+    scope.$watch('data', scope.redraw, true)
+    scope.$watch('options', scope.redraw, true)
 
   return {
     replace: true

lib/utils/legend.coffee

@@ -67,10 +67,11 @@
             )
 
         item.on('click', (s, i) ->
-          isNowVisible = that.toggleSeries(svg, i)
-
-          d3.select(this).attr('opacity', if isNowVisible then '1' else '0.2')
-          handlers.onSeriesVisibilityChange?({series: s, index: i, newVisibility: isNowVisible})
+          handlers.onSeriesVisibilityChange?({
+            series: s,
+            index: i,
+            newVisibility: !(s.visible isnt false)
+          })
         )
 
         item.append('circle')

lib/utils/scales.coffee

@@ -104,7 +104,7 @@
         return [] unless o = options.axes[key]
 
         domain = this.yExtent(
-          series.filter (s) -> s.axis is key
+          series.filter (s) -> s.axis is key and s.visible isnt false
           data
           options.stacks.filter (stack) -> stack.axis is key
         )

test/unit/legend.mocha.coffee

@@ -81,8 +81,8 @@ describe 'legend', ->
     expect(element.childrenByClass('legendItem')[0].getAttribute('opacity')).to.equal('0.2')
 
     fakeMouse.clickOn(l_0.childNodes[0])
-    expect(fn('lineGroup series_0')).to.equal('initial')
-    expect(fn('dotGroup series_0')).to.equal('initial')
+    expect(fn('lineGroup series_0')).to.equal('')
+    expect(fn('dotGroup series_0')).to.equal('')
     expect(element.childrenByClass('legendItem')[0].getAttribute('opacity')).to.equal('1')
 
   it 'should be able to hide a series at startup', ->

test/unit/size.mocha.coffee

@@ -13,15 +13,15 @@ describe 'size', ->
     </div>
     """
     innerScope = element.childByClass('chart').aElement.isolateScope()
-    sinon.stub(innerScope, 'redraw', ->)
-    sinon.spy(innerScope, 'update')
+    sinon.stub(innerScope, 'update', ->)
+    sinon.spy(innerScope, 'redraw')
 
-  it 'should update when $window resize', inject ($window) ->
+  it 'should redraw when $window resize', inject ($window) ->
     e = document.createEvent('HTMLEvents')
     e.initEvent 'resize', true, false
     $window.dispatchEvent e
 
-  it 'should pass the new dimensions to redraw when $window is resized ', inject ($window) ->
+  it 'should pass the new dimensions to update when $window is resized ', inject ($window) ->
     sinon.stub innerScope, 'updateDimensions', (d) ->
       d.width = 120
       d.height = 50
@@ -31,7 +31,7 @@ describe 'size', ->
     e.initEvent 'resize', true, false
     $window.dispatchEvent e
 
-  describe 'size computation method', ->
+  describe 'computation method', ->
     it 'should have default size', inject (pepito) ->
       {element, outerScope} = pepito.directive("""
       <div>
@@ -40,12 +40,12 @@ describe 'size', ->
       """,
       (element) ->
         innerScope = element.children()[0].aElement.isolateScope()
-        sinon.spy innerScope, 'redraw'
         sinon.spy innerScope, 'update'
+        sinon.spy innerScope, 'redraw'
       )
 
       innerScope = element.childByClass('chart').aElement.isolateScope()
-      expect(innerScope.redraw.args[0][0]).to.eql
+      expect(innerScope.update.args[0][0]).to.eql
         top: 20
         right: 50
         bottom: 60
@@ -61,8 +61,8 @@ describe 'size', ->
       """,
       (element) ->
         innerScope = element.children()[0].aElement.isolateScope()
-        sinon.stub innerScope, 'redraw', ->
-        sinon.spy innerScope, 'update'
+        sinon.stub innerScope, 'update', ->
+        sinon.spy innerScope, 'redraw'
 
         sinon.stub n3utils, 'getPixelCssProp', (element, property) ->
           throw new Error('Invalid id given to getPixelCssProp function') if element.id isnt 'toto'
@@ -83,7 +83,7 @@ describe 'size', ->
       innerScope = element.children()[0].aElement.isolateScope()
 
       outerScope.$digest()
-      expect(innerScope.redraw.args[1][0]).to.eql
+      expect(innerScope.update.args[1][0]).to.eql
         top: 20
         right: 50
         bottom: 60