Merge pull request #181 from thomas-oo/Fix_piechart_large_arc

Fix piechart large arc

src/js/charts/PieChart.js

@@ -39,10 +39,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);
@@ -58,8 +61,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

@@ -110,13 +110,12 @@ export function makePath(pathStr, className='', stroke='none', fill='none', stro
 	});
 }
 
-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`;
 }