Merge pull requests

shutterstock · Mar 30, 2020 · cbbf36b · cbbf36b
2 parents 11795e3 + 6d817fb
commit cbbf36b
Show file tree

Hide file tree

Showing 11 changed files with 154 additions and 23 deletions.
diff --git a/examples/multi.html b/examples/multi.html
@@ -85,18 +85,27 @@
 });
 
 var highlighter = new Rickshaw.Graph.Behavior.Series.Highlight({
-    graph: graph,
-    legend: legend,
-    disabledColor: function() { return 'rgba(0, 0, 0, 0.2)' }
+		graph: graph,
+		legend: legend,
+		disabledColor: function() { return 'rgba(0, 0, 0, 0.2)' }
 });
 
 var highlighter = new Rickshaw.Graph.Behavior.Series.Toggle({
-    graph: graph,
-    legend: legend
+		graph: graph,
+		legend: legend,
+		transform: function(isActive, series) {
+			var	 obj = {};
+			if (isActive) {
+				obj.color  = "rgba(255, 0, 0, 0.5)";
+				obj.stroke = "rgba(255, 0, 0, 0.5)";
+			} else {
+				// lower opacity of non-highlighed data
+				obj.stroke = "rgba(0,0,0,0.1)";
+				obj.color =  "rgba(0,0,0,0.05)";
+			}
+			return obj;
+		}
 });
 
-
-
-
 </script>
 </body>
diff --git a/examples/scatterplot.html b/examples/scatterplot.html
@@ -1,5 +1,10 @@
 <!doctype html>
 <link type="text/css" rel="stylesheet" href="../rickshaw.css">
+<style type="text/css">
+	.rickshaw_graph .detail .item.active {
+		white-space: pre-wrap;
+	}
+</style>
 
 <script src="../vendor/d3.v3.js"></script>
 
