react-native-gifted-charts 1.0.16 → 1.0.17

package/package.json

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

@@ -37,6 +37,7 @@ type propTypes = {
   maxValue?: number;
   barBackgroundPattern?: Function;
   patternId?: String;
+  barMarginBottom?: number;
 };
 type itemType = {
   value?: number;
@@ -58,6 +59,7 @@ type itemType = {
   barBorderRadius?: number;
   barBackgroundPattern?: Function;
   patternId?: String;
+  barMarginBottom?: number;
 };
 
 const Animated2DWithGradient = (props: propTypes) => {
@@ -72,6 +74,7 @@ const Animated2DWithGradient = (props: propTypes) => {
     noAnimation,
     containerHeight,
     maxValue,
+    barMarginBottom,
   } = props;
   const [height, setHeight] = useState(noAnimation ? props.height : 2);
   const [initialRender, setInitialRender] = useState(
@@ -114,18 +117,20 @@ const Animated2DWithGradient = (props: propTypes) => {
             position: 'absolute',
             bottom: 0,
             width: '100%',
-            height: noAnimation
-              ? (Math.abs(item.value) * (containerHeight || 200)) /
-                (maxValue || 200)
-              : height,
+            height:
+              (noAnimation
+                ? (Math.abs(item.value) * (containerHeight || 200)) /
+                  (maxValue || 200)
+                : height) - (barMarginBottom || 0),
           }}>
           <View
             style={{
               width: '100%',
-              height: noAnimation
-                ? (Math.abs(item.value) * (containerHeight || 200)) /
-                  (maxValue || 200)
-                : height,
+              height:
+                (noAnimation
+                  ? (Math.abs(item.value) * (containerHeight || 200)) /
+                    (maxValue || 200)
+                  : height) - (barMarginBottom || 0),
             }}>
             {noGradient ? (
               <View
@@ -168,7 +173,7 @@ const Animated2DWithGradient = (props: propTypes) => {
                       height:
                         item.capThickness === 0
                           ? 0
-                          : item.capThickness || props.capThickness || 0,
+                          : item.capThickness || props.capThickness || 6,
                       backgroundColor:
                         item.capColor || props.capColor || 'black',
                       borderTopLeftRadius:
@@ -223,12 +228,12 @@ const Animated2DWithGradient = (props: propTypes) => {
                 {props.cappedBars && (
                   <View
                     style={{
-                      // position: 'absolute',
-                      // width: '100%',
+                      position: 'absolute',
+                      width: '100%',
                       height:
                         item.capThickness === 0
                           ? 0
-                          : item.capThickness || props.capThickness || 0,
+                          : item.capThickness || props.capThickness || 6,
                       backgroundColor:
                         item.capColor || props.capColor || 'black',
                       borderTopLeftRadius:

package/src/BarChart/RenderBars.tsx

@@ -61,6 +61,7 @@ type Props = {
   autoShiftLabels?: Boolean;
   barBackgroundPattern?: Function;
   patternId?: String;
+  barMarginBottom?: number;
 };
 type itemType = {
   value?: number;
@@ -87,6 +88,7 @@ type itemType = {
   labelWidth?: number;
   barBackgroundPattern?: Function;
   patternId?: String;
+  barMarginBottom?: number;
 };
 const RenderBars = (props: Props) => {
   const {
@@ -108,6 +110,9 @@ const RenderBars = (props: Props) => {
     autoShiftLabels,
   } = props;
 
+  const barMarginBottom =
+    item.barMarginBottom === 0 ? 0 : props.barMarginBottom || 0;
+
   const renderLabel = (label: String, labelTextStyle: any, value: number) => {
     return (
       <View
@@ -313,17 +318,17 @@ const RenderBars = (props: Props) => {
       style={[
         {
           // overflow: 'visible',
-          marginBottom: 60,
+          marginBottom: 60 + barMarginBottom,
           width: item.barWidth || props.barWidth || 30,
           height:
-            item.value >= 0 &&
+            (item.value >= 0 &&
             (!isThreeD || isAnimated) &&
             item.topLabelComponent
               ? (item.topLabelComponentHeight || 30) +
                 (Math.abs(item.value) * (containerHeight || 200)) /
                   (maxValue || 200)
               : (Math.abs(item.value) * (containerHeight || 200)) /
-                (maxValue || 200),
+                (maxValue || 200)) - barMarginBottom,
           marginRight: spacing,
         },
         item.value < 0 && {
@@ -391,7 +396,8 @@ const RenderBars = (props: Props) => {
             animationDuration={animationDuration || 800}
             height={
               (Math.abs(item.value) * (containerHeight || 200)) /
-              (maxValue || 200)
+                (maxValue || 200) -
+              barMarginBottom
             }
             intactTopLabel={props.intactTopLabel}
             horizontal={props.horizontal}
@@ -423,7 +429,8 @@ const RenderBars = (props: Props) => {
             intactTopLabel={props.intactTopLabel}
             height={
               (Math.abs(item.value) * (containerHeight || 200)) /
-              (maxValue || 200)
+                (maxValue || 200) -
+              barMarginBottom
             }
             value={item.value}
           />
@@ -447,6 +454,7 @@ const RenderBars = (props: Props) => {
               (Math.abs(item.value) * (containerHeight || 200)) /
               (maxValue || 200)
             }
+            barMarginBottom={barMarginBottom}
             cappedBars={props.cappedBars}
             capThickness={props.capThickness}
             capColor={props.capColor}
@@ -477,6 +485,7 @@ const RenderBars = (props: Props) => {
             (Math.abs(item.value) * (containerHeight || 200)) /
             (maxValue || 200)
           }
+          barMarginBottom={barMarginBottom}
           cappedBars={props.cappedBars}
           capThickness={props.capThickness}
           capColor={props.capColor}
@@ -505,6 +514,7 @@ const RenderBars = (props: Props) => {
             (Math.abs(item.value) * (containerHeight || 200)) /
             (maxValue || 200)
           }
+          barMarginBottom={barMarginBottom}
           cappedBars={props.cappedBars}
           capThickness={props.capThickness}
           capColor={props.capColor}

package/src/BarChart/index.tsx

@@ -127,6 +127,7 @@ type PropTypes = {
   labelsExtraHeight?: number;
   barBackgroundPattern?: Function;
   patternId?: String;
+  barMarginBottom?: number;
 };
 type lineConfigType = {
   initialSpacing?: number;
@@ -1269,6 +1270,7 @@ export const BarChart = (props: PropTypes) => {
                   autoShiftLabels={autoShiftLabels}
                   barBackgroundPattern={props.barBackgroundPattern}
                   patternId={props.patternId}
+                  barMarginBottom={props.barMarginBottom}
                 />
               ))}
         </Fragment>

package/src/LineChart/index.tsx

@@ -304,6 +304,9 @@ type itemType = {
   verticalLineUptoDataPoint?: Boolean;
   verticalLineColor?: string;
   verticalLineThickness?: number;
+  pointerShiftX?: number;
+  pointerShiftY?: number;
+  onPress?: Function;
 };
 
 type sectionType = {
@@ -332,7 +335,10 @@ export const LineChart = (props: propTypes) => {
   const scrollRef = useRef();
   const [pointerX, setPointerX] = useState(0);
   const [pointerY, setPointerY] = useState(0);
-  const [pointerItem, setPointerItem] = useState({});
+  const [pointerItem, setPointerItem] = useState({
+    pointerShiftX: 0,
+    pointerShiftY: 0,
+  });
   const [points, setPoints] = useState('');
   const [points2, setPoints2] = useState('');
   const [points3, setPoints3] = useState('');
@@ -408,6 +414,63 @@ export const LineChart = (props: propTypes) => {
     newFillPoints = '';
   let counter = 0;
 
+  const initialSpacing =
+    props.initialSpacing === 0 ? 0 : props.initialSpacing || 40;
+  const thickness = props.thickness || 2;
+
+  const spacing = props.spacing === 0 ? 0 : props.spacing || 60;
+
+  const xAxisThickness = props.xAxisThickness || 1;
+  const dataPointsHeight1 =
+    props.dataPointsHeight1 || props.dataPointsHeight || 2;
+  const dataPointsWidth1 = props.dataPointsWidth1 || props.dataPointsWidth || 2;
+  const dataPointsRadius1 =
+    props.dataPointsRadius1 || props.dataPointsRadius || 3;
+  const dataPointsColor1 =
+    props.dataPointsColor1 || props.dataPointsColor || 'black';
+  const dataPointsShape1 =
+    props.dataPointsShape1 || props.dataPointsShape || 'circular';
+
+  const dataPointsHeight2 =
+    props.dataPointsHeight2 || props.dataPointsHeight || 2;
+  const dataPointsWidth2 = props.dataPointsWidth2 || props.dataPointsWidth || 2;
+  const dataPointsRadius2 =
+    props.dataPointsRadius2 || props.dataPointsRadius || 3;
+  const dataPointsColor2 =
+    props.dataPointsColor2 || props.dataPointsColor || 'blue';
+  const dataPointsShape2 =
+    props.dataPointsShape2 || props.dataPointsShape || 'circular';
+
+  const dataPointsHeight3 =
+    props.dataPointsHeight3 || props.dataPointsHeight || 2;
+  const dataPointsWidth3 = props.dataPointsWidth3 || props.dataPointsWidth || 2;
+  const dataPointsRadius3 =
+    props.dataPointsRadius3 || props.dataPointsRadius || 3;
+  const dataPointsColor3 =
+    props.dataPointsColor3 || props.dataPointsColor || 'red';
+  const dataPointsShape3 =
+    props.dataPointsShape3 || props.dataPointsShape || 'circular';
+
+  const dataPointsHeight4 =
+    props.dataPointsHeight4 || props.dataPointsHeight || 2;
+  const dataPointsWidth4 = props.dataPointsWidth4 || props.dataPointsWidth || 2;
+  const dataPointsRadius4 =
+    props.dataPointsRadius4 || props.dataPointsRadius || 3;
+  const dataPointsColor4 =
+    props.dataPointsColor4 || props.dataPointsColor || 'red';
+  const dataPointsShape4 =
+    props.dataPointsShape4 || props.dataPointsShape || 'circular';
+
+  const dataPointsHeight5 =
+    props.dataPointsHeight5 || props.dataPointsHeight || 2;
+  const dataPointsWidth5 = props.dataPointsWidth5 || props.dataPointsWidth || 2;
+  const dataPointsRadius5 =
+    props.dataPointsRadius5 || props.dataPointsRadius || 3;
+  const dataPointsColor5 =
+    props.dataPointsColor5 || props.dataPointsColor || 'red';
+  const dataPointsShape5 =
+    props.dataPointsShape5 || props.dataPointsShape || 'circular';
+
   if (animateOnDataChange) {
     animations.forEach((item, index) => {
       item.addListener(val => {
@@ -548,56 +611,6 @@ export const LineChart = (props: propTypes) => {
   }, [animationDuration, widthValue5]);
 
   const areaChart = props.areaChart || false;
-  const dataPointsHeight1 =
-    props.dataPointsHeight1 || props.dataPointsHeight || 2;
-  const dataPointsWidth1 = props.dataPointsWidth1 || props.dataPointsWidth || 2;
-  const dataPointsRadius1 =
-    props.dataPointsRadius1 || props.dataPointsRadius || 3;
-  const dataPointsColor1 =
-    props.dataPointsColor1 || props.dataPointsColor || 'black';
-  const dataPointsShape1 =
-    props.dataPointsShape1 || props.dataPointsShape || 'circular';
-
-  const dataPointsHeight2 =
-    props.dataPointsHeight2 || props.dataPointsHeight || 2;
-  const dataPointsWidth2 = props.dataPointsWidth2 || props.dataPointsWidth || 2;
-  const dataPointsRadius2 =
-    props.dataPointsRadius2 || props.dataPointsRadius || 3;
-  const dataPointsColor2 =
-    props.dataPointsColor2 || props.dataPointsColor || 'blue';
-  const dataPointsShape2 =
-    props.dataPointsShape2 || props.dataPointsShape || 'circular';
-
-  const dataPointsHeight3 =
-    props.dataPointsHeight3 || props.dataPointsHeight || 2;
-  const dataPointsWidth3 = props.dataPointsWidth3 || props.dataPointsWidth || 2;
-  const dataPointsRadius3 =
-    props.dataPointsRadius3 || props.dataPointsRadius || 3;
-  const dataPointsColor3 =
-    props.dataPointsColor3 || props.dataPointsColor || 'red';
-  const dataPointsShape3 =
-    props.dataPointsShape3 || props.dataPointsShape || 'circular';
-
-  const dataPointsHeight4 =
-    props.dataPointsHeight4 || props.dataPointsHeight || 2;
-  const dataPointsWidth4 = props.dataPointsWidth4 || props.dataPointsWidth || 2;
-  const dataPointsRadius4 =
-    props.dataPointsRadius4 || props.dataPointsRadius || 3;
-  const dataPointsColor4 =
-    props.dataPointsColor4 || props.dataPointsColor || 'red';
-  const dataPointsShape4 =
-    props.dataPointsShape4 || props.dataPointsShape || 'circular';
-
-  const dataPointsHeight5 =
-    props.dataPointsHeight5 || props.dataPointsHeight || 2;
-  const dataPointsWidth5 = props.dataPointsWidth5 || props.dataPointsWidth || 2;
-  const dataPointsRadius5 =
-    props.dataPointsRadius5 || props.dataPointsRadius || 3;
-  const dataPointsColor5 =
-    props.dataPointsColor5 || props.dataPointsColor || 'red';
-  const dataPointsShape5 =
-    props.dataPointsShape5 || props.dataPointsShape || 'circular';
-
   const textFontSize1 = props.textFontSize1 || props.textFontSize || 10;
   const textFontSize2 = props.textFontSize2 || props.textFontSize || 10;
   const textFontSize3 = props.textFontSize3 || props.textFontSize || 10;
@@ -608,13 +621,6 @@ export const LineChart = (props: propTypes) => {
   const textColor3 = props.textColor3 || props.textColor || 'gray';
   const textColor4 = props.textColor4 || props.textColor || 'gray';
   const textColor5 = props.textColor5 || props.textColor || 'gray';
-  const initialSpacing =
-    props.initialSpacing === 0 ? 0 : props.initialSpacing || 40;
-  const thickness = props.thickness || 2;
-
-  const spacing = props.spacing === 0 ? 0 : props.spacing || 60;
-
-  const xAxisThickness = props.xAxisThickness || 1;
   const xAxisColor = props.xAxisColor || 'black';
 
   let totalWidth = initialSpacing;
@@ -1936,6 +1942,9 @@ export const LineChart = (props: propTypes) => {
                         : 'none'
                       : dataPointsColor
                   }
+                  onPress={() => {
+                    item.onPress ? item.onPress(item, index) : null;
+                  }}
                 />
               )}
             </Fragment>
@@ -1957,6 +1966,9 @@ export const LineChart = (props: propTypes) => {
                         : 'none'
                       : dataPointsColor
                   }
+                  onPress={() => {
+                    item.onPress ? item.onPress(item, index) : null;
+                  }}
                 />
               )}
             </Fragment>
@@ -2054,14 +2066,22 @@ export const LineChart = (props: propTypes) => {
       <View
         style={{
           position: 'absolute',
-          height: pointerHeight || pointerRadius * 2,
-          width: pointerWidth || pointerRadius * 2,
-          backgroundColor: pointerColor,
-          borderRadius: pointerRadius || 0,
-          left: pointerX,
+          left: pointerX + (pointerItem.pointerShiftX || 0),
           top: pointerY,
         }}>
-        {pointerComponent ? pointerComponent() : null}
+        {pointerComponent ? (
+          pointerComponent()
+        ) : (
+          <View
+            style={{
+              height: pointerHeight || pointerRadius * 2,
+              width: pointerWidth || pointerRadius * 2,
+              marginTop: pointerItem.pointerShiftY || 0,
+              backgroundColor: pointerColor,
+              borderRadius: pointerRadius || 0,
+            }}
+          />
+        )}
         {showPointerStrip && (
           <View
             style={{
@@ -2124,7 +2144,7 @@ export const LineChart = (props: propTypes) => {
         onResponderGrant={evt => {
           if (!pointerConfig) return;
           let x = evt.nativeEvent.locationX;
-          let factor = x / (initialSpacing + spacing);
+          let factor = (x - initialSpacing) / spacing;
           factor = Math.round(factor);
           factor = Math.min(factor, data.length - 1);
           factor = Math.max(factor, 0);
@@ -2146,7 +2166,7 @@ export const LineChart = (props: propTypes) => {
         onResponderMove={evt => {
           if (!pointerConfig) return;
           let x = evt.nativeEvent.locationX;
-          let factor = x / (initialSpacing + spacing);
+          let factor = (x - initialSpacing) / spacing;
           factor = Math.round(factor);
           factor = Math.min(factor, data.length - 1);
           factor = Math.max(factor, 0);
@@ -2331,7 +2351,7 @@ export const LineChart = (props: propTypes) => {
         onResponderGrant={evt => {
           if (!pointerConfig) return;
           let x = evt.nativeEvent.locationX;
-          let factor = x / (initialSpacing + spacing);
+          let factor = (x - initialSpacing) / spacing;
           factor = Math.round(factor);
           factor = Math.min(factor, data.length - 1);
           factor = Math.max(factor, 0);
@@ -2353,7 +2373,7 @@ export const LineChart = (props: propTypes) => {
         onResponderMove={evt => {
           if (!pointerConfig) return;
           let x = evt.nativeEvent.locationX;
-          let factor = x / (initialSpacing + spacing);
+          let factor = (x - initialSpacing) / spacing;
           factor = Math.round(factor);
           factor = Math.min(factor, data.length - 1);
           factor = Math.max(factor, 0);

package/src/todos.md

@@ -1,8 +1,7 @@
 ## Feature requests
 
 1. OnPress function on Pie Chart https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/111
-2. Scroll through data points instead of justing clicking on them https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/116
-3. Bottom margin between bar and x axis https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/126
+2. Bottom margin between bar and x axis https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/126
 
 ## To-dos in documentation-
 
@@ -11,3 +10,4 @@
 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