From 228684865b819f8f6d94678416b960f3046ca003 Mon Sep 17 00:00:00 2001
From: Ricardo Marino <ricardo.marino@dreamquark.com>
Date: Tue, 17 Apr 2018 17:45:06 +0200
Subject: [PATCH] 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 | 8 +++++---
 src/js/utils/draw.js      | 5 ++---
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/js/charts/PieChart.js b/src/js/charts/PieChart.js
index 06ba931..cad7cf6 100644
--- a/src/js/charts/PieChart.js
+++ b/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,
diff --git a/src/js/utils/draw.js b/src/js/utils/draw.js
index 04e47e9..aac782b 100644
--- a/src/js/utils/draw.js
+++ b/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`;
 }