react-native-gifted-charts 1.2.16 → 1.2.19

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Abhinandan Kushwaha
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

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

package/src/BarChart/RenderBars.tsx

@@ -64,6 +64,7 @@ type Props = {
   patternId?: String;
   barMarginBottom?: number;
   onPress?: Function;
+  xAxisTextNumberOfLines: number;
 };
 type itemType = {
   value?: number;
@@ -112,6 +113,7 @@ const RenderBars = (props: Props) => {
     autoShiftLabels,
     label,
     labelTextStyle,
+    xAxisTextNumberOfLines,
   } = props;
 
   const barMarginBottom =
@@ -161,7 +163,7 @@ const RenderBars = (props: Props) => {
         ) : (
           <Text
             style={labelTextStyle || {textAlign: 'center'}}
-            numberOfLines={1}>
+            numberOfLines={xAxisTextNumberOfLines}>
             {label || ''}
           </Text>
         )}
@@ -204,7 +206,7 @@ const RenderBars = (props: Props) => {
         ) : (
           <Text
             style={labelTextStyle || {textAlign: 'center'}}
-            numberOfLines={1}>
+            numberOfLines={xAxisTextNumberOfLines}>
             {label || ''}
           </Text>
         )}

package/src/BarChart/RenderStackBars.tsx

