Apply new tooltip logic to all chart types

carbon-design-system · May 3, 2019 · 438907b · 438907b
1 parent 12a8ae1
commit 438907b
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 26 deletions.
diff --git a/packages/core/src/bar-chart.ts b/packages/core/src/bar-chart.ts
@@ -298,9 +298,7 @@ export class BarChart extends BaseAxisChart {
 		const { accessibility } = this.options;
 
 		this.svg.selectAll("rect.bar")
-			.on("click", function(d) {
-				self.dispatchEvent("bar-onClick", d);
-			})
+			.on("click", d => self.dispatchEvent("bar-onClick", d))
 			.on("mouseover", function(d) {
 				select(this)
 					.attr("stroke-width", Configuration.bars.mouseover.strokeWidth)

diff --git a/packages/core/src/pie-chart.ts b/packages/core/src/pie-chart.ts
@@ -286,9 +286,7 @@ export class PieChart extends BaseChart {
 		const { accessibility } = this.options;
 
 		this.innerWrap.selectAll("path")
-			.on("click", function(d) {
-				self.dispatchEvent("pie-slice-onClick", d);
-			})
+			.on("click", d => self.dispatchEvent("pie-slice-onClick", d))
 			.on("mouseover", function(d) {
 				const sliceElement = select(this);
 				Tools.moveToFront(sliceElement);

diff --git a/packages/core/src/scatter-chart.ts b/packages/core/src/scatter-chart.ts
@@ -194,9 +194,7 @@ export class ScatterChart extends BaseAxisChart {
 		const { accessibility } = this.options;
 
 		this.svg.selectAll("circle.dot")
-			.on("click", function(d) {
-				self.dispatchEvent("line-onClick", d);
-			})
+			.on("click", d => self.dispatchEvent("line-onClick", d))
 			.on("mouseover", function(d) {
 				select(this)
 					.attr("stroke-width", Configuration.lines.points.mouseover.strokeWidth)
@@ -206,13 +204,7 @@ export class ScatterChart extends BaseAxisChart {
 				self.showTooltip(d, this);
 				self.reduceOpacity(this);
 			})
-			.on("mousemove", function(d) {
-				const tooltipRef = select(self.holder).select("div.chart-tooltip");
-
-				const relativeMousePosition = mouse(self.holder as HTMLElement);
-				tooltipRef.style("left", relativeMousePosition[0] + Configuration.tooltip.magicLeft2 + "px")
-					.style("top", relativeMousePosition[1] + "px");
-			})
+			.on("mousemove", d => self.tooltip.positionTooltip())
 			.on("mouseout", function(d) {
 				const { strokeWidth, strokeWidthAccessible } = Configuration.lines.points.mouseout;
 				select(this)

diff --git a/packages/core/src/stacked-bar-chart.ts b/packages/core/src/stacked-bar-chart.ts
@@ -223,9 +223,7 @@ export class StackedBarChart extends BaseAxisChart {
 		const { accessibility } = this.options;
 
 		this.svg.selectAll("rect")
-			.on("click", function(d) {
-				self.dispatchEvent("bar-onClick", d);
-			})
+			.on("click", d => self.dispatchEvent("bar-onClick", d))
 			.on("mouseover", function(d) {
 				select(this)
 					.attr("stroke-width", Configuration.bars.mouseover.strokeWidth)
@@ -235,13 +233,7 @@ export class StackedBarChart extends BaseAxisChart {
 				self.showTooltip(d, this);
 				self.reduceOpacity(this);
 			})
-			.on("mousemove", function(d) {
-				const tooltipRef = select(self.holder).select("div.chart-tooltip");
-
-				const relativeMousePosition = mouse(self.holder as HTMLElement);
-				tooltipRef.style("left", relativeMousePosition[0] + Configuration.tooltip.magicLeft2 + "px")
-					.style("top", relativeMousePosition[1] + "px");
-			})
+			.on("mousemove", d => self.tooltip.positionTooltip())
 			.on("mouseout", function(d) {
 				const { strokeWidth, strokeWidthAccessible } = Configuration.bars.mouseout;
 				select(this)