Fix for issue #108

Piechart could not render large arcs (>180) properly because the
information of large arc was not provided to the SVG drawing
function. This was fixed, and the piechart should render
correctly when one slice is larger than 180 degrees.

src/js/charts/PieChart.js

@@ -55,10 +55,13 @@ export default class PieChart extends AggregationChart {
 		s.sliceStrings = [];
 		s.slicesProperties = [];
 		let curAngle = 180 - this.config.startAngle;
-
 		s.sliceTotals.map((total, i) => {
 			const startAngle = curAngle;
 			const originDiffAngle = (total / s.grandTotal) * FULL_ANGLE;
+			let largeArc = 0;
+			if(originDiffAngle > 180){
+				largeArc = 1;
+			}
 			const diffAngle = clockWise ? -originDiffAngle : originDiffAngle;
 			const endAngle = curAngle = curAngle + diffAngle;
 			const startPosition = getPositionByAngle(startAngle, radius);
@@ -74,8 +77,7 @@ export default class PieChart extends AggregationChart {
 				curStart = startPosition;
 				curEnd = endPosition;
 			}
-			const curPath = makeArcPathStr(curStart, curEnd, this.center, this.radius, this.clockWise);
-
+			const curPath = makeArcPathStr(curStart, curEnd, this.center, this.radius, clockWise, largeArc);
 			s.sliceStrings.push(curPath);
 			s.slicesProperties.push({
 				startPosition,

src/js/utils/draw.js

@@ -106,13 +106,12 @@ export function makePath(pathStr, className='', stroke='none', fill='none') {
 	});
 }
 
-export function makeArcPathStr(startPosition, endPosition, center, radius, clockWise=1){
+export function makeArcPathStr(startPosition, endPosition, center, radius, clockWise=1, largeArc=0){
 	let [arcStartX, arcStartY] = [center.x + startPosition.x, center.y + startPosition.y];
 	let [arcEndX, arcEndY] = [center.x + endPosition.x, center.y + endPosition.y];
-
 	return `M${center.x} ${center.y}
 		L${arcStartX} ${arcStartY}
-		A ${radius} ${radius} 0 0 ${clockWise ? 1 : 0}
+		A ${radius} ${radius} 0 ${largeArc} ${clockWise ? 1 : 0}
 		${arcEndX} ${arcEndY} z`;
 }