@@ -30,14 +35,17 @@
 	renderer: 'scatterplot',
 	series: [
 		{
+			name: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
 			color: "#ff9030",
 			data: seriesData[0],
 			opacity: 0.5
 		}, {
+			name: "Nullam in risus tellus. Donec pellentesque sit amet enim in sollicitudin.",
 			color: "#ff4040",
 			data: seriesData[1],
 			opacity: 0.3
 		}, {
+			name: "Nunc tempus malesuada diam.",
 			color: "#4040ff",
 			data: seriesData[2]
 		}

diff --git a/src/css/detail.css b/src/css/detail.css
@@ -16,6 +16,8 @@
 }
 .rickshaw_graph .detail .item.active {
 	opacity: 1;
+	width: auto;
+	height: auto;
 }
 .rickshaw_graph .detail .x_label {
 	font-family: Arial, sans-serif;

diff --git a/src/js/Rickshaw.Graph.Axis.X.js b/src/js/Rickshaw.Graph.Axis.X.js
@@ -9,6 +9,7 @@ Rickshaw.Graph.Axis.X = function(args) {
 
 		this.graph = args.graph;
 		this.orientation = args.orientation || 'top';
+		this.color = args.color || "#000000";
 
 		this.pixelsPerTick = args.pixelsPerTick || 75;
 		if (args.ticks) this.staticTicks = args.ticks;
@@ -26,6 +27,7 @@ Rickshaw.Graph.Axis.X = function(args) {
 				.append("svg:svg")
 				.attr('height', this.height)
 				.attr('width', this.width)
+				.attr('stroke', this.color)
 				.attr('class', 'rickshaw_graph x_axis_d3');
 
 			this.element = this.vis[0][0];

diff --git a/src/js/Rickshaw.Graph.Axis.Y.js b/src/js/Rickshaw.Graph.Axis.Y.js
@@ -6,6 +6,7 @@ Rickshaw.Graph.Axis.Y = Rickshaw.Class.create( {
 
 		this.graph = args.graph;
 		this.orientation = args.orientation || 'right';
+		this.color = args.color || "#000000";
 
 		this.pixelsPerTick = args.pixelsPerTick || 75;
 		if (args.ticks) this.staticTicks = args.ticks;
@@ -23,6 +24,7 @@ Rickshaw.Graph.Axis.Y = Rickshaw.Class.create( {
 			this.element = args.element;
 			this.vis = d3.select(args.element)
 				.append("svg:svg")
+				.attr('stroke', this.color)
 				.attr('class', 'rickshaw_graph y_axis');
 
 			this.element = this.vis[0][0];

diff --git a/src/js/Rickshaw.Graph.Behavior.Series.Highlight.js b/src/js/Rickshaw.Graph.Behavior.Series.Highlight.js
@@ -7,13 +7,23 @@ Rickshaw.Graph.Behavior.Series.Highlight = function(args) {
 
 	var self = this;
 
-	var colorSafe = {};
+	var propertiesSafe = {};
 	var activeLine = null;
 
 	var disabledColor = args.disabledColor || function(seriesColor) {
 		return d3.interpolateRgb(seriesColor, d3.rgb('#d8d8d8'))(0.8).toString();
 	};
 
+	var transformFn = args.transform || function(isActive, series) {
+		var newProperties = {};
+		if (!isActive) {
+			// backwards compability
+			newProperties.color = disabledColor(series.color);
+		}
+		return newProperties;
+	};
+
+
 	this.addHighlightEvents = function (l) {
 
 		l.element.addEventListener( 'mouseover', function(e) {
@@ -22,8 +32,11 @@ Rickshaw.Graph.Behavior.Series.Highlight = function(args) {
 			else activeLine = l;
 
 			self.legend.lines.forEach( function(line) {
+				var newProperties;
+				var isActive = false;
 
 				if (l === line) {
+					isActive = true;
 
 					// if we're not in a stacked renderer bring active line to the top
 					if (self.graph.renderer.unstack && (line.series.renderer ? line.series.renderer.unstack : true)) {
@@ -34,11 +47,21 @@ Rickshaw.Graph.Behavior.Series.Highlight = function(args) {
 						var series = self.graph.series.splice(seriesIndex, 1)[0];
 						self.graph.series.push(series);
 					}
-					return;
 				}
 
-				colorSafe[line.series.name] = colorSafe[line.series.name] || line.series.color;
-				line.series.color = disabledColor(line.series.color);
+				newProperties = transformFn(isActive, line.series);
+
+				propertiesSafe[line.series.name] = propertiesSafe[line.series.name] || {
+					color   : line.series.color,
+					stroke  : line.series.stroke
+				};
+
+				if (newProperties.color) {
+					line.series.color = newProperties.color;
+				}
+				if (newProperties.stroke) {
+					line.series.stroke = newProperties.stroke;
+				}
 
 			} );
 
@@ -61,8 +84,10 @@ Rickshaw.Graph.Behavior.Series.Highlight = function(args) {
 					delete line.originalIndex;
 				}
 
-				if (colorSafe[line.series.name]) {
-					line.series.color = colorSafe[line.series.name];
+				var lineProperties = propertiesSafe[line.series.name];
+				if (lineProperties) {
+					line.series.color  = lineProperties.color;
+					line.series.stroke = lineProperties.stroke;
 				}
 			} );
 

diff --git a/src/js/Rickshaw.Graph.Legend.js b/src/js/Rickshaw.Graph.Legend.js
@@ -8,6 +8,7 @@ Rickshaw.Graph.Legend = Rickshaw.Class.create( {
 		this.element = args.element;
 		this.graph = args.graph;
 		this.naturalOrder = args.naturalOrder;
+		this.colorKey = args.colorKey || 'color';
 
 		this.element.classList.add(this.className);
 
@@ -55,7 +56,7 @@ Rickshaw.Graph.Legend = Rickshaw.Class.create( {
 		}
 		var swatch = document.createElement('div');
 		swatch.className = 'swatch';
-		swatch.style.backgroundColor = series.color;
+		swatch.style.backgroundColor = series[this.colorKey];
 
 		line.appendChild(swatch);
 
@@ -84,4 +85,3 @@ Rickshaw.Graph.Legend = Rickshaw.Class.create( {
 		return line;
 	}
 } );
-
diff --git a/src/js/Rickshaw.Graph.Renderer.ScatterPlot.js b/src/js/Rickshaw.Graph.Renderer.ScatterPlot.js
@@ -35,7 +35,7 @@ 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 opacity = series.opacity === undefined ? 1 : series.opacity;
 
 			var nodes = vis.selectAll("path")
 				.data(series.stack.filter( function(d) { return d.y !== null } ))
@@ -47,7 +47,7 @@ Rickshaw.Graph.Renderer.ScatterPlot = Rickshaw.Class.create( Rickshaw.Graph.Rend
 			if (series.className) {
 				nodes.classed(series.className, true);
 			}
-			
+
 			Array.prototype.forEach.call(nodes[0], function(n) {
 				n.setAttribute('fill', series.color);
 			} );

diff --git a/src/js/Rickshaw.Graph.Renderer.js b/src/js/Rickshaw.Graph.Renderer.js
@@ -120,7 +120,7 @@ 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;
+		var opacity = series.opacity === undefined ? this.opacity : series.opacity;
 
 		series.path.setAttribute('fill', fill);
 		series.path.setAttribute('stroke', stroke);
@@ -179,4 +179,3 @@ Rickshaw.Graph.Renderer = Rickshaw.Class.create( {
 		}
 	}
 } );
-
diff --git a/tests/Rickshaw.Graph.Legend.js b/tests/Rickshaw.Graph.Legend.js
@@ -19,6 +19,8 @@ exports.setUp = function(callback) {
 		series: [
 			{
 				name: 'foo',
+				color: 'green',
+				stroke: 'red',
 				data: [
 					{ x: 4, y: 32 }
 				]
@@ -81,6 +83,31 @@ exports.canOverrideClassName = function(test) {
 	test.done();
 };
 
+exports.hasDefaultColorKey = function(test) {
+	var legend = new Rickshaw.Graph.Legend({
+		graph: this.graph,
+		element: this.legendEl
+	});
+
+
+	test.equal(legend.colorKey, "color");
+	test.equal(this.legendEl.getElementsByClassName('swatch')[1].style.backgroundColor, "green");
+	test.done();
+};
+
+exports.canOverrideColorKey = function(test) {
+	var legend = new Rickshaw.Graph.Legend({
+		graph: this.graph,
+		element: this.legendEl,
+		colorKey: 'stroke'
+	});
+
+
+	test.equal(legend.colorKey, "stroke");
+	test.equal(this.legendEl.getElementsByClassName('swatch')[1].style.backgroundColor, "red");
+	test.done();
+};
+
 exports['should put series classes on legend elements'] = function(test) {
 	this.graph.series[0].className = 'fnord-series-0';
 	this.graph.series[1].className = 'fnord-series-1';

diff --git a/tests/Rickshaw.Graph.Renderer.Scatterplot.js b/tests/Rickshaw.Graph.Renderer.Scatterplot.js
@@ -1,5 +1,24 @@
+var d3 = require("d3");
 var Rickshaw = require("../rickshaw");
 
+exports.setUp = function(callback) {
+
+	Rickshaw = require('../rickshaw');
+
+	global.document = require("jsdom").jsdom("<html><head></head><body></body></html>");
+	global.window = document.defaultView;
+
+	new Rickshaw.Compat.ClassList();
+
+	callback();
+};
+
+exports.tearDown = function(callback) {
+
+	delete require.cache.d3;
+	callback();
+};
+
 exports["should add the series className to all scatterplot points"] = function(test) {
 	var el = document.createElement("div");
 	var graph = new Rickshaw.Graph({
@@ -18,17 +37,55 @@ exports["should add the series className to all scatterplot points"] = function(
 					{ 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.done()
+}
+
+exports['should set series opacity correctly'] = function(test) {
+	var el = document.createElement("div");
+	var graph = new Rickshaw.Graph({
+		element: el,
+		stroke: true,
+		width: 10,
+		height: 10,
+		renderer: 'scatterplot',
+		series: [
+			{
+				className: 'fnord',
+				data: [
+					{ x: 0, y: 40 },
+					{ x: 1, y: 49 },
+					{ x: 2, y: 38 },
+					{ x: 3, y: 30 }
+				],
+				opacity: 0.8
+			},
+			{
+				className: 'fnord',
+				data  : [ { x: 4, y: 32 } ]
+			},
+			{
+				className: 'fnord',
+				opacity: 0,
+				data  : [ { x: 5, y: 32 } ]
+			}
+		]
+	});
+	graph.render()
+
+	var path = graph.vis.selectAll('circle.fnord')
 	test.equals(path[0][1].getAttribute('opacity'), 0.8, 'custom opacity')
-	test.equals(path[0][4].getAttribute('opacity'), 1, 'default opacity')
+	test.equals(path[0][4].getAttribute('opacity'), 1, 'default opacity should be 1')
+	test.equals(path[0][5].getAttribute('opacity'), 0, '0 opacity should be 0')
 	test.done()
 }