fix(scope angular react): use a more specific class name for chart to…

…oltips affects: @carbon/charts use a more specific class name for chart tooltips
carbon-design-system · Aug 27, 2018 · 4cbe680 · 4cbe680
1 parent 09e18a9
commit 4cbe680
Show file tree

Hide file tree

Showing 3 changed files with 2 additions and 37 deletions.
diff --git a/packages/core/src/base-chart.ts b/packages/core/src/base-chart.ts
@@ -339,11 +339,9 @@ export class BaseChart {
 		return {chartId, container};
 	}
 
-	// TODOCARBON - REFACTOR
 	resetOpacity() {
 		const svg = d3.selectAll("svg.chart-svg");
 		svg.selectAll("path").attr("fill-opacity", Configuration.charts.resetOpacity.opacity);
-		// svg.selectAll("path").attr("stroke-opacity", this.options.accessibility ? 1 : 0);
 
 		svg.selectAll("circle")
 			.attr("stroke-opacity", Configuration.charts.resetOpacity.opacity)
@@ -597,7 +595,7 @@ export class BaseChart {
 			tooltip.select("arrow").remove();
 		} else {
 			tooltip = this.container.append("div")
-				.attr("class", "tooltip legend-tooltip")
+				.attr("class", "tooltip chart-tooltip legend-tooltip")
 				.style("display", "block")
 				.style("top", (d3.mouse(this.container.node())[1] - Configuration.legend.margin.top) + "px");
 			tooltip.append("p").text("Legend")
@@ -782,20 +780,13 @@ export class BaseChart {
 
 		// Remove existing tooltips on the page
 		// TODO - Update class to not conflict with other elements on page
-		d3.selectAll(".tooltip").remove();
+		d3.selectAll(".chart-tooltip").remove();
 
 		// Draw tooltip
 		const tooltip = d3.select(this.holder).append("div")
 			.attr("class", "tooltip chart-tooltip")
-			// .style("border-color", this.colorScale[d.datasetLabel](d.label))
 			.style("top", d3.mouse(this.holder as SVGSVGElement)[1] - Configuration.tooltip.magicTop2 + "px");
 
-		// TODOCARBON - Remove
-		// Add close button to tooltip
-		// Tools.addCloseBtn(tooltip, "xs")
-		// 	.on("click", () => {
-		// 		this.hideTooltip();
-		// 	});
 
 		let tooltipHTML = "";
 		const formattedValue = this.options.tooltip.formatter ? this.options.tooltip.formatter(d.value) : d.value.toLocaleString("en");

diff --git a/packages/core/src/pie-chart.ts b/packages/core/src/pie-chart.ts
@@ -265,31 +265,13 @@ export class PieChart extends BaseChart {
 		const tooltip = d3.select(this.holder).append("div")
 			.attr("class", "tooltip chart-tooltip")
 			.style("top", d3.mouse(this.holder as SVGSVGElement)[1] - Configuration.tooltip.magicTop2 + "px");
-			// .style("border-color", this.colorScale[this.displayData.datasets[0].label](d.data.label)); // TODO - Support multiple datasets
-
-		// TODOCARBON - Remove
-		// Tools.addCloseBtn(tooltip, "xs")
-		// 	.on("click", () => {
-		// 		this.hideTooltip();
-		// 	});
 
 		const dVal = d.value.toLocaleString();
 		const tooltipHTML = `
 			<p class='bignum'>${dVal}</p>
 			<p>${d.data.label}</p>
 		`;
 
-		// TODOCARBON - Switch to popover onclick
-		// if (d.data.label === Configuration.pie.label.other) {
-		// 	const { items } = d.data;
-
-		// 	items.map(item => {
-		// 		tooltipHTML += `
-		// 			<b>${item.label}:</b> ${item.value.toLocaleString()}<br />
-		// 		`;
-		// 	});
-		// }
-
 		tooltip.append("div").attr("class", "text-box").html(tooltipHTML);
 		if (d3.mouse(this.holder as SVGSVGElement)[0] + (tooltip.node() as Element).clientWidth > this.holder.clientWidth) {
 			tooltip.style(
@@ -327,7 +309,6 @@ export class PieChart extends BaseChart {
 				self.reduceOpacity(this);
 			})
 			.on("mousemove", function(d) {
-				// TODOCARBON - REFACTOR
 				const tooltipRef = d3.select(self.holder).select("div.chart-tooltip");
 
 				const relativeMousePosition = d3.mouse(self.holder as HTMLElement);

diff --git a/packages/core/src/style.scss b/packages/core/src/style.scss
@@ -43,13 +43,6 @@ $default_transition: all .1s ease-out;
 			}
 		}
 
-		// TODOCARBON
-		// rect, circle, path {
-		// 	&:hover {
-		// 		cursor: pointer;
-		// 	}
-		// }
-
 		path {
 			&.line {
 				fill: none;