react-native-gifted-charts 1.2.28 → 1.2.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-charts",
-  "version": "1.2.28",
+  "version": "1.2.31",
   "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/index.tsx

@@ -44,6 +44,7 @@ type PropTypes = {
   xAxisColor?: ColorValue;
   yAxisThickness?: number;
   yAxisColor?: ColorValue;
+  xAxisType?: String;
   yAxisLabelContainerStyle?: any;
   horizontalRulesStyle?: any;
   yAxisTextStyle?: any;
@@ -103,6 +104,7 @@ type PropTypes = {
 
   disableScroll?: Boolean;
   showScrollIndicator?: Boolean;
+  indicatorColor?: 'black' | 'default' | 'white';
   roundedTop?: Boolean;
   roundedBottom?: Boolean;
   disablePress?: boolean;
@@ -402,6 +404,7 @@ export const BarChart = (props: PropTypes) => {
   const hideOrigin = props.hideOrigin || false;
 
   const rulesType = props.rulesType || 'line';
+  const xAxisType = props.xAxisType || 'solid';
   const dashWidth = props.dashWidth === 0 ? 0 : props.dashWidth || 4;
   const dashGap = props.dashGap === 0 ? 0 : props.dashGap || 8;
 
@@ -715,11 +718,17 @@ export const BarChart = (props: PropTypes) => {
                   {backgroundColor: backgroundColor},
                 ]}>
                 {index === noOfSections ? (
-                  <View
-                    style={[
-                      styles.lastLine,
-                      {height: xAxisThickness, backgroundColor: xAxisColor},
-                    ]}
+                  <Rule
+                    config={{
+                      thickness: xAxisThickness,
+                      color: xAxisColor,
+                      width: horizontal
+                        ? props.width || Math.min(300, totalWidth)
+                        : (props.width || totalWidth) + 11,
+                      dashWidth: dashWidth,
+                      dashGap: dashGap,
+                      type: xAxisType,
+                    }}
                   />
                 ) : hideRules ? null : (
                   <Rule
@@ -1379,6 +1388,7 @@ export const BarChart = (props: PropTypes) => {
           !props.width && {width: totalWidth},
         ]}
         showsHorizontalScrollIndicator={showScrollIndicator}
+        indicatorStyle={props.indicatorColor}
         horizontal
         // data={props.stackData || data}
         keyExtractor={(item, index) => index.toString()}>

package/src/LineChart/index.tsx

@@ -71,6 +71,7 @@ type propTypes = {
   animateTogether?: boolean;
   xAxisThickness?: number;
   xAxisColor?: ColorValue;
+  xAxisType?: String;
   hideRules?: Boolean;
   rulesColor?: ColorValue;
   rulesThickness?: number;
@@ -119,6 +120,7 @@ type propTypes = {
   disableScroll?: Boolean;
   pointerConfig?: Pointer;
   showScrollIndicator?: Boolean;
+  indicatorColor?: 'black' | 'default' | 'white';
 
   //Indices
 
@@ -369,6 +371,7 @@ type Pointer = {
 
 export const LineChart = (props: propTypes) => {
   const scrollRef = useRef();
+  const [scrollX, setScrollX] = useState(0);
   const [pointerIndex, setPointerIndex] = useState(-1);
   const [pointerX, setPointerX] = useState(0);
   const [pointerY, setPointerY] = useState(0);
@@ -1554,6 +1557,7 @@ export const LineChart = (props: propTypes) => {
   const hideOrigin = props.hideOrigin || false;
 
   const rulesType = props.rulesType || 'line';
+  const xAxisType = props.xAxisType || 'solid';
   const dashWidth = props.dashWidth === 0 ? 0 : props.dashWidth || 4;
   const dashGap = props.dashGap === 0 ? 0 : props.dashGap || 8;
 
@@ -1855,11 +1859,15 @@ export const LineChart = (props: propTypes) => {
                     },
                   ]}>
                   {index === noOfSections ? (
-                    <View
-                      style={[
-                        styles.lastLine,
-                        {height: xAxisThickness, backgroundColor: xAxisColor},
-                      ]}
+                    <Rule
+                      config={{
+                        thickness: xAxisThickness,
+                        color: xAxisColor,
+                        width: (props.width || totalWidth) + 11,
+                        dashWidth: dashWidth,
+                        dashGap: dashGap,
+                        type: xAxisType,
+                      }}
                     />
                   ) : hideRules ? null : (
                     <Rule
@@ -2550,6 +2558,11 @@ export const LineChart = (props: propTypes) => {
     if (autoAdjustPointerLabelPosition) {
       if (pointerX < pointerLabelWidth / 2) {
         left = 7;
+      } else if (
+        activatePointersOnLongPress &&
+        pointerX - scrollX < pointerLabelWidth / 2 - 10
+      ) {
+        left = 7;
       } else {
         if (
           !activatePointersOnLongPress &&
@@ -2561,7 +2574,10 @@ export const LineChart = (props: propTypes) => {
           left = -pointerLabelWidth - 4;
         } else if (
           activatePointersOnLongPress &&
-          pointerX > totalWidth - yAxisLabelWidth - pointerLabelWidth / 2
+          pointerX - scrollX >
+            (props.width + 10 ||
+              Dimensions.get('window').width - yAxisLabelWidth - 15) -
+              pointerLabelWidth / 2
         ) {
           left = -pointerLabelWidth - 4;
         } else {
@@ -3286,7 +3302,17 @@ export const LineChart = (props: propTypes) => {
             scrollRef.current.scrollToEnd({animated: scrollAnimation});
           }
         }}
+        onScroll={ev => {
+          if (
+            pointerConfig &&
+            pointerConfig.activatePointersOnLongPress &&
+            pointerConfig.autoAdjustPointerLabelPosition
+          ) {
+            setScrollX(ev.nativeEvent.contentOffset.x);
+          }
+        }}
         showsHorizontalScrollIndicator={showScrollIndicator}
+        indicatorStyle={props.indicatorColor}
         style={[
           {
             marginLeft:

package/src/PieChart/index.tsx

@@ -76,32 +76,29 @@ 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;
-    });
-    if (selectedIndex !== 0) {
-      let start = 0;
-      for (let i = 0; i < selectedIndex; i++) {
-        start += props.data[i].value;
-      }
-      startAngle += (2 * pi * start) / total;
+  let startAngle = props.initialAngle || (props.semiCircle ? -pi : 0);
+  let total = 0;
+  props.data.forEach(item => {
+    total += item.value;
+  });
+  if (selectedIndex !== 0) {
+    let start = 0;
+    for (let i = 0; i < selectedIndex; i++) {
+      start += props.data[i].value;
     }
-    return (
-      <View>
+    startAngle += (2 * pi * start) / total;
+  }
+  return (
+    <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 style={{position: 'absolute'}}>
+        <PieChartMain
+          {...props}
+          selectedIndex={selectedIndex}
+          setSelectedIndex={setSelectedIndex}
+        />
       </View>
-    );
-  }
+    </View>
+  );
 };

package/src/PieChart/main.tsx

@@ -270,80 +270,47 @@ 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)} ${
-                    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={'transparent'}
-                  strokeWidth={0}
-                  fill={
-                    props.selectedIndex === index || item.peripheral
-                      ? 'transparent'
-                      : showGradient
-                      ? `url(#grad${index})`
-                      : item.color || colors[index % 9]
+              <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={item.strokeColor || strokeColor}
+                strokeWidth={
+                  props.focusOnPress && props.selectedIndex === index
+                    ? 0
+                    : item.strokeWidth === 0
+                    ? 0
+                    : item.strokeWidth || strokeWidth
+                }
+                fill={
+                  props.selectedIndex === index || item.peripheral
+                    ? 'transparent'
+                    : showGradient
+                    ? `url(#grad${index})`
+                    : item.color || colors[index % 9]
+                }
+                onPress={() => {
+                  if (item.onPress) {
+                    item.onPress();
+                  } else if (props.onPress) {
+                    props.onPress(item, index);
                   }
-                  onPress={() => {
-                    if (item.onPress) {
-                      item.onPress();
-                    } else if (props.onPress) {
-                      props.onPress(item, index);
-                    }
-                    if (props.focusOnPress) {
-                      if (props.selectedIndex === index) {
-                        if (toggleFocusOnPress) {
-                          props.setSelectedIndex(-1);
-                        }
-                      } else {
-                        props.setSelectedIndex(index);
+                  if (props.focusOnPress) {
+                    if (props.selectedIndex === index) {
+                      if (toggleFocusOnPress) {
+                        props.setSelectedIndex(-1);
                       }
+                    } else {
+                      props.setSelectedIndex(index);
                     }
-                  }}
-                />
-
-                {/*********************      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
-                  }
-                />
-              </>
+                }}
+              />
             );
           })
         )}

package/src/todos.md

@@ -4,19 +4,15 @@
 
 ## To-dos in documentation-
 
-1. Prepare a doc for Bar chart with negative values
-2. Prepare a doc for Line chart with negative values
-3. Prepare a doc for Bar chart with y axis on right side
-4. Prepare a doc for Line chart with y axis on right side
-5. Prepare a doc for Bar chart combined with Line chart having a separate data for the Line chart
-6. Prepare a doc for Line chart with smoothly scrolling data pointer and strip (along with pointerShiftX)
-7. Prepare a doc for Bar chart with barMarginBottom
-8. Prepare a doc for reference lines
-9. Prepare a doc for labelsPosition in Pie and Donut charts
-8. Prepare a doc for adjustToWidth in Line and Area charts
-9. Prepare a doc for xAxisLabelTexts and xAxisLabelTextStyle in Bar, Line And Area Charts
-10. Prepare a doc for vertical lines to explain noOfVerticalLines and verticalLinesSpacing props. https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/205
-11. Prepare a doc for negative marginBottom instead of marginTop for x axis labels. https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/190
+1. Prepare a doc for Line chart with negative values
+2. Prepare a doc for Line chart with y axis on right side
+3. Prepare a doc for Bar chart combined with Line chart having a separate data for the Line chart
+4. Prepare a doc for Line chart with smoothly scrolling data pointer and strip (along with pointerShiftX)
+5. Prepare a doc for labelsPosition in Pie and Donut charts
+6. Prepare a doc for adjustToWidth in Line and Area charts
+7. Prepare a doc for xAxisLabelTexts and xAxisLabelTextStyle in Bar, Line And Area Charts
+8. Prepare a doc for vertical lines to explain noOfVerticalLines and verticalLinesSpacing props. https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/205
+9. Prepare a doc for negative marginBottom instead of marginTop for x axis labels. https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/190
 
 
 ## Architecture Enhancement