coconut-graph - npm Package Compare versions

Comparing version 1.0.4 to 1.0.5

index.js

@@ -9,3 +9,5 @@ (function () {
 
-	module.exports = Graph;
+	if (typeof module === 'object' && module.exports) {
+		module.exports = Graph;
+	}
 	if (window) {
@@ -12,0 +14,0 @@ window.Graph = Graph;

package.json

 {
   "name": "coconut-graph",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "Graph lib using d3 ",
@@ -9,4 +9,4 @@ "main": "index.js",
     "bundle": "browserify index.js -o bundle.js",
-    "watchify": "watchify index.js -o bundle.js",
-    "lint": "eslint src/ test/",
+    "watchify": "watchify index.js -d -o bundle.js",
+    "lint": "eslint index.js src/ test/",
     "testsuite": "mocha-phantomjs test/index.html",
@@ -13,0 +13,0 @@ "release": "mversion patch -m"

src/graph.js

@@ -55,7 +55,8 @@ var Class = require('./class.js');
 
+		this._initContainer();
 		this._initAxes();
-		this._initContainer();
 
+		// Attach onresize listener
+		// namespace resize events to be able to attach multiple listeners
 		var self = this;
-		// namespace resize events to be able to attach multiple listeners
 		if (!Graph.onResizeCounter) { Graph.onResizeCounter = 0; }
@@ -118,15 +119,5 @@ d3.select(window).on('resize.' + (Graph.onResizeCounter++), function () {
 		});
-	},
-	_initContainer: function () {
-		var container = d3.select(this.container);
 
-		container.classed('chart ' + (this.options.className || ''), true);
+		var svg = this.svg;
 
-		var svg = container.append('svg')
-			.attr({width: this.outerWidth(), height: this.outerHeight()})
-				.append('g')
-				.attr('transform', 'translate(' + this.margin('left') + ',' + this.margin('top') + ')');
-
-		this.plotContainer = svg.append('g');
-
 		// initialize the (double) x-axis
@@ -161,2 +152,14 @@ var height = this.height();
 		});
+	},
+	_initContainer: function () {
+		var container = d3.select(this.container);
+
+		container.classed('chart ' + (this.options.className || ''), true);
+
+		var svg = container.append('svg')
+			.attr({width: this.outerWidth(), height: this.outerHeight()})
+				.append('g')
+				.attr('transform', 'translate(' + this.margin('left') + ',' + this.margin('top') + ')');
+
+		this.plotContainer = svg.append('g');
 		this.svg = svg;
@@ -169,11 +172,9 @@ },
 
+		// x axis
+		this.scale.x.range([0, width]);
 		this.scale.x.domain(this.extents());
 
-		// call the right x-axis formatter for this period.
-		timeAxis[this.meta.period](this.axes, this.width());
 		svg.selectAll('.x.axis').call(this.axes.xticks);
 		svg.selectAll('.x.axis.labels').call(this.axes.xlabels);
 
-		// x axes
-		this.scale.x.range([0, width]);
 		timeAxis[this.meta.period](this.axes, this.width());
@@ -180,0 +181,0 @@

src/plot/bar.js

 var d3 = require('d3');
 var d3tip = require('d3-tip')(d3);
 
-
 var tip = function (amount_key, readable_interval) {
-    return d3tip().attr('class', 'bar-tooltip')
-        .offset([-10, 0])
-        .html(function(d) {
-            var amount = d[amount_key];
-            if (amount > 1000) {
-                amount = Math.round(amount / 1000) + 'm³';
-            } else {
-                amount = amount + 'l';
-            }
-            return amount + ' / ' + readable_interval;
-        });
+	return d3tip().attr('class', 'bar-tooltip')
+		.offset([-10, 0])
+		.html(function(d) {
+			var amount = d[amount_key];
+			if (amount > 1000) {
+				amount = Math.round(amount / 1000) + 'm³';
+			} else {
+				amount = amount + 'l';
+			}
+			return amount + ' / ' + readable_interval;
+		});
 };
 
 module.exports = function (x, y, plot, graph) {
-    var key = plot.data_key;
-    var max = d3.max(graph.data.values, function(d) { return d[key]; }) * 1.1;
-    y.domain([0, max]).nice();
+	var key = plot.data_key;
+	var max = d3.max(graph.data.values, function(d) { return d[key]; }) * 1.1;
+	y.domain([0, max]).nice();
 
-    if (max > 1000) {
-        graph.axes.y.tickFormat(function (d) { return Math.round(d / 100) / 10; });
-        graph.svg.selectAll('.y.axis > text').text('verbruik [m³]');
-    } else {
-        graph.axes.y.tickFormat(function (d) { return d; });
-        graph.svg.selectAll('.y.axis > text').text('verbruik [l]');
-    }
-    graph.svg.selectAll('.axis.y').call(graph.axes.y);
+	// TODO: make sure it uses the right axis.
+	if (max > 1000) {
+		graph.axes.y.tickFormat(function (d) { return Math.round(d / 100) / 10; });
+		graph.svg.selectAll('.y.axis > text').text('verbruik [m³]');
+	} else {
+		graph.axes.y.tickFormat(function (d) { return d; });
+		graph.svg.selectAll('.y.axis > text').text('verbruik [l]');
+	}
+	graph.svg.selectAll('.axis.y').call(graph.axes.y);
 
-    graph.svg.call(tip(key, graph.meta.readable_interval));
+	graph.svg.call(tip(key, graph.meta.readable_interval));
 
-    var height = this.height();
-    var sliceWidth = this.width() / this.data.slices;
+	var height = graph.height();
 
-    var bar = function (s) {
-        s.attr({
-            x: function(d) { return x(d[0]); },
-            y: function() { return y(0); },
-            width: sliceWidth,
-            height: 0
-        }).transition().duration(100)
-        .attr({
-            height: function(d) { return height - y(d[key]); },
-            y: function(d) { return y(d[key]); }
-        });
-    };
+	var bar = function (s) {
+		var sliceWidth = graph.width() / graph.data.slices;
+		s.attr({
+			x: function(d) { return x(d[0]); },
+			y: function() { return y(0); },
+			width: sliceWidth,
+			height: 0
+		}).transition().duration(100)
+		.attr({
+			height: function(d) { return height - y(d[key]); },
+			y: function(d) { return y(d[key]); }
+		});
+	};
 
-    var sel = graph.plotContainer.selectAll('.bar.' + plot.key).data(this.data.values);
+	var sel = graph.plotContainer.selectAll('.bar.' + plot.key).data(graph.data.values);
 
-    sel.exit().remove();
-    sel.enter().append('rect')
-        .attr('class', 'bar ' + plot.key)
-        .on({mouseover: tip.show, mouseout: tip.hide});
+	sel.exit().remove();
+	sel.enter().append('rect')
+		.attr('class', 'bar ' + plot.key)
+		.on({mouseover: tip.show, mouseout: tip.hide});
 
-    sel.call(bar);
+	sel.call(bar);
 
-    return bar;
+	return bar;
 };

src/plot/line.js

@@ -7,21 +7,21 @@ var d3 = require('d3');
 
-    var line = function (s) {
-        s.attr('d', d3.svg.line()
-            .x(function(d) { return x(d[0]); })
-            .y(function(d) { return y(d[plot.data_key]); })
-        );
-    };
+	var line = function (s) {
+		s.attr('d', d3.svg.line()
+			.x(function(d) { return x(d[0]); })
+			.y(function(d) { return y(d[plot.data_key]); })
+		);
+	};
 
-    graph.plotContainer.selectAll('.line.' + plot.key)
-        .data([graph.data.values])
-        .enter()
-        .append('path')
-            .attr('class', 'plot line ' + plot.key)
-            .attr('data-legend', plot.label || 'series ' + unnamed_series++);
+	graph.plotContainer.selectAll('.line.' + plot.key)
+		.data([graph.data.values])
+		.enter()
+		.append('path')
+			.attr('class', 'plot line ' + plot.key)
+			.attr('data-legend', plot.label || 'series ' + unnamed_series++);
 
-    graph.svg.selectAll('.line.' + plot.key)
-        .transition().duration(200)
-        .call(line);
+	graph.svg.selectAll('.line.' + plot.key)
+		.transition().duration(200)
+		.call(line);
 
-    return line;
+	return line;
 };

