react-native-gifted-charts 1.2.34 → 1.2.37

package/package.json

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

@@ -17,6 +17,7 @@ if (Platform.OS === 'android') {
 type propTypes = {
   item: itemType;
   height: number;
+  minHeight: number;
   opacity?: number;
   animationDuration: number;
   roundedTop: Boolean;
@@ -119,8 +120,11 @@ const Animated2DWithGradient = (props: propTypes) => {
             width: '100%',
             height:
               (noAnimation
-                ? (Math.abs(item.value) * (containerHeight || 200)) /
-                  (maxValue || 200)
+                ? Math.max(
+                    props.minHeight,
+                    (Math.abs(item.value) * (containerHeight || 200)) /
+                      (maxValue || 200),
+                  )
                 : height) - (barMarginBottom || 0),
           }}>
           <View
@@ -128,8 +132,11 @@ const Animated2DWithGradient = (props: propTypes) => {
               width: '100%',
               height:
                 (noAnimation
-                  ? (Math.abs(item.value) * (containerHeight || 200)) /
-                    (maxValue || 200)
+                  ? Math.max(
+                      props.minHeight,
+                      (Math.abs(item.value) * (containerHeight || 200)) /
+                        (maxValue || 200),
+                    )
                   : height) - (barMarginBottom || 0),
             }}>
             {noGradient ? (

package/src/BarChart/RenderBars.tsx

@@ -11,6 +11,7 @@ type Props = {
   style?: any;
   width?: number;
   height?: number;
+  minHeight?: number;
   color?: ColorValue;
   showGradient?: Boolean;
   gradientColor?: any;
@@ -63,6 +64,7 @@ type Props = {
   onPress?: Function;
   xAxisTextNumberOfLines: number;
   renderTooltip: Function;
+  leftShiftForLastIndexTooltip: number;
   initialSpacing: number;
   selectedIndex: number;
   setSelectedIndex: Function;
@@ -100,6 +102,7 @@ const RenderBars = (props: Props) => {
     index,
     containerHeight,
     maxValue,
+    minHeight,
     spacing,
     propSpacing,
     side,
@@ -117,6 +120,7 @@ const RenderBars = (props: Props) => {
     labelTextStyle,
     xAxisTextNumberOfLines,
     renderTooltip,
+    leftShiftForLastIndexTooltip,
     initialSpacing,
     selectedIndex,
     setSelectedIndex,
@@ -324,12 +328,14 @@ const RenderBars = (props: Props) => {
     );
   };
 
-  const barHeight =
+  const barHeight = Math.max(
+    minHeight,
     (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)) -
-    barMarginBottom;
+      barMarginBottom,
+  );
 
   let leftSpacing = initialSpacing;
   for (let i = 0; i < index; i++) {
@@ -424,11 +430,12 @@ const RenderBars = (props: Props) => {
               topLabelComponent={item.topLabelComponent}
               opacity={opacity || 1}
               animationDuration={animationDuration || 800}
-              height={
+              height={Math.max(
+                minHeight,
                 (Math.abs(item.value) * (containerHeight || 200)) /
                   (maxValue || 200) -
-                barMarginBottom
-              }
+                  barMarginBottom,
+              )}
               intactTopLabel={props.intactTopLabel}
               horizontal={props.horizontal}
             />
@@ -457,11 +464,12 @@ const RenderBars = (props: Props) => {
               opacity={opacity || 1}
               horizontal={props.horizontal}
               intactTopLabel={props.intactTopLabel}
-              height={
+              height={Math.max(
+                minHeight,
                 (Math.abs(item.value) * (containerHeight || 200)) /
                   (maxValue || 200) -
-                barMarginBottom
-              }
+                  barMarginBottom,
+              )}
               value={item.value}
             />
           )
@@ -480,10 +488,12 @@ const RenderBars = (props: Props) => {
               frontColor={props.frontColor || 'black'}
               containerHeight={containerHeight}
               maxValue={maxValue}
-              height={
+              height={Math.max(
+                minHeight,
                 (Math.abs(item.value) * (containerHeight || 200)) /
-                (maxValue || 200)
-              }
+                  (maxValue || 200),
+              )}
+              minHeight={minHeight}
               barMarginBottom={barMarginBottom}
               cappedBars={props.cappedBars}
               capThickness={props.capThickness}
@@ -511,10 +521,12 @@ const RenderBars = (props: Props) => {
             frontColor={props.frontColor || 'black'}
             containerHeight={containerHeight}
             maxValue={maxValue}
-            height={
+            height={Math.max(
+              minHeight,
               (Math.abs(item.value) * (containerHeight || 200)) /
-              (maxValue || 200)
-            }
+                (maxValue || 200),
+            )}
+            minHeight={minHeight}
             barMarginBottom={barMarginBottom}
             cappedBars={props.cappedBars}
             capThickness={props.capThickness}
@@ -540,10 +552,12 @@ const RenderBars = (props: Props) => {
             frontColor={props.frontColor || 'black'}
             containerHeight={containerHeight}
             maxValue={maxValue}
-            height={
+            height={Math.max(
+              minHeight,
               (Math.abs(item.value) * (containerHeight || 200)) /
-              (maxValue || 200)
-            }
+                (maxValue || 200),
+            )}
+            minHeight={minHeight}
             barMarginBottom={barMarginBottom}
             cappedBars={props.cappedBars}
             capThickness={props.capThickness}
@@ -563,7 +577,10 @@ const RenderBars = (props: Props) => {
           style={{
             position: 'absolute',
             bottom: barHeight + 60,
-            left: leftSpacing,
+            left:
+              index === data.length - 1
+                ? leftSpacing - leftShiftForLastIndexTooltip
+                : leftSpacing,
             zIndex: 1000,
           }}>
           {renderTooltip(item, index)}

package/src/BarChart/RenderStackBars.tsx

@@ -1,5 +1,6 @@
 import React, {Component} from 'react';
 import {View, TouchableOpacity, Text, ColorValue} from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
 import Svg, {Defs, Rect} from 'react-native-svg';
 import {Style} from 'util';
 
@@ -23,6 +24,7 @@ type Props = {
   propSpacing?: number;
   data?: any;
   barWidth?: number;
+  onPress?: Function;
 
   rotateLabel?: Boolean;
   showXAxisIndices: Boolean;
@@ -37,10 +39,13 @@ type Props = {
   patternId?: String;
   xAxisTextNumberOfLines: number;
   renderTooltip: Function;
+  leftShiftForLastIndexTooltip: number;
   initialSpacing: number;
   selectedIndex: number;
   setSelectedIndex: Function;
   activeOpacity: number;
+  showGradient?: Boolean;
+  gradientColor?: any;
   stackData: Array<itemType>;
 };
 type itemType = {
@@ -53,6 +58,9 @@ type itemType = {
   topLabelComponent?: Function;
   topLabelContainerStyle?: any;
   disablePress?: any;
+  color?: ColorValue;
+  showGradient?: Boolean;
+  gradientColor?: any;
   capThickness?: number;
   capColor?: ColorValue;
   capRadius?: number;
@@ -60,6 +68,7 @@ type itemType = {
   borderRadius?: number;
   stacks?: Array<any>;
   barBackgroundPattern?: Function;
+  barBorderRadius?: Number;
   patternId?: String;
 };
 const RenderStackBars = (props: Props) => {
@@ -78,11 +87,13 @@ const RenderStackBars = (props: Props) => {
     labelTextStyle,
     xAxisTextNumberOfLines,
     renderTooltip,
+    leftShiftForLastIndexTooltip,
     initialSpacing,
     selectedIndex,
     setSelectedIndex,
     activeOpacity,
     stackData,
+    data,
   } = props;
   let leftSpacing = initialSpacing;
   for (let i = 0; i < index; i++) {
@@ -137,7 +148,7 @@ const RenderStackBars = (props: Props) => {
     0,
   );
 
-  const static2DSimple = (item: itemType) => {
+  const static2DSimple = (item: itemType, index: number) => {
     const cotainsNegative = item.stacks.some(item => item.value < 0);
     return (
       <>
@@ -148,6 +159,8 @@ const RenderStackBars = (props: Props) => {
             setSelectedIndex(index);
             if (item.onPress) {
               item.onPress();
+            } else if (props.onPress) {
+              props.onPress(item, index);
             }
           }}
           style={[
@@ -179,7 +192,8 @@ const RenderStackBars = (props: Props) => {
                       (Math.abs(stackItem.value) * (containerHeight || 200)) /
                         (maxValue || 200) -
                       (stackItem.marginBottom || 0),
-                    backgroundColor: stackItem.color || 'black',
+                    backgroundColor:
+                      stackItem.color || item.color || props.color || 'black',
                     borderRadius:
                       stackItem.borderRadius || props.barBorderRadius || 0,
                   },
@@ -193,6 +207,33 @@ const RenderStackBars = (props: Props) => {
                         stackItem.borderBottomRightRadius || 0,
                     },
                 ]}>
+                {stackItem.showGradient ||
+                item.showGradient ||
+                props.showGradient ? (
+                  <LinearGradient
+                    style={[
+                      {
+                        position: 'absolute',
+                        width: '100%',
+                        height: '100%',
+                        borderRadius:
+                          stackItem.barBorderRadius ||
+                          item.barBorderRadius ||
+                          props.barBorderRadius ||
+                          0,
+                      },
+                    ]}
+                    start={{x: 0, y: 0}}
+                    end={{x: 0, y: 1}}
+                    colors={[
+                      stackItem.gradientColor ||
+                        item.gradientColor ||
+                        props.gradientColor ||
+                        'white',
+                      stackItem.color || item.color || props.color || 'black',
+                    ]}
+                  />
+                ) : null}
                 {stackItem.innerBarComponent && stackItem.innerBarComponent()}
               </TouchableOpacity>
             );
@@ -278,7 +319,7 @@ const RenderStackBars = (props: Props) => {
             }}
           />
         )}
-        {static2DSimple(item)}
+        {static2DSimple(item, index)}
         {renderLabel(label || '', labelTextStyle)}
       </View>
       {renderTooltip && selectedIndex === index && (
@@ -286,7 +327,10 @@ const RenderStackBars = (props: Props) => {
           style={{
             position: 'absolute',
             bottom: totalHeight + 60,
-            left: leftSpacing,
+            left:
+              index === data.length - 1
+                ? leftSpacing - leftShiftForLastIndexTooltip
+                : leftSpacing,
             zIndex: 1000,
           }}>
           {renderTooltip(item, index)}

package/src/BarChart/index.tsx

@@ -24,6 +24,7 @@ import Svg, {Circle, Path, Rect, Text as CanvasText} from 'react-native-svg';
 type PropTypes = {
   width?: number;
   height?: number;
+  minHeight?: number;
   noOfSections?: number;
   noOfSectionsBelowXAxis?: number;
   maxValue?: number;
@@ -113,6 +114,7 @@ type PropTypes = {
   disablePress?: boolean;
 
   frontColor?: ColorValue;
+  color?: ColorValue;
   sideColor?: ColorValue;
   topColor?: ColorValue;
   gradientColor?: ColorValue;
@@ -142,6 +144,7 @@ type PropTypes = {
   barMarginBottom?: number;
   onPress?: Function;
   renderTooltip?: Function;
+  leftShiftForLastIndexTooltip?: number;
 };
 type lineConfigType = {
   initialSpacing?: number;
@@ -1505,6 +1508,7 @@ export const BarChart = (props: PropTypes) => {
                     stackData={props.stackData}
                     item={item}
                     index={index}
+                    data={data}
                     containerHeight={containerHeight}
                     maxValue={maxValue}
                     spacing={item.spacing === 0 ? 0 : item.spacing || spacing}
@@ -1521,6 +1525,9 @@ export const BarChart = (props: PropTypes) => {
                     horizontal={horizontal}
                     intactTopLabel={intactTopLabel}
                     barBorderRadius={props.barBorderRadius}
+                    color={props.color}
+                    showGradient={props.showGradient}
+                    gradientColor={props.gradientColor}
                     barBackgroundPattern={props.barBackgroundPattern}
                     patternId={props.patternId}
                     label={
@@ -1532,8 +1539,12 @@ export const BarChart = (props: PropTypes) => {
                     labelTextStyle={
                       item.labelTextStyle || props.xAxisLabelTextStyle
                     }
+                    onPress={props.onPress}
                     xAxisTextNumberOfLines={xAxisTextNumberOfLines}
                     renderTooltip={props.renderTooltip}
+                    leftShiftForLastIndexTooltip={
+                      props.leftShiftForLastIndexTooltip || 0
+                    }
                     initialSpacing={initialSpacing}
                     selectedIndex={selectedIndex}
                     setSelectedIndex={setSelectedIndex}
@@ -1552,6 +1563,7 @@ export const BarChart = (props: PropTypes) => {
                   propSpacing={spacing}
                   side={side}
                   data={data}
+                  minHeight={props.minHeight || 0}
                   barWidth={props.barWidth}
                   sideWidth={props.sideWidth}
                   labelWidth={labelWidth}
@@ -1598,6 +1610,9 @@ export const BarChart = (props: PropTypes) => {
                   onPress={props.onPress}
                   xAxisTextNumberOfLines={xAxisTextNumberOfLines}
                   renderTooltip={props.renderTooltip}
+                  leftShiftForLastIndexTooltip={
+                    props.leftShiftForLastIndexTooltip || 0
+                  }
                   initialSpacing={initialSpacing}
                   selectedIndex={selectedIndex}
                   setSelectedIndex={setSelectedIndex}

package/src/Components/AnimatedBar/index.tsx

@@ -145,7 +145,7 @@ const AnimatedBar = (props: animatedBarPropTypes) => {
                 <View
                   style={{
                     width: width,
-                    height: (3 * width) / 4,
+                    height: width * 0.4,
                     // left: width / 2,
                     backgroundColor: topColor,
                     opacity: opacity,

package/src/Components/ThreeDBar/index.tsx

@@ -95,7 +95,7 @@ const ThreeDBar = (props: PropTypes) => {
             <View
               style={{
                 width: width,
-                height: (3 * width) / 4,
+                height: width * 0.4,
                 // left: width / -8,
                 backgroundColor: topColor,
                 opacity: opacity,

package/src/todos.md

@@ -1,6 +1,7 @@
 ## Features
 
 1. Fix the issue with pointers in Line/Area charts on Android https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/177
+2. Issue with eslint - tsc https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/222
 
 ## To-dos in documentation-
 
@@ -14,6 +15,7 @@
 8. Prepare a doc for xAxisLabelTexts and xAxisLabelTextStyle in Bar, Line And Area Charts
 9. Prepare a doc for vertical lines to explain noOfVerticalLines and verticalLinesSpacing props. https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/205
 10. Prepare a doc for negative marginBottom instead of marginTop for x axis labels. https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/190
+11. Prepare a doc for LineChartBicolor https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/221
 
 
 ## Architecture Enhancement