fix(core): legend updates in pie & donut should respect legend filters

carbon-design-system · Oct 1, 2018 · 203c7e6 · 203c7e6
1 parent 39c0367
commit 203c7e6
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 3 deletions.
diff --git a/packages/core/src/base-chart.ts b/packages/core/src/base-chart.ts
@@ -473,7 +473,7 @@ export class BaseChart {
 				if (this.getLegendType() === Configuration.legend.basedOn.LABELS && d.value === Configuration.legend.items.status.ACTIVE) {
 					return this.colorScale[this.displayData.datasets[0].label](d.key);
 				} else if (d.value === Configuration.legend.items.status.ACTIVE) {
-						return this.colorScale[d.key]();
+					return this.colorScale[d.key]();
 				}
 
 				return "white";
@@ -520,6 +520,7 @@ export class BaseChart {
 
 	addOrUpdateLegend() {
 		this.addLegend();
+
 		if (this.options.legendClickable) {
 			this.setClickableLegend();
 		}

diff --git a/packages/core/src/pie-chart.ts b/packages/core/src/pie-chart.ts
@@ -342,16 +342,30 @@ export class PieChart extends BaseChart {
 		this.container.select(".legend")
 			.selectAll("*").remove();
 
+		const legendItems = this.getLegendItems();
 		const legend = this.container.select(".legend")
 			.attr("font-size", Configuration.legend.fontSize)
 			.selectAll("div")
-			.data(this.getLegendItemKeys())
+			.data(Object.keys(legendItems))
 			.enter().append("li")
 				.attr("class", "legend-btn active");
 
 		legend.append("div")
 			.attr("class", "legend-circle")
-			.style("background-color", (d, i) => this.colorScale(d));
+			.style("background-color", (d, i) => {				
+				if (legendItems[d] === Configuration.legend.items.status.ACTIVE) {
+					return this.colorScale(d);
+				}
+
+				return "white";
+			})
+			.style("border", (d, i) => {				
+				if (legendItems[d] === Configuration.legend.items.status.ACTIVE) {
+					return "none";
+				}
+
+				return `2px solid ${this.colorScale(d)}`;
+			});
 
 		legend.append("text")
 			.text(d => d);