src/time-xaxis.js

 var d3 = require('d3');
 require('./d3.nl_nl.js')(d3);
 
-
 module.exports = {
@@ -6,0 +5,0 @@ day: function (axes, width) {

test/spec.js

@@ -5,2 +5,3 @@ /* globals
  */
+
 var data = {
@@ -23,2 +24,3 @@ 'meta': {
 			['2015-05-29T14:30:00', 5, 4],
+			['2015-05-29T14:45:00', 15, 5],
 			['2015-05-29T15:00:00', 6, 5]
@@ -30,6 +32,5 @@ ],
 
-describe('cococonut-graph', function () {
+describe('coconut-graph', function () {
 	chai.should();
 
-
 	describe('Graph loader', function () {
@@ -41,3 +42,3 @@ var spy = chai.spy();
 				{
-					container: 'container',
+					container: 'container1',
 					className: 'extra',
@@ -50,3 +51,3 @@ axes: {y: {includeZero: true}},
 		});
-		var container = document.getElementById('container');
+		var container = document.getElementById('container1');
 
@@ -59,3 +60,3 @@ it('adds classnames to graph container', function () {
 		it('preserves existing classnames on containers', function () {
-			container.className.should.contain('existing-class');
+			container.className.should.contain('container');
 		});
@@ -72,3 +73,3 @@
 		it('should create multiple plots in one chart', function () {
-			var container = 'container';
+			var container = 'container2';
 			loader = new Graph.Loader(Graph.util.extend({}, data), {
@@ -75,0 +76,0 @@ graphs: [

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Lines of code

672

increased by0.6%

Worsened metrics

Total package byte prevSize

24146

decreased by-0.96%

No dependency changes