fix($core): Fixes opacity transitions not completing when data is upd…

…ated. Ensures use SVG vs CSS op
carbon-design-system · Jan 31, 2019 · f6b245e · f6b245e
1 parent 63713b3
commit f6b245e
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 24 deletions.
diff --git a/packages/core/src/bar-chart.ts b/packages/core/src/bar-chart.ts
@@ -174,13 +174,13 @@ export class BarChart extends BaseAxisChart {
 		// Remove bar groups are no longer needed
 		g.exit()
 			.transition(this.getDefaultTransition())
-			.style("opacity", 0)
+			.attr("opacity", 0)
 			.remove();
 
 		// Remove bars that are no longer needed
 		rect.exit()
 			.transition(this.getDefaultTransition())
-			.style("opacity", 0)
+			.attr("opacity", 0)
 			.remove();
 
 		// Add slice hover actions, and clear any slice borders present
@@ -213,6 +213,7 @@ export class BarChart extends BaseAxisChart {
 			.transition(animate ? this.getFillTransition() : this.getInstantTransition())
 			// TODO
 			// .ease(d3.easeCircle)
+			.attr("opacity", 1)
 			.attr("x", d => this.x1(d.datasetLabel))
 			.attr("y", d => this.y(Math.max(0, d.value)))
 			.attr("width", this.x1.bandwidth())

diff --git a/packages/core/src/base-axis-chart.ts b/packages/core/src/base-axis-chart.ts
@@ -492,7 +492,7 @@ export class BaseAxisChart extends BaseChart {
 		// Applies to thresholds getting removed
 		thresholdRects.exit()
 			.transition(t)
-			.style("opacity", 0)
+			.attr("opacity", 0)
 			.remove();
 	}
 

diff --git a/packages/core/src/base-chart.ts b/packages/core/src/base-chart.ts
@@ -801,10 +801,10 @@ export class BaseChart {
 		this.resetOpacity();
 
 		const tooltipRef = select(this.holder).select("div.chart-tooltip");
-		tooltipRef.style("opacity", 1)
+		tooltipRef.attr("opacity", 1)
 			.transition()
 			.duration(Configuration.tooltip.fadeOut.duration)
-			.style("opacity", 0)
+			.attr("opacity", 0)
 			.remove();
 
 		this.removeTooltipEventListeners();
@@ -890,10 +890,10 @@ export class BaseChart {
 			tooltip.style("left", mouse(this.holder as SVGSVGElement)[0] + Configuration.tooltip.magicLeft2 + "px");
 		}
 
-		tooltip.style("opacity", 0)
+		tooltip.attr("opacity", 0)
 			.transition()
 			.duration(Configuration.tooltip.fadeIn.duration)
-			.style("opacity", 1);
+			.attr("opacity", 1);
 
 		this.addTooltipEventListeners(tooltip);
 	}

diff --git a/packages/core/src/line-chart.ts b/packages/core/src/line-chart.ts
@@ -118,9 +118,9 @@ export class LineChart extends BaseAxisChart {
 		addedLineGroups.append("path")
 			.attr("stroke", d => this.colorScale[d.label]())
 			.datum(d => d.data)
-			.style("opacity", 0)
+			.attr("opacity", 0)
 			.transition(this.getDefaultTransition())
-			.style("opacity", 1)
+			.attr("opacity", 1)
 			.attr("class", "line")
 			.attr("d", this.lineGenerator);
 
@@ -133,15 +133,15 @@ export class LineChart extends BaseAxisChart {
 				.attr("cx", (d, i) => this.x(d.label) + this.x.step() / 2)
 				.attr("cy", (d: any) => this.y(d.value))
 				.attr("r", 4)
-				.style("opacity", 0)
+				.attr("opacity", 0)
 				.transition(this.getDefaultTransition())
-				.style("opacity", 1)
+				.attr("opacity", 1)
 				.attr("stroke", d => this.colorScale[d.datasetLabel](d.label));
 
 		// Remove lines that are no longer needed
 		gLines.exit()
 			.transition(this.getDefaultTransition())
-			.style("opacity", 0)
+			.attr("opacity", 0)
 			.remove();
 
 		// Add slice hover actions, and clear any slice borders present
@@ -173,6 +173,7 @@ export class LineChart extends BaseAxisChart {
 				return parentDatum.data;
 			})
 			.transition(transitionToUse)
+			.attr("opacity", 1)
 			.attr("stroke", function(d) {
 				const parentDatum = select(this.parentNode).datum() as any;
 

diff --git a/packages/core/src/pie-chart.ts b/packages/core/src/pie-chart.ts
@@ -170,14 +170,14 @@ export class PieChart extends BaseChart {
 			.attr("d", this.arc)
 			.transition()
 			.duration(0)
-			.style("opacity", 0)
+			.attr("opacity", 0)
 			.attr("stroke", d => this.colorScale[this.displayData.datasets[0].label](d.data.label))
 			.attr("stroke-width", Configuration.pie.default.strokeWidth)
 			.attr("stroke-opacity", d => this.options.accessibility ? 1 : 0)
 			.transition()
 			.duration(Configuration.transitions.default.duration)
 			.attr("fill", d => this.getFillScale()[this.displayData.datasets[0].label](d.data.label))
-			.style("opacity", 1)
+			.attr("opacity", 1)
 			.attrTween("d", function (a) {
 				return arcTween.bind(this)(a, self.arc);
 			});
@@ -187,19 +187,19 @@ export class PieChart extends BaseChart {
 			.attr("d", this.arc)
 			.transition()
 			.duration(Configuration.transitions.default.duration)
-			.style("opacity", 0)
+			.attr("opacity", 0)
 			.remove();
 
 		// Fade out all text labels
 		this.innerWrap.selectAll("text.chart-label")
 			.transition()
 			.duration(Configuration.transitions.default.duration / 2)
-			.style("opacity", 0)
+			.attr("opacity", 0)
 			.on("end", function(d) {
 				select(this)
 					.transition()
 					.duration(Configuration.transitions.default.duration / 2)
-					.style("opacity", 1);
+					.attr("opacity", 1);
 			});
 
 		// Move text labels to their new location, and fade them in again
@@ -216,18 +216,18 @@ export class PieChart extends BaseChart {
 				.style("text-anchor", "middle")
 				.text(d => Tools.convertValueToPercentage(d.data.value, dataList))
 				.attr("transform", function (d) { return self.deriveTransformString(this, d, radius); })
-				.style("opacity", 0)
+				.attr("opacity", 0)
 				.transition()
 				.duration(Configuration.transitions.default.duration / 2)
-				.style("opacity", 1);
+				.attr("opacity", 1);
 
 			text
 				.style("text-anchor", "middle")
 				.text(d => Tools.convertValueToPercentage(d.data.value, dataList))
 				.attr("transform", function (d) { return self.deriveTransformString(this, d, radius); })
 				.transition()
 				.duration(Configuration.transitions.default.duration / 2)
-				.style("opacity", 1);
+				.attr("opacity", 1);
 
 			text
 				.exit()
@@ -279,10 +279,10 @@ export class PieChart extends BaseChart {
 			tooltip.style("left", mouse(this.holder as SVGSVGElement)[0] + Configuration.tooltip.magicLeft2 + "px");
 		}
 
-		tooltip.style("opacity", 0)
+		tooltip.attr("opacity", 0)
 			.transition()
 			.duration(Configuration.tooltip.fadeIn.duration)
-			.style("opacity", 1);
+			.attr("opacity", 1);
 
 		this.addTooltipEventListeners(tooltip);
 	}

diff --git a/packages/core/src/stacked-bar-chart.ts b/packages/core/src/stacked-bar-chart.ts
@@ -147,12 +147,12 @@ export class StackedBarChart extends BaseAxisChart {
 
 		g.exit()
 			.transition(this.getDefaultTransition())
-			.style("opacity", 0)
+			.attr("opacity", 0)
 			.remove();
 
 		rect.exit()
 			.transition(this.getDefaultTransition())
-			.style("opacity", 0)
+			.attr("opacity", 0)
 			.remove();
 
 		// Add slice hover actions, and clear any slice borders present
@@ -198,6 +198,7 @@ export class StackedBarChart extends BaseAxisChart {
 		// Update existing bars
 		rect
 			.transition(animate ? this.getFillTransition() : this.getInstantTransition())
+			.attr("opacity", 1)
 			.attr("x", d => this.x(d.data.label))
 			.attr("y", d => this.y(d[1]))
 			.attr("height", d => this.y(d[0]) - this.y(d[1]))