feat: fixed funnel chart tooltip

src/js/charts/FunnelChart.js

@@ -23,13 +23,13 @@ export default class FunnelChart extends AggregationChart {
 		// as height decreases, area decreases by the square of the reduction
 		// hence, compensating by squaring the index value
 
-		const reducer = (accumulator, currentValue, index) => accumulator + currentValue * (Math.pow(index+1, 2));
+		const reducer = (accumulator, currentValue, index) => accumulator + currentValue;
 		const weightage = s.sliceTotals.reduce(reducer, 0.0);
 
 		let slicePoints = [];
 		let startPoint = [[0, 0], [FUNNEL_CHART_BASE_WIDTH, 0]]
 		s.sliceTotals.forEach((d, i) => {
-			let height = totalheight * d * Math.pow(i+1, 2) / weightage;
+			let height = totalheight * d / weightage;
 			let endPoint = getEndpointsForTrapezoid(startPoint, height);
 			slicePoints.push([startPoint, endPoint]);
 			startPoint = endPoint;
@@ -63,24 +63,27 @@ export default class FunnelChart extends AggregationChart {
 	makeDataByIndex() { }
 
 	bindTooltip() {
-		// let s = this.state;
-		// this.container.addEventListener('mousemove', (e) => {
-		// 	let bars = this.components.get('percentageBars').store;
-		// 	let bar = e.target;
-		// 	if(bars.includes(bar)) {
+		function getPolygonWidth(slice)  {
+			const points = slice.points;
+			return points[1].x - points[0].x
+		}
 
-		// 		let i = bars.indexOf(bar);
-		// 		let gOff = getOffset(this.container), pOff = getOffset(bar);
-
-		// 		let x = pOff.left - gOff.left + parseInt(bar.getAttribute('width'))/2;
-		// 		let y = pOff.top - gOff.top;
-		// 		let title = (this.formattedLabels && this.formattedLabels.length>0
-		// 			? this.formattedLabels[i] : this.state.labels[i]) + ': ';
-		// 		let fraction = s.sliceTotals[i]/s.grandTotal;
+		let s = this.state;
+		this.container.addEventListener('mousemove', (e) => {
+			let slices = this.components.get('funnelSlices').store;
+			let slice = e.target;
+			if(slices.includes(slice)) {
+				let i = slices.indexOf(slice);
 
-		// 		this.tip.setValues(x, y, {name: title, value: (fraction*100).toFixed(1) + "%"});
-		// 		this.tip.showTip();
-		// 	}
-		// });
+				let gOff = getOffset(this.container), pOff = getOffset(slice);
+				let x = pOff.left - gOff.left + getPolygonWidth(slice)/2;
+				let y = pOff.top - gOff.top;
+				let title = (this.formatted_labels && this.formatted_labels.length > 0
+					? this.formatted_labels[i] : this.state.labels[i]) + ': ';
+				let percent = (this.state.sliceTotals[i] * 100 / this.state.grandTotal).toFixed(1);
+				this.tip.setValues(x, y, {name: title, value: percent + "%"});
+				this.tip.showTip();
+			}
+		});
 	}
 }