fix(color): fix color callback mismatch

Fix insconsistent param type for color callback function Fix #1847
naver · Jan 8, 2021 · 86ef214 · 86ef214
1 parent 7108e7b
commit 86ef214
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 7 deletions.
diff --git a/src/ChartInternal/data/data.ts b/src/ChartInternal/data/data.ts
@@ -928,5 +928,17 @@ export default {
 			(isObject(d.value) && ("z" in d.value || "y" in d.value)) ||
 			(isArray(d.value) && d.value.length === 2)
 		);
+	},
+
+	/**
+	 * Get data object by id
+	 * @param {string} id data id
+	 * @returns {object}
+	 * @private
+	 */
+	getDataById(id: string) {
+		const d = this.cache.get(id) || this.api.data(id);
+
+		return isArray(d) ? d[0] : d;
 	}
 };
diff --git a/src/ChartInternal/internals/legend.ts b/src/ChartInternal/internals/legend.ts
@@ -600,6 +600,14 @@ export default {
 			.attr("x", isLegendRightOrInset ? xForLegendRect : pos)
 			.attr("y", isLegendRightOrInset ? pos : yForLegendRect);
 
+		const getColor = id => {
+			const data = $$.getDataById(id);
+
+			return $$.levelColor ?
+				$$.levelColor(data.values[0].value) :
+				$$.color(data);
+		};
+
 		const usePoint = config.legend_usePoint;
 
 		if (usePoint) {
@@ -620,7 +628,7 @@ export default {
 				return document.createElementNS(d3Namespaces.svg, ("hasValidPointType" in $$) && $$.hasValidPointType(point) ? point : "use");
 			})
 				.attr("class", CLASS.legendItemPoint)
-				.style("fill", d => $$.color(d))
+				.style("fill", getColor)
 				.style("pointer-events", "none")
 				.attr("href", (data, idx, selection) => {
 					const node = selection[idx];
@@ -631,7 +639,7 @@ export default {
 		} else {
 			l.append("line")
 				.attr("class", CLASS.legendItemTile)
-				.style("stroke", $$.color)
+				.style("stroke", getColor)
 				.style("pointer-events", "none")
 				.attr("x1", isLegendRightOrInset ? x1ForLegendTile : pos)
 				.attr("y1", isLegendRightOrInset ? pos : yForLegendTile)
@@ -669,7 +677,6 @@ export default {
 			.attr("x", xForLegendRect)
 			.attr("y", yForLegendRect);
 
-
 		if (usePoint) {
 			const tiles = legend.selectAll(`.${CLASS.legendItemPoint}`)
 				.data(targetIdz);
@@ -714,7 +721,7 @@ export default {
 				.data(targetIdz);
 
 			(withTransition ? tiles.transition() : tiles)
-				.style("stroke", $$.levelColor ? id => $$.levelColor($$.cache.get(id).values[0].value) : $$.color)
+				.style("stroke", getColor)
 				.attr("x1", x1ForLegendTile)
 				.attr("y1", yForLegendTile)
 				.attr("x2", x2ForLegendTile)

diff --git a/test/internals/legend-spec.ts b/test/internals/legend-spec.ts
@@ -485,18 +485,18 @@ describe("LEGEND", () => {
 						["padded2", 90],
 						["padded3", 50],
 						["padded4", 20]
-					]
+					],
+					type: "gauge",
 				},
 				color: {
 					pattern: ["#FF0000", "#F97600", "#F6C600", "#60B044"],
 					threshold: {
 						values: [30, 80, 95]
 					}
 				},
-				type: "gauge",
 				gauge: {
 					type: "multi"
-				},
+				}
 			};
 		});
 

diff --git a/test/internals/tooltip-spec.ts b/test/internals/tooltip-spec.ts
@@ -1186,4 +1186,34 @@ describe("TOOLTIP", function() {
 			chart.$.chart.style("margin-left", null);
 		});
 	});
+
+	describe("Tooltip color", () => {
+		const c = {data1: "yellow", data2: "green"};
+
+		before(() => {
+			args = {
+				data: {
+					columns: [
+						["data1", 30],
+						["data2", 50]
+					],
+					color: (color, d) => c[d.id] || color
+				}
+			};
+		});
+
+		it("should apply correct color values", () => {			
+			chart.$.circles.each(function(d) {
+				expect(this.style.fill).to.be.equal(c[d.id]);
+			});
+
+			// when
+			chart.tooltip.show({index:0});
+
+
+			["data1", "data2"].forEach(v => {
+				expect(chart.$.tooltip.selectAll(`.${CLASS.tooltipName}-${v} .name span`).style("background-color")).to.be.equal(c[v]);
+			});
+		});
+	});
 });