@@ -38,6 +38,7 @@ type Props = {
   xAxisThickness: number;
   barBackgroundPattern?: Function;
   patternId?: String;
+  xAxisTextNumberOfLines: number;
 };
 type itemType = {
   value?: number;
@@ -69,6 +70,7 @@ const RenderStackBars = (props: Props) => {
     xAxisThickness,
     label,
     labelTextStyle,
+    xAxisTextNumberOfLines,
   } = props;
   const disablePress = props.disablePress || false;
   const renderLabel = (label: String, labelTextStyle: any) => {
@@ -92,7 +94,7 @@ const RenderStackBars = (props: Props) => {
         {item.labelComponent ? (
           item.labelComponent()
         ) : (
-          <Text style={[labelTextStyle]} numberOfLines={1}>
+          <Text style={[labelTextStyle]} numberOfLines={xAxisTextNumberOfLines}>
             {label || ''}
           </Text>
         )}

package/src/BarChart/index.tsx

@@ -47,6 +47,8 @@ type PropTypes = {
   yAxisLabelContainerStyle?: any;
   horizontalRulesStyle?: any;
   yAxisTextStyle?: any;
+  yAxisTextNumberOfLines?: number;
+  xAxisTextNumberOfLines?: number;
   yAxisLabelWidth?: number;
   hideYAxisText?: Boolean;
   yAxisSide?: string;
@@ -372,6 +374,8 @@ export const BarChart = (props: PropTypes) => {
       : props.yAxisThickness || 1;
   const yAxisColor = props.yAxisColor || 'black';
   const yAxisTextStyle = props.yAxisTextStyle;
+  const yAxisTextNumberOfLines = props.yAxisTextNumberOfLines || 1;
+  const xAxisTextNumberOfLines = props.xAxisTextNumberOfLines || 1;
   const yAxisLabelContainerStyle = props.yAxisLabelContainerStyle;
   const horizontalRulesStyle = props.horizontalRulesStyle;
   const showFractionalValues = props.showFractionalValues || false;
@@ -768,7 +772,7 @@ export const BarChart = (props: PropTypes) => {
                     yAxisLabelContainerStyle,
                   ]}>
                   <Text
-                    numberOfLines={1}
+                    numberOfLines={yAxisTextNumberOfLines}
                     ellipsizeMode={'clip'}
                     style={[
                       yAxisTextStyle,
@@ -875,7 +879,7 @@ export const BarChart = (props: PropTypes) => {
                     yAxisLabelContainerStyle,
                   ]}>
                   <Text
-                    numberOfLines={1}
+                    numberOfLines={yAxisTextNumberOfLines}
                     ellipsizeMode={'clip'}
                     style={[
                       yAxisTextStyle,
@@ -1399,6 +1403,7 @@ export const BarChart = (props: PropTypes) => {
                     labelTextStyle={
                       item.labelTextStyle || props.xAxisLabelTextStyle
                     }
+                    xAxisTextNumberOfLines={xAxisTextNumberOfLines}
                   />
                 );
               })
@@ -1460,6 +1465,7 @@ export const BarChart = (props: PropTypes) => {
                     item.labelTextStyle || props.xAxisLabelTextStyle
                   }
                   onPress={props.onPress}
+                  xAxisTextNumberOfLines={xAxisTextNumberOfLines}
                 />
               ))}
         </Fragment>

package/src/LineChart/index.tsx

@@ -154,6 +154,8 @@ type propTypes = {
   yAxisLabelContainerStyle?: any;
   horizontalRulesStyle?: any;
   yAxisTextStyle?: any;
+  yAxisTextNumberOfLines?: number;
+  xAxisTextNumberOfLines?: number;
   showFractionalValues?: Boolean;
   roundToDigits?: number;
   yAxisLabelWidth?: number;
@@ -1386,6 +1388,8 @@ export const LineChart = (props: propTypes) => {
     props.yAxisThickness === 0 ? 0 : props.yAxisThickness || 1;
   const yAxisColor = props.yAxisColor || 'black';
   const yAxisTextStyle = props.yAxisTextStyle;
+  const yAxisTextNumberOfLines = props.yAxisTextNumberOfLines || 1;
+  const xAxisTextNumberOfLines = props.xAxisTextNumberOfLines || 1;
   const yAxisLabelContainerStyle = props.yAxisLabelContainerStyle;
   const horizontalRulesStyle = props.horizontalRulesStyle;
   const showFractionalValues = props.showFractionalValues || false;
@@ -1681,7 +1685,7 @@ export const LineChart = (props: propTypes) => {
         ) : (
           <Text
             style={labelTextStyle || {textAlign: 'center'}}
-            numberOfLines={1}>
+            numberOfLines={xAxisTextNumberOfLines}>
             {label || ''}
           </Text>
         )}
@@ -1719,7 +1723,7 @@ export const LineChart = (props: propTypes) => {
         ) : (
           <Text
             style={labelTextStyle || {textAlign: 'center'}}
-            numberOfLines={1}>
+            numberOfLines={xAxisTextNumberOfLines}>
             {label || ''}
           </Text>
         )}
@@ -1899,7 +1903,7 @@ export const LineChart = (props: propTypes) => {
                     yAxisLabelContainerStyle,
                   ]}>
                   <Text
-                    numberOfLines={1}
+                    numberOfLines={yAxisTextNumberOfLines}
                     ellipsizeMode={'clip'}
                     style={[
                       yAxisTextStyle,
@@ -2001,7 +2005,7 @@ export const LineChart = (props: propTypes) => {
                     yAxisLabelContainerStyle,
                   ]}>
                   <Text
-                    numberOfLines={1}
+                    numberOfLines={yAxisTextNumberOfLines}
                     ellipsizeMode={'clip'}
                     style={[
                       yAxisTextStyle,
@@ -2518,6 +2522,48 @@ export const LineChart = (props: propTypes) => {
     }
     pointerYLocal = Math.min(...arr);
 
+    let left = 0,
+      top = 0;
+    if (autoAdjustPointerLabelPosition) {
+      if (pointerX < pointerLabelWidth / 2) {
+        left = 7;
+      } else {
+        if (
+          !activatePointersOnLongPress &&
+          pointerX >
+            (props.width ||
+              Dimensions.get('window').width - yAxisLabelWidth - 15) -
+              pointerLabelWidth / 2
+        ) {
+          left = -pointerLabelWidth - 4;
+        } else if (
+          activatePointersOnLongPress &&
+          pointerX > totalWidth - yAxisLabelWidth - pointerLabelWidth / 2
+        ) {
+          left = -pointerLabelWidth - 4;
+        } else {
+          left = -pointerLabelWidth / 2 + 5;
+        }
+      }
+    } else {
+      left = (pointerRadius || pointerWidth / 2) - 10 + shiftPointerLabelX;
+    }
+
+    if (autoAdjustPointerLabelPosition) {
+      if (pointerLabelHeight - pointerYLocal > 10) {
+        top = 10;
+      } else {
+        top = -pointerLabelHeight;
+      }
+    } else {
+      top =
+        (pointerStripUptoDataPoint
+          ? pointerRadius || pointerStripHeight / 2
+          : -pointerYLocal + 8) -
+        pointerLabelWidth / 2 +
+        shiftPointerLabelY;
+    }
+
     return (
       <View
         style={{
@@ -2569,30 +2615,8 @@ export const LineChart = (props: propTypes) => {
             style={[
               {
                 position: 'absolute',
-                left: autoAdjustPointerLabelPosition
-                  ? pointerX < pointerLabelWidth / 2
-                    ? 7
-                    : !activatePointersOnLongPress &&
-                      pointerX >
-                        (props.width ||
-                          Dimensions.get('window').width -
-                            yAxisLabelWidth -
-                            15) -
-                          pointerLabelWidth / 2
-                    ? -pointerLabelWidth - 4
-                    : pointerLabelWidth / -2 + 5
-                  : (pointerRadius || pointerWidth / 2) -
-                    10 +
-                    shiftPointerLabelX,
-                top: autoAdjustPointerLabelPosition
-                  ? pointerLabelHeight - pointerYLocal > 10
-                    ? 10
-                    : -pointerLabelHeight
-                  : (pointerStripUptoDataPoint
-                      ? pointerRadius || pointerStripHeight / 2
-                      : -pointerYLocal + 8) -
-                    pointerLabelWidth / 2 +
-                    shiftPointerLabelY,
+                left: left,
+                top: top,
                 marginTop: pointerStripUptoDataPoint
                   ? 0
                   : containerHeight - pointerStripHeight,
@@ -2791,7 +2815,6 @@ export const LineChart = (props: propTypes) => {
             2;
           setPointerX(z);
           let item, y;
-          setPointerX(z);
           item = data[factor];
           y =
             containerHeight -
@@ -2943,7 +2966,7 @@ export const LineChart = (props: propTypes) => {
           setResponderActive(false);
           setTimeout(() => setPointerX(0), pointerVanishDelay);
         }}
-        onResponderTerminationRequest={(evt) => false}
+        onResponderTerminationRequest={evt => false}
         // onResponderTerminate={evt => {
         //   console.log('evt...terminate.......',evt);
         // }}
@@ -3015,7 +3038,6 @@ export const LineChart = (props: propTypes) => {
             2;
           setPointerX(z);
           let item, y;
-          setPointerX(z);
           item = data[factor];
           y =
             containerHeight -
@@ -3166,7 +3188,7 @@ export const LineChart = (props: propTypes) => {
           setResponderActive(false);
           setTimeout(() => setPointerX(0), pointerVanishDelay);
         }}
-        onResponderTerminationRequest={(evt) => false}
+        onResponderTerminationRequest={evt => false}
         // onResponderTerminate={evt => {
         //   console.log('evt...terminate.......',evt);
         // }}
@@ -3428,7 +3450,7 @@ export const LineChart = (props: propTypes) => {
                 strokeDashArray5,
               )
           : null}
-        {pointerX ? (
+        {pointerX > 0 ? (
           <View
             style={{
               position: 'absolute',

package/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}

package/src/todos.md

@@ -1,6 +1,6 @@
 ## Features
 
-1. Fix the issue- When `activatePointersOnLongPress` is set to true, sometimes, the pointerLabel doesn't vanish after releasing the scroll. It gets stuck.
+1. Fix the issue with pointers in Line/Area charts on Android https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/177
 
 ## To-dos in documentation-