Merge pull request #211 from Abhinandan-Kushwaha/abhi

Abhi

docs/PieChart/PieChartProps.md

@@ -86,6 +86,9 @@ The default value for labelsPosition is 'mid'. In case of donut and semicircle c
 | labelPosition        | string     | Tells where inside the Pie sections should the labels be shown- 'onBorder', 'outward', 'inward' or 'mid' |
 | onPress              | Function   | Callback function called on press of Pie sections (takes item and index as parameter)                    |
 | onLabelPress         | Function   | Callback function called on press of a Label (takes item and index as parameter)                         |
+| strokeWidth          | number         | Stroke (line) width for the Pie chart and its section                                                |
+| strokeColor          | ColorValue     | Stroke (line) color                                                                                  |
+
 
 
 ### Donut chart related props

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-charts",
-  "version": "1.2.27",
+  "version": "1.2.28",
   "description": "The most complete library for Bar, Line, Area, Pie, Donut and Stacked Bar charts in React Native. Allows 2D, 3D, gradient, animations and live data updates.",
   "main": "src/index.tsx",
   "files": [

src/PieChart/index.tsx

@@ -67,6 +67,8 @@ type itemType = {
   labelPosition?: 'onBorder' | 'outward' | 'inward' | 'mid';
   onPress?: Function;
   onLabelPress?: Function;
+  strokeWidth?: number;
+  strokeColor?: string;
 };
 
 export const PieChart = (props: propTypes) => {
@@ -113,15 +115,22 @@ export const PieChart = (props: propTypes) => {
                 value: props.data[selectedIndex].value,
                 color:
                   props.data[selectedIndex].color || colors[selectedIndex % 9],
+                strokeColor: props.data[selectedIndex].strokeColor || null,
+                strokeWidth: props.data[selectedIndex].strokeWidth || null,
+                gradientCenterColor:
+                  props.data[selectedIndex].gradientCenterColor || null,
               },
               {
                 value: total - props.data[selectedIndex].value,
-                color: 'transparent',
+                peripheral: true,
+                strokeWidth: 0,
               },
             ]}
             key="pie"
             radius={radius + extraRadiusForFocused}
             initialAngle={startAngle}
+            showText={false}
+            innerRadius={props.innerRadius || radius / 2.5}
           />
         </View>
         <View style={{position: 'absolute'}}>

src/PieChart/main.tsx

@@ -73,6 +73,9 @@ type itemType = {
   labelPosition?: 'onBorder' | 'outward' | 'inward' | 'mid';
   onPress?: Function;
   onLabelPress?: Function;
+  strokeWidth?: number;
+  strokeColor?: string;
+  peripheral?: boolean;
 };
 
 export const PieChartMain = (props: propTypes) => {
@@ -266,11 +269,9 @@ export const PieChartMain = (props: propTypes) => {
               cy * (1 - Math.cos(2 * pi * nextItem + initialAngle)) +
               (item.shiftY || 0);
 
-            // console.log('sx', sx);
-            // console.log('sy', sy);
-            // console.log('ax', ax);
-            // console.log('ay', ay);
             return (
+              <>
+                {/*********************      Pie sections background with colors excluding the borders       *********/}
                 <Path
                   key={index + 'a'}
                   d={`M ${cx + (item.shiftX || 0)} ${
@@ -280,10 +281,12 @@ export const PieChartMain = (props: propTypes) => {
                   } 1 ${ax} ${ay} L ${cx + (item.shiftX || 0)} ${
                     cy + (item.shiftY || 0)
                   }`}
-                stroke={strokeColor}
+                  stroke={'transparent'}
-                strokeWidth={strokeWidth}
+                  strokeWidth={0}
                   fill={
-                  showGradient
+                    props.selectedIndex === index || item.peripheral
+                      ? 'transparent'
+                      : showGradient
                       ? `url(#grad${index})`
                       : item.color || colors[index % 9]
                   }
@@ -304,6 +307,43 @@ export const PieChartMain = (props: propTypes) => {
                     }
                   }}
                 />
+
+                {/*********************      Pie sections borders (made separately as they can have separate strokeWidths)      *********/}
+                <Path
+                  key={index + 'line1'}
+                  d={`M ${cx + (item.shiftX || 0)} ${
+                    cy + (item.shiftY || 0)
+                  } L ${sx} ${sy}`}
+                  stroke={item.strokeColor || strokeColor}
+                  strokeWidth={
+                    item.strokeWidth === 0 ? 0 : item.strokeWidth || strokeWidth
+                  }
+                />
+                <Path
+                  key={index + 'arc'}
+                  d={`M ${sx} ${sy} A ${radius} ${radius} 0 ${
+                    semiCircle ? 0 : data[index].value > total / 2 ? 1 : 0
+                  } 1 ${ax} ${ay}`}
+                  stroke={item.strokeColor || strokeColor}
+                  strokeWidth={
+                    props.focusOnPress && props.selectedIndex === index
+                      ? 0
+                      : item.strokeWidth === 0
+                      ? 0
+                      : item.strokeWidth || strokeWidth
+                  }
+                />
+                <Path
+                  key={index + 'line2'}
+                  d={`M ${ax} ${ay} L ${cx + (item.shiftX || 0)} ${
+                    cy + (item.shiftY || 0)
+                  }`}
+                  stroke={item.strokeColor || strokeColor}
+                  strokeWidth={
+                    item.strokeWidth === 0 ? 0 : item.strokeWidth || strokeWidth
+                  }
+                />
+              </>
             );
           })
         )}