From ddb7171a2f94ac902635edbce7fb1db761ab6d8c Mon Sep 17 00:00:00 2001
From: Jake Zatecky <jake.zatecky@gmail.com>
Date: Wed, 20 Jul 2016 22:33:58 -0400
Subject: [PATCH] Fix issue where gradient definitions could conflict with
 existing definitions

---
 CHANGELOG.md               |  4 ++++
 src/d3-funnel/Colorizer.js | 30 +++++++++++++++++++++++++-----
 src/d3-funnel/D3Funnel.js  | 15 +++++++--------
 test/d3-funnel/D3Funnel.js |  4 ++--
 4 files changed, 38 insertions(+), 15 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b45acd9..49f815b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,10 @@
 * [#19]: Add support for percentages in `chart.width` and `chart.height` (e.g. `'75%'`)
 * [#38]: Split line break characters found in `label.format` into multiple lines
 
+### Bug Fixes
+
+* [#49]: Fix issue where gradient definitions could conflict with existing definitions
+
 ## v0.7.7 (July 15, 2016)
 
 ### New Features
diff --git a/src/d3-funnel/Colorizer.js b/src/d3-funnel/Colorizer.js
index 7f0a1fa..0328176 100644
--- a/src/d3-funnel/Colorizer.js
+++ b/src/d3-funnel/Colorizer.js
@@ -4,12 +4,20 @@ class Colorizer {
 	 */
 	constructor() {
 		this.hexExpression = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i;
-
+		this.instanceId = null;
 		this.labelFill = null;
-
 		this.scale = null;
 	}
 
+	/**
+	 * @param {string} instanceId
+	 *
+	 * @return {void}
+	 */
+	setInstanceId(instanceId) {
+		this.instanceId = instanceId;
+	}
+
 	/**
 	 * @param {string} fill
 	 *
@@ -34,15 +42,16 @@ class Colorizer {
 	 * @param {Array}  block
 	 * @param {Number} index
 	 * @param {string} type
+	 * @param {string} instanceId
 	 *
 	 * @return {Object}
 	 */
-	getBlockFill(block, index, type) {
+	getBlockFill(block, index, type, instanceId) {
 		const raw = this.getBlockRawFill(block, index);
 
 		return {
 			raw,
-			actual: this.getBlockActualFill(raw, index, type),
+			actual: this.getBlockActualFill(raw, index, type, instanceId),
 		};
 	}
 
@@ -83,7 +92,18 @@ class Colorizer {
 			return raw;
 		}
 
-		return `url(#gradient-${index})`;
+		return `url(#${this.getGradientId(index)})`;
+	}
+
+	/**
+	 * Return the gradient ID for the given index.
+	 *
+	 * @param {Number} index
+	 *
+	 * @return {string}
+	 */
+	getGradientId(index) {
+		return `${this.instanceId}-gradient-${index}`;
 	}
 
 	/**
diff --git a/src/d3-funnel/D3Funnel.js b/src/d3-funnel/D3Funnel.js
index 509526b..c4d1962 100644
--- a/src/d3-funnel/D3Funnel.js
+++ b/src/d3-funnel/D3Funnel.js
@@ -57,6 +57,7 @@ class D3Funnel {
 		this.labelFormatter = new LabelFormatter();
 		this.navigator = new Navigator();
 
+		this.id = null;
 		this.autoId = 0;
 
 		// Bind event handlers
@@ -115,6 +116,9 @@ class D3Funnel {
 
 		const settings = this.getSettings(options);
 
+		this.id = this.generateUniqueId();
+		this.colorizer.setInstanceId(this.id);
+
 		// Set labels
 		this.label = settings.label;
 		this.labelFormatter.setFormat(this.label.format);
@@ -371,12 +375,9 @@ class D3Funnel {
 	 * @return {void}
 	 */
 	drawOntoDom() {
-		const id = this.generateUniqueId();
-
-		// Add the SVG
-		this.svg = d3.select(this.selector)
+		this.svg = d3.select(this.selector)// Add the SVG
 			.append('svg')
-			.attr('id', id)
+			.attr('id', this.id)
 			.attr('width', this.width)
 			.attr('height', this.height);
 
@@ -635,9 +636,7 @@ class D3Funnel {
 
 			// Create linear gradient
 			const gradient = defs.append('linearGradient')
-				.attr({
-					id: `gradient-${index}`,
-				});
+				.attr({ id: this.colorizer.getGradientId(index) });
 
 			// Define the gradient stops
 			const stops = [
diff --git a/test/d3-funnel/D3Funnel.js b/test/d3-funnel/D3Funnel.js
index d5b1136..2961cb9 100644
--- a/test/d3-funnel/D3Funnel.js
+++ b/test/d3-funnel/D3Funnel.js
@@ -694,9 +694,9 @@ describe('D3Funnel', () => {
 				// due to a Webkit bug in the current PhantomJS; workaround is
 				// to select the known ID of the linearGradient element
 				// https://bugs.webkit.org/show_bug.cgi?id=83438
-				assert.equal(1, d3.selectAll('#funnel defs #gradient-0')[0].length);
+				assert.equal(1, d3.selectAll('#funnel defs #d3-funnel-chart-0-gradient-0')[0].length);
 
-				assert.equal('url(#gradient-0)', d3.select('#funnel path').attr('fill'));
+				assert.equal('url(#d3-funnel-chart-0-gradient-0)', d3.select('#funnel path').attr('fill'));
 			});
 
 			it('should use solid fill when not set to \'gradient\'', () => {