refactored pie charts

__tests__/__snapshots__/PieChart.test.js.snap

@@ -2,6 +2,21 @@
 
 exports[`renders #D pie chart correctly 1`] = `
 <View>
+  <View
+    style={
+      Object {
+        "height": 374,
+        "width": 374,
+      }
+    }
+  >
+    <View
+      style={
+        Object {
+          "position": "absolute",
+        }
+      }
+    >
       <View
         style={
           Array [
@@ -406,11 +421,28 @@ exports[`renders #D pie chart correctly 1`] = `
           }
         />
       </View>
+    </View>
+  </View>
 </View>
 `;
 
 exports[`renders pie chart correctly for Single data 1`] = `
 <View>
+  <View
+    style={
+      Object {
+        "height": 264,
+        "width": 264,
+      }
+    }
+  >
+    <View
+      style={
+        Object {
+          "position": "absolute",
+        }
+      }
+    >
       <View
         style={
           Array [
@@ -587,11 +619,28 @@ exports[`renders pie chart correctly for Single data 1`] = `
           />
         </View>
       </View>
+    </View>
+  </View>
 </View>
 `;
 
 exports[`renders progress pie chart correctly 1`] = `
 <View>
+  <View
+    style={
+      Object {
+        "height": 264,
+        "width": 264,
+      }
+    }
+  >
+    <View
+      style={
+        Object {
+          "position": "absolute",
+        }
+      }
+    >
       <View
         style={
           Array [
@@ -756,11 +805,28 @@ exports[`renders progress pie chart correctly 1`] = `
           </View>
         </View>
       </View>
+    </View>
+  </View>
 </View>
 `;
 
 exports[`renders simple pie chart correctly 1`] = `
 <View>
+  <View
+    style={
+      Object {
+        "height": 264,
+        "width": 264,
+      }
+    }
+  >
+    <View
+      style={
+        Object {
+          "position": "absolute",
+        }
+      }
+    >
       <View
         style={
           Array [
@@ -1143,11 +1209,28 @@ exports[`renders simple pie chart correctly 1`] = `
           />
         </View>
       </View>
+    </View>
+  </View>
 </View>
 `;
 
 exports[`renders split pie chart correctly 1`] = `
 <View
+  style={
+    Object {
+      "height": 264,
+      "width": 264,
+    }
+  }
+>
+  <View
+    style={
+      Object {
+        "position": "absolute",
+      }
+    }
+  >
+    <View
       style={
         Array [
           Object {
@@ -1159,7 +1242,7 @@ exports[`renders split pie chart correctly 1`] = `
           undefined,
         ]
       }
->
+    >
       <RNSVGSvgView
         align="xMidYMid"
         bbHeight={240}
@@ -1308,5 +1391,7 @@ exports[`renders split pie chart correctly 1`] = `
           />
         </RNSVGGroup>
       </RNSVGSvgView>
+    </View>
+  </View>
 </View>
 `;

examples/PieChart/PieChartFocusOnPress.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import {View} from 'react-native';
+import {PieChart} from '../../src/PieChart';
+
+const PieChartFocusOnPress = () => {
+  const pieData = [
+    {value: 54, color: '#177AD5', text: '54%'},
+    {value: 30, color: '#79D2DE', text: '30%'},
+    {value: 26, color: '#ED6665', text: '26%'},
+  ];
+  return (
+    <View>
+      <PieChart
+        donut
+        showText
+        textColor="black"
+        innerRadius={70}
+        showTextBackground
+        textBackgroundColor="white"
+        textBackgroundRadius={22}
+        data={pieData}
+        focusOnPress
+      />
+    </View>
+  );
+};
+
+export default PieChartFocusOnPress;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-charts",
-  "version": "1.2.28",
+  "version": "1.2.29",
   "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

@@ -76,19 +76,7 @@ export const PieChart = (props: propTypes) => {
   const extraRadiusForFocused = props.extraRadiusForFocused || radius / 10;
   const pi = props.semiCircle ? Math.PI / 2 : Math.PI;
   const [selectedIndex, setSelectedIndex] = useState(-1);
-
-  if (props.data.length <= 1 || !props.focusOnPress || selectedIndex === -1) {
-    return (
-      <PieChartMain
-        {...props}
-        key="pie"
-        setSelectedIndex={setSelectedIndex}
-        selectedIndex={selectedIndex}
-      />
-    );
-  } else {
   let startAngle = props.initialAngle || (props.semiCircle ? -pi : 0);
-    // let startColor;
   let total = 0;
   props.data.forEach(item => {
     total += item.value;
@@ -101,7 +89,16 @@ export const PieChart = (props: propTypes) => {
     startAngle += (2 * pi * start) / total;
   }
   return (
-      <View>
+    <View
+      style={{
+        height: (radius + extraRadiusForFocused) * 2,
+        width: (radius + extraRadiusForFocused) * 2,
+      }}>
+      {!(
+        props.data.length <= 1 ||
+        !props.focusOnPress ||
+        selectedIndex === -1
+      ) && (
         <View
           style={{
             position: 'absolute',
@@ -126,22 +123,20 @@ export const PieChart = (props: propTypes) => {
                 strokeWidth: 0,
               },
             ]}
-            key="pie"
             radius={radius + extraRadiusForFocused}
             initialAngle={startAngle}
             showText={false}
             innerRadius={props.innerRadius || radius / 2.5}
           />
         </View>
+      )}
       <View style={{position: 'absolute'}}>
         <PieChartMain
           {...props}
-            key="pie"
           selectedIndex={selectedIndex}
           setSelectedIndex={setSelectedIndex}
         />
       </View>
     </View>
   );
-  }
 };

src/PieChart/main.tsx

@@ -270,8 +270,6 @@ export const PieChartMain = (props: propTypes) => {
               (item.shiftY || 0);
 
             return (
-              <>
-                {/*********************      Pie sections background with colors excluding the borders       *********/}
               <Path
                 key={index + 'a'}
                 d={`M ${cx + (item.shiftX || 0)} ${
@@ -281,8 +279,14 @@ export const PieChartMain = (props: propTypes) => {
                 } 1 ${ax} ${ay} L ${cx + (item.shiftX || 0)} ${
                   cy + (item.shiftY || 0)
                 }`}
-                  stroke={'transparent'}
+                stroke={item.strokeColor || strokeColor}
-                  strokeWidth={0}
+                strokeWidth={
+                  props.focusOnPress && props.selectedIndex === index
+                    ? 0
+                    : item.strokeWidth === 0
+                    ? 0
+                    : item.strokeWidth || strokeWidth
+                }
                 fill={
                   props.selectedIndex === index || item.peripheral
                     ? 'transparent'
@@ -307,43 +311,6 @@ 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
-                  }
-                />
-              </>
             );
           })
         )}