Merge pull request #188 from Abhinandan-Kushwaha/abhi

Fixed issue with pointerConfig in Line charts on Android and single …
2025-02-23 17:18:24 +00:00 · 2022-05-15 23:29:26 +05:30 · 2022-05-15 23:29:26 +05:30 · 41a8b30c2d
commit 41a8b30c2d
parent dbd4b18636 6dd0f1c765
7 changed files with 321 additions and 61 deletions
--- a/App.js
+++ b/App.js
@ -943,7 +943,7 @@ const App = () => {
  ];
  const pieData2 = [
    {value: 70, color: '#177AD5'},
-    {value: 30, color: 'lightgray'},
+    // {value: 30, color: 'lightgray'},
  ];
  const onBarPressed = (item, index) => {
    console.log(item);
@ -1045,12 +1045,12 @@ const App = () => {
  ];

  return (
-    <ScrollView
-      style={{
-        paddingVertical: 100,
-        paddingLeft: 20,
-        backgroundColor: '#1C1C1C',
-      }}>
+  <View
+    style={{
+      paddingVertical: 100,
+      paddingLeft: 20,
+      backgroundColor: '#1C1C1C',
+    }}>
      {/* <PieChart data={llData}/> */}
      {/* <BarThreeD/> */}
      {/* <BarWithGradient /> */}
@ -1092,13 +1092,18 @@ const App = () => {
        endOpacity={0.2}
        initialSpacing={0}
        noOfSections={6}
+        stepHeight={50}
+        height={300}
        maxValue={600}
        yAxisColor="white"
        yAxisThickness={0}
        rulesType="solid"
        rulesColor="gray"
        yAxisTextStyle={{color: 'gray'}}
-        yAxisSide='right'
+        yAxisLabelPrefix='hello'
+        yAxisTextNumberOfLines={2}
+        // yAxisLabelWidth={40}
+        // yAxisSide='right'
        xAxisColor="lightgray"
        pointerConfig={{
          pointerStripHeight: 160,
@ -1108,7 +1113,7 @@ const App = () => {
          radius: 6,
          pointerLabelWidth: 100,
          pointerLabelHeight: 90,
-          activatePointersOnLongPress: true,
+          // activatePointersOnLongPress: true,
          autoAdjustPointerLabelPosition: false,
          pointerLabelComponent: items => {
            return (
@ -1164,14 +1169,20 @@ const App = () => {
            data={pieData}
            /> */}
      {/* <PieChart
-        donut
-        innerRadius={80}
+        // donut
+        // innerRadius={80}
        data={pieData2}
-        isThreeD
-        shadow
-        centerLabelComponent={() => {
-          return <Text style={{fontSize: 30}}>70%</Text>;
-        }}
+        showText
+        semiCircle
+        // showTextBackground
+        // textBackgroundColor='white'
+        // textBackgroundRadius={20}
+        showValuesAsLabels={true}
+        // isThreeD
+        // shadow
+        // centerLabelComponent={() => {
+        //   return <Text style={{fontSize: 30}}>70%</Text>;
+        // }}
      /> */}
      {/* <MyPattern/> */}
      {/* <PieChart
@ -1795,7 +1806,7 @@ const App = () => {
        style={{marginTop: 100, alignSelf: 'center'}}>
        <Text>Line Chart</Text>
      </TouchableOpacity> */}
-    </ScrollView>
+    </View>
  );
 };

--- a/tests/PieChart.test.js
+++ b/tests/PieChart.test.js
@ -8,6 +8,8 @@ import ProgressPie from '../examples/PieChart/ProgressPie';
 import SimplePie from '../examples/PieChart/SimplePie';
 import SplitPie from '../examples/PieChart/SplitPie';
 import ThreeDPie from '../examples/PieChart/ThreeDPie';
+import PieSingleData from '../examples/PieChart/PieSingleData';
+

 // Note: test renderer must be required after react-native.
 import renderer from 'react-test-renderer';
@ -31,3 +33,8 @@ it('renders #D pie chart correctly', () => {
  const tree = renderer.create(<ThreeDPie />).toJSON();
  expect(tree).toMatchSnapshot();
 });
+
+it('renders pie chart correctly for Single data', () => {
+  const tree = renderer.create(<PieSingleData />).toJSON();
+  expect(tree).toMatchSnapshot();
+});
--- a/tests/snapshots/PieChart.test.js.snap
+++ b/tests/snapshots/PieChart.test.js.snap
@ -409,6 +409,187 @@ exports[`renders #D pie chart correctly 1`] = `
 </View>
 `;

+exports[`renders pie chart correctly for Single data 1`] = `
+<View>
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "transparent",
+          "height": 240,
+          "overflow": "hidden",
+          "width": 240,
+        },
+        undefined,
+      ]
+    }
+  >
+    <RNSVGSvgView
+      align="xMidYMid"
+      bbHeight={240}
+      bbWidth={240}
+      focusable={false}
+      height={240}
+      meetOrSlice={0}
+      minX={0}
+      minY={0}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "transparent",
+            "borderWidth": 0,
+          },
+          Object {
+            "flex": 0,
+            "height": 240,
+            "width": 240,
+          },
+        ]
+      }
+      vbHeight={240}
+      vbWidth={240}
+      width={240}
+    >
+      <RNSVGGroup>
+        <RNSVGDefs>
+          <RNSVGRadialGradient
+            cx="50%"
+            cy="50%"
+            fx="50%"
+            fy="50%"
+            gradient={
+              Array [
+                0,
+                -1,
+                1,
+                -15238443,
+              ]
+            }
+            gradientTransform={null}
+            gradientUnits={1}
+            name="grad0"
+            rx="50%"
+            ry="50%"
+          />
+        </RNSVGDefs>
+        <RNSVGCircle
+          cx={120}
+          cy={120}
+          fill={4279728853}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          propList={
+            Array [
+              "fill",
+            ]
+          }
+          r={120}
+          responsible={true}
+        />
+        <RNSVGCircle
+          cx={120.00000000000003}
+          cy={32}
+          fill={4294967295}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          propList={
+            Array [
+              "fill",
+            ]
+          }
+          r={22}
+          responsible={true}
+        />
+        <RNSVGText
+          content={null}
+          dx={Array []}
+          dy={Array []}
+          fill={4278190080}
+          font={
+            Object {
+              "fontSize": 16,
+              "fontStyle": "normal",
+            }
+          }
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          propList={
+            Array [
+              "fill",
+            ]
+          }
+          responsible={true}
+          rotate={Array []}
+          x={
+            Array [
+              111.11111111111114,
+            ]
+          }
+          y={
+            Array [
+              36,
+            ]
+          }
+        >
+          <RNSVGTSpan
+            content="54%"
+            dx={Array []}
+            dy={Array []}
+            font={Object {}}
+            rotate={Array []}
+            x={Array []}
+            y={Array []}
+          />
+        </RNSVGText>
+      </RNSVGGroup>
+    </RNSVGSvgView>
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "alignSelf": "center",
+            "backgroundColor": "white",
+            "borderColor": "lightgray",
+            "borderRadius": 70,
+            "borderWidth": 0,
+            "height": 140,
+            "justifyContent": "center",
+            "left": 50,
+            "position": "absolute",
+            "top": 50,
+            "width": 140,
+            "zIndex": 100,
+          },
+          undefined,
+          false,
+        ]
+      }
+    >
+      <View
+        style={
+          Object {
+            "marginTop": 0,
+          }
+        }
+      />
+    </View>
+  </View>
+</View>
+`;
+
 exports[`renders progress pie chart correctly 1`] = `
 <View>
  <View
--- a/examples/PieChart/PieSingleData.js
+++ b/examples/PieChart/PieSingleData.js
@ -0,0 +1,23 @@
+import React from 'react';
+import {View} from 'react-native';
+import {PieChart} from '../../src/PieChart';
+
+const PieSingleData = () => {
+  const pieData = [{value: 54, color: '#177AD5', text: '54%'}];
+  return (
+    <View>
+      <PieChart
+        donut
+        showText
+        textColor="black"
+        innerRadius={70}
+        showTextBackground
+        textBackgroundColor="white"
+        textBackgroundRadius={22}
+        data={pieData}
+      />
+    </View>
+  );
+};
+
+export default PieSingleData;
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "react-native-gifted-charts",
-  "version": "1.2.17",
+  "version": "1.2.18",
  "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": [
--- a/src/LineChart/index.tsx
+++ b/src/LineChart/index.tsx
@ -3432,7 +3432,7 @@ export const LineChart = (props: propTypes) => {
                strokeDashArray5,
              )
          : null}
-        {pointerX ? (
+        {pointerX > 0 ? (
          <View
            style={{
              position: 'absolute',
--- a/src/PieChart/index.tsx
+++ b/src/PieChart/index.tsx
@ -210,6 +210,7 @@ export const PieChart = (props: propTypes) => {
          {data.map((item, index) => {
            return (
              <RadialGradient
+                key={index + ''}
                id={'grad' + index}
                cx="50%"
                cy="50%"
@ -232,54 +233,75 @@ export const PieChart = (props: propTypes) => {
            );
          })}
        </Defs>
-        {data.map((item, index) => {
-          // console.log('index', index);
-          let nextItem;
-          if (index === pData.length - 1) nextItem = pData[0];
-          else nextItem = pData[index + 1];
-          let sx =
-            cx * (1 + Math.sin(2 * pi * pData[index] + initialAngle)) +
-            (item.shiftX || 0);
-          let sy =
-            cy * (1 - Math.cos(2 * pi * pData[index] + initialAngle)) +
-            (item.shiftY || 0);
-          let ax =
-            cx * (1 + Math.sin(2 * pi * nextItem + initialAngle)) +
-            (item.shiftX || 0);
-          let ay =
-            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 (
-            <Path
-              d={`M ${cx + (item.shiftX || 0)} ${
-                cy + (item.shiftY || 0)
-              } L ${sx} ${sy} A ${radius} ${radius} 0 ${
-                semiCircle ? 0 : data[index].value > total / 2 ? 1 : 0
-              } 1 ${ax} ${ay} L ${cx + (item.shiftX || 0)} ${
-                cy + (item.shiftY || 0)
-              }`}
-              stroke={strokeColor}
-              strokeWidth={strokeWidth}
+        {data.length === 1 ? (
+          <>
+            <Circle
+              cx={cx}
+              cy={cy}
+              r={radius}
              fill={
-                showGradient
-                  ? `url(#grad${index})`
-                  : item.color || colors[index % 9]
+                showGradient ? `url(#grad${0})` : data[0].color || colors[0 % 9]
              }
              onPress={() => {
-                item.onPress
-                  ? item.onPress
+                data[0].onPress
+                  ? data[0].onPress
                  : props.onPress
-                  ? props.onPress(item, index)
+                  ? props.onPress(data[0], 0)
                  : null;
              }}
            />
-          );
-        })}
+          </>
+        ) : (
+          data.map((item, index) => {
+            // console.log('index', index);
+            let nextItem;
+            if (index === pData.length - 1) nextItem = pData[0];
+            else nextItem = pData[index + 1];
+            let sx =
+              cx * (1 + Math.sin(2 * pi * pData[index] + initialAngle)) +
+              (item.shiftX || 0);
+            let sy =
+              cy * (1 - Math.cos(2 * pi * pData[index] + initialAngle)) +
+              (item.shiftY || 0);
+            let ax =
+              cx * (1 + Math.sin(2 * pi * nextItem + initialAngle)) +
+              (item.shiftX || 0);
+            let ay =
+              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 (
+              <Path
+                key={index + 'a'}
+                d={`M ${cx + (item.shiftX || 0)} ${
+                  cy + (item.shiftY || 0)
+                } L ${sx} ${sy} A ${radius} ${radius} 0 ${
+                  semiCircle ? 0 : data[index].value > total / 2 ? 1 : 0
+                } 1 ${ax} ${ay} L ${cx + (item.shiftX || 0)} ${
+                  cy + (item.shiftY || 0)
+                }`}
+                stroke={strokeColor}
+                strokeWidth={strokeWidth}
+                fill={
+                  showGradient
+                    ? `url(#grad${index})`
+                    : item.color || colors[index % 9]
+                }
+                onPress={() => {
+                  item.onPress
+                    ? item.onPress
+                    : props.onPress
+                    ? props.onPress(item, index)
+                    : null;
+                }}
+              />
+            );
+          })
+        )}

        {showText &&
          data.map((item, index) => {
@ -308,6 +330,21 @@ export const PieChart = (props: propTypes) => {
            x += item.shiftX || 0;
            y += item.shiftY || 0;

+            if (data.length === 1) {
+              if (donut) {
+                y =
+                  (radius -
+                    innerRadius +
+                    (item.textBackgroundRadius ||
+                      props.textBackgroundRadius ||
+                      item.textSize ||
+                      textSize)) /
+                  2;
+              } else {
+                y = cy;
+              }
+            }
+
            // console.log('sx', sx);
            // console.log('sy', sy);
            // console.log('ax', ax);
@ -317,6 +354,7 @@ export const PieChart = (props: propTypes) => {
                {/* <Line x1={mx} x2={cx} y1={my} y2={cy} stroke="black" /> */}
                {showTextBackground && (
                  <Circle
+                    key={index + 'b'}
                    cx={x}
                    cy={y - (item.textSize || textSize) / 4}
                    r={
@ -340,7 +378,7 @@ export const PieChart = (props: propTypes) => {
                  />
                )}
                <SvgText
-                  fill={item.textColor || textColor || colors[(index + 1) % 9]}
+                  fill={item.textColor || textColor || colors[(index + 2) % 9]}
                  fontSize={item.textSize || textSize}
                  fontFamily={item.font || props.font}
                  fontWeight={item.fontWeight || props.fontWeight}