refactor: move endPoint creation to draw-utils

src/js/utils/draw-utils.js

@@ -25,6 +25,33 @@ export function equilizeNoOfElements(array1, array2,
 	return [array1, array2];
 }
 
+export function getEndpointsForTrapezoid(startPositions) {
+	const endPosition = []
+	let [point_a, point_b] = startPositions
+
+	// For an equilateral triangle, the angles are always 60 deg.
+	// The end points on the polygons can be created using the following formula
+	//
+	// end_point_x = start_x +/- height * 1/2
+	// end_point_y = start_y + height
+	//
+	//      b
+	//    _______________________________
+	//    \  |_|                        /
+	//     \   |                       /
+	//      \  | h                    /
+	//       \ |                     /
+	//        \|____________________/
+	//
+	//     b = h * cos(60 deg)
+	//
+
+	endPosition[0] = [point_a[0] + height * 0.5, point_a[1] + height]
+	endPosition[1] = [point_b[0] - height * 0.5, point_b[1] + height]
+
+	return endPosition
+}
+
 export function truncateString(txt, len) {
 	if (!txt) {
 		return;
@@ -71,7 +98,7 @@ export function getSplineCurvePointsStr(xList, yList) {
 			angle: Math.atan2(lengthY, lengthX)
 		};
 	};
-    
+
 	let controlPoint = (current, previous, next, reverse) => {
 		let p = previous || current;
 		let n = next || current;
@@ -82,18 +109,18 @@ export function getSplineCurvePointsStr(xList, yList) {
 		let y = current[1] + Math.sin(angle) * length;
 		return [x, y];
 	};
-    
+
 	let bezierCommand = (point, i, a) => {
 		let cps = controlPoint(a[i - 1], a[i - 2], point);
 		let cpe = controlPoint(point, a[i - 1], a[i + 1], true);
 		return `C ${cps[0]},${cps[1]} ${cpe[0]},${cpe[1]} ${point[0]},${point[1]}`;
 	};
-    
+
 	let pointStr = (points, command) => {
 		return points.reduce((acc, point, i, a) => i === 0
 			? `${point[0]},${point[1]}`
 			: `${acc} ${command(point, i, a)}`, '');
 	};
-    
+
 	return pointStr(points, bezierCommand);
 }

src/js/utils/draw.js

@@ -190,30 +190,8 @@ export function percentageBar(x, y, width, height,
 	return createSVG("rect", args);
 }
 
-export function funnelSlice(className, startPositions, height, fill='none') {
+export function funnelSlice(className, startPositions, endPosition, height, fill='none') {
-	const endPosition = []
+	return createSVG("polygon")
-	let [point_a, point_b] = startPositions[0]
-
-	// For an equilateral triangle, the angles are always 60 deg.
-	// The end points on the polygons can be created using the following formula
-	//
-	// end_point_x = start_x + height
-	// end_point_y = start_y +/- height * 1/2
-	//
-	//      b
-	//    _______________________________
-	//    \  |_|                        /
-	//     \   |                       /
-	//      \  | h                    /
-	//       \ |                     /
-	//        \|____________________/
-	//
-	//     b = h * cos(60 deg)
-	//
-
-	endPosition[0] = [point_a[0] + height, point_a[1] + height * 0.5]
-	endPosition[1] = [point_b[0] + height, point_b[1] - height * 0.5]
-
 }
 
 export function heatSquare(className, x, y, size, fill='none', data={}) {
@@ -348,7 +326,7 @@ function makeHoriLine(y, label, x1, x2, options={}) {
 	if(!options.stroke) options.stroke = BASE_LINE_COLOR;
 	if(!options.lineType) options.lineType = '';
 	if (options.shortenNumbers) label = shortenLargeNumber(label);
-	
+
 	let className = 'line-horizontal ' + options.className +
 		(options.lineType === "dashed" ? "dashed": "");
 
@@ -609,7 +587,7 @@ export function getPaths(xList, yList, color, options={}, meta={}) {
 	// Spline
 	if (options.spline)
 		pointsStr = getSplineCurvePointsStr(xList, yList);
-    
+
 	let path = makePath("M"+pointsStr, 'line-graph-path', color);
 
 	// HeatLine