Merge branch 'feature/extendAttribute' of https://github.com/muddydix…

…on/rickshaw

examples/bars.html

@@ -41,6 +41,7 @@
 		}, {
 			color: "#6060c0",
 			data: seriesData[2],
+			opacity: 0.1
 		}
 	]
 } );

examples/lines.html

@@ -42,7 +42,9 @@
 		{
 			color: "#c05020",
 			data: seriesData[0],
-			name: 'New York'
+			name: 'New York',
+			strokeWidth: 5,
+			opacity: 0.3
 		}, {
 			color: "#30c020",
 			data: seriesData[1],

examples/scatterplot.html

@@ -16,6 +16,9 @@
 
 for (var i = 0; i < 500; i++) {
 	random.addData(seriesData);
+	seriesData[0][i].r = 0|Math.random() * 2 + 8
+	seriesData[1][i].r = 0|Math.random() * 5 + 5
+	seriesData[2][i].r = 0|Math.random() * 8 + 2
 }
 
 // instantiate our graph!
@@ -29,9 +32,14 @@
 		{
 			color: "#ff9030",
 			data: seriesData[0],
+			opacity: 0.5
 		}, {
 			color: "#ff4040",
 			data: seriesData[1],
+			opacity: 0.3
+		}, {
+			color: "#4040ff",
+			data: seriesData[2]
 		}
 	]
 } );

examples/simple.html

@@ -20,6 +20,11 @@
 		}, {
 			data: [ { x: 0, y: 19 }, { x: 1, y: 22 }, { x: 2, y: 32 }, { x: 3, y: 20 }, { x: 4, y: 21 } ],
 			color: 'lightblue'
+		}, {
+			data: [ { x: 0, y: 39 }, { x: 1, y: 32 }, { x: 2, y: 12 }, { x: 3, y: 5 }, { x: 4, y: 12 } ],
+			color: 'steelblue',
+			strokeWidth: 10,
+			opacity: 0.5
 		}
 	]
 } );

rickshaw.js

@@ -1104,13 +1104,13 @@ Rickshaw.Fixtures.Time.Local = function() {
 			var nearFuture = new Date((time + unit.seconds - 1) * 1000);
 
 			var rounded = new Date(0);
+			rounded.setFullYear(nearFuture.getFullYear());
+			rounded.setMonth(nearFuture.getMonth());
+			rounded.setDate(nearFuture.getDate());
 			rounded.setMilliseconds(0);
 			rounded.setSeconds(0);
 			rounded.setMinutes(0);
 			rounded.setHours(0);
-			rounded.setDate(nearFuture.getDate());
-			rounded.setMonth(nearFuture.getMonth());
-			rounded.setFullYear(nearFuture.getFullYear());
 
 			return rounded.getTime() / 1000;
 		}
@@ -3008,7 +3008,8 @@ Rickshaw.Graph.Renderer = Rickshaw.Class.create( {
 			unstack: true,
 			padding: { top: 0.01, right: 0, bottom: 0.01, left: 0 },
 			stroke: false,
-			fill: false
+			fill: false,
+			opacity: 1
 		};
 	},
 
@@ -3100,10 +3101,13 @@ Rickshaw.Graph.Renderer = Rickshaw.Class.create( {
 
 		var fill = this.fill ? series.color : 'none';
 		var stroke = this.stroke ? series.color : 'none';
+		var strokeWidth = series.strokeWidth ? series.strokeWidth : this.strokeWidth;
+		var opacity = series.opacity ? series.opacity : this.opacity;
 
 		series.path.setAttribute('fill', fill);
 		series.path.setAttribute('stroke', stroke);
-		series.path.setAttribute('stroke-width', this.strokeWidth);
+		series.path.setAttribute('stroke-width', strokeWidth);
+		series.path.setAttribute('opacity', opacity);
 
 		if (series.className) {
 			d3.select(series.path).classed(series.className, true);
@@ -3227,7 +3231,8 @@ Rickshaw.Graph.Renderer.Bar = Rickshaw.Class.create( Rickshaw.Graph.Renderer, {
 
 		var defaults = Rickshaw.extend( $super(), {
 			gapSize: 0.05,
-			unstack: false
+			unstack: false,
+			opacity: 1.0
 		} );
 
 		delete defaults.tension;
@@ -3293,6 +3298,7 @@ Rickshaw.Graph.Renderer.Bar = Rickshaw.Class.create( Rickshaw.Graph.Renderer, {
 				.attr("y", function(d) { return (graph.y(d.y0 + Math.abs(d.y))) * (d.y < 0 ? -1 : 1 ) })
 				.attr("width", seriesBarWidth)
 				.attr("height", function(d) { return graph.y.magnitude(Math.abs(d.y)) })
+				.attr("opacity", series.opacity)
 				.attr("transform", transform);
 
 			Array.prototype.forEach.call(nodes[0], function(n) {
@@ -3467,13 +3473,15 @@ Rickshaw.Graph.Renderer.ScatterPlot = Rickshaw.Class.create( Rickshaw.Graph.Rend
 		series.forEach( function(series) {
 
 			if (series.disabled) return;
+			var opacity = series.opacity ? series.opacity : 1;
 
 			var nodes = vis.selectAll("path")
 				.data(series.stack.filter( function(d) { return d.y !== null } ))
 				.enter().append("svg:circle")
 					.attr("cx", function(d) { return graph.x(d.x) })
 					.attr("cy", function(d) { return graph.y(d.y) })
-					.attr("r", function(d) { return ("r" in d) ? d.r : dotSize});
+					.attr("r", function(d) { return ("r" in d) ? d.r : dotSize})
+					.attr("opacity", function(d) { return ("opacity" in d) ? d.opacity : opacity});
 			if (series.className) {
 				nodes.classed(series.className, true);
 			}

src/js/Rickshaw.Graph.Renderer.Bar.js

@@ -8,7 +8,8 @@ Rickshaw.Graph.Renderer.Bar = Rickshaw.Class.create( Rickshaw.Graph.Renderer, {
 
 		var defaults = Rickshaw.extend( $super(), {
 			gapSize: 0.05,
-			unstack: false
+			unstack: false,
+			opacity: 1.0
 		} );
 
 		delete defaults.tension;
@@ -74,6 +75,7 @@ Rickshaw.Graph.Renderer.Bar = Rickshaw.Class.create( Rickshaw.Graph.Renderer, {
 				.attr("y", function(d) { return (graph.y(d.y0 + Math.abs(d.y))) * (d.y < 0 ? -1 : 1 ) })
 				.attr("width", seriesBarWidth)
 				.attr("height", function(d) { return graph.y.magnitude(Math.abs(d.y)) })
+				.attr("opacity", series.opacity)
 				.attr("transform", transform);
 
 			Array.prototype.forEach.call(nodes[0], function(n) {

src/js/Rickshaw.Graph.Renderer.ScatterPlot.js

@@ -35,13 +35,15 @@ Rickshaw.Graph.Renderer.ScatterPlot = Rickshaw.Class.create( Rickshaw.Graph.Rend
 		series.forEach( function(series) {
 
 			if (series.disabled) return;
+			var opacity = series.opacity ? series.opacity : 1;
 
 			var nodes = vis.selectAll("path")
 				.data(series.stack.filter( function(d) { return d.y !== null } ))
 				.enter().append("svg:circle")
 					.attr("cx", function(d) { return graph.x(d.x) })
 					.attr("cy", function(d) { return graph.y(d.y) })
-					.attr("r", function(d) { return ("r" in d) ? d.r : dotSize});
+					.attr("r", function(d) { return ("r" in d) ? d.r : dotSize})
+					.attr("opacity", function(d) { return ("opacity" in d) ? d.opacity : opacity});
 			if (series.className) {
 				nodes.classed(series.className, true);
 			}

src/js/Rickshaw.Graph.Renderer.js

@@ -23,7 +23,8 @@ Rickshaw.Graph.Renderer = Rickshaw.Class.create( {
 			unstack: true,
 			padding: { top: 0.01, right: 0, bottom: 0.01, left: 0 },
 			stroke: false,
-			fill: false
+			fill: false,
+			opacity: 1
 		};
 	},
 
@@ -115,10 +116,13 @@ Rickshaw.Graph.Renderer = Rickshaw.Class.create( {
 
 		var fill = this.fill ? series.color : 'none';
 		var stroke = this.stroke ? series.color : 'none';
+		var strokeWidth = series.strokeWidth ? series.strokeWidth : this.strokeWidth;
+		var opacity = series.opacity ? series.opacity : this.opacity;
 
 		series.path.setAttribute('fill', fill);
 		series.path.setAttribute('stroke', stroke);
-		series.path.setAttribute('stroke-width', this.strokeWidth);
+		series.path.setAttribute('stroke-width', strokeWidth);
+		series.path.setAttribute('opacity', opacity);
 
 		if (series.className) {
 			d3.select(series.path).classed(series.className, true);

tests/Rickshaw.Graph.Renderer.Scatterplot.js

@@ -15,15 +15,20 @@ exports["should add the series className to all scatterplot points"] = function(
 					{ x: 0, y: 40 },
 					{ x: 1, y: 49 },
 					{ x: 2, y: 38 },
-					{ x: 3, y: 30 },
-					{ x: 4, y: 32 }
-				]
+					{ x: 3, y: 30 }
+				],
+				opacity: 0.8
+			}, {
+				className: 'fnord',
+				data  : [ { x: 4, y: 32 } ]
 			}
 		]
 	});
 	graph.render()
 
 	var path = graph.vis.selectAll('circle.fnord')
 	test.equals(5, path.size())
+	test.equals(path[0][1].getAttribute('opacity'), 0.8, 'custom opacity')
+	test.equals(path[0][4].getAttribute('opacity'), 1, 'default opacity')
 	test.done()
 }

tests/Rickshaw.Graph.Renderer.js

@@ -157,7 +157,8 @@ exports.respectStrokeFactory = function(test) {
 
 	var path = graph.vis.select('path.path.fnord');
 	test.equals(path.size(), 1, "we have a fnord path");
-
+	test.equals(path[0][0].getAttribute('opacity'), 1, 'default opacity');
+
 	var stroke = graph.vis.select('path.stroke.fnord');
 	test.equals(stroke.size(), 1, "we have a fnord stroke");
 

tests/Rickshaw.Graph.js

@@ -34,10 +34,15 @@ exports.svg = function(test) {
 				{ x: 0, y: 40 },
 				{ x: 1, y: 49 },
 				{ x: 2, y: 38 },
-				{ x: 3, y: 30 },
-				{ x: 4, y: 32 } ]
-			}]
-	} );
+				{ x: 3, y: 30 }
+			],
+			strokeWidth: 5,
+			opacity: 0.8
+		}, {
+			color : 'blue',
+			data  : [ { x: 4, y: 32 } ]
+		}]
+	});
 
 	graph.renderer.dotSize = 6;
 	graph.render();