react-native-gifted-charts 1.2.6 → 1.2.9

package/package.json

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

@@ -63,6 +63,7 @@ type Props = {
   barBackgroundPattern?: Function;
   patternId?: String;
   barMarginBottom?: number;
+  onPress?: Function;
 };
 type itemType = {
   value?: number;
@@ -319,7 +320,13 @@ const RenderBars = (props: Props) => {
     <TouchableOpacity
       disabled={item.disablePress || props.disablePress}
       activeOpacity={props.activeOpacity || 0.2}
-      onPress={item.onPress}
+      onPress={() => {
+        item.onPress
+          ? item.onPress()
+          : props.onPress
+          ? props.onPress(item, index)
+          : null;
+      }}
       style={[
         {
           // overflow: 'visible',

package/src/BarChart/index.tsx

@@ -130,6 +130,7 @@ type PropTypes = {
   barBackgroundPattern?: Function;
   patternId?: String;
   barMarginBottom?: number;
+  onPress?: Function;
 };
 type lineConfigType = {
   initialSpacing?: number;
@@ -1458,6 +1459,7 @@ export const BarChart = (props: PropTypes) => {
                   labelTextStyle={
                     item.labelTextStyle || props.xAxisLabelTextStyle
                   }
+                  onPress={props.onPress}
                 />
               ))}
         </Fragment>

package/src/LineChart/index.tsx

@@ -22,6 +22,7 @@ import Svg, {
   Circle,
   Rect,
   Text as CanvasText,
+  Line,
 } from 'react-native-svg';
 import {svgPath, bezierCommand} from '../utils';
 import Rule from '../Components/lineSvg';
@@ -347,6 +348,7 @@ type Pointer = {
   hidePointer3?: boolean;
   hidePointer4?: boolean;
   hidePointer5?: boolean;
+  strokeDashArray?: Array<number>;
 };
 
 export const LineChart = (props: propTypes) => {
@@ -819,7 +821,7 @@ export const LineChart = (props: propTypes) => {
           ppp4 = '',
           ppp5 = '';
 
-        if (!animateOnDataChange) {
+        if (data.length && !animateOnDataChange) {
           ppp =
             'L' +
             (initialSpacing - dataPointsWidth1 / 2) +
@@ -1007,35 +1009,37 @@ export const LineChart = (props: propTypes) => {
 
       // console.log('xx---->>>', xx)
       if (areaChart) {
-        xx =
-          'M ' +
-          (initialSpacing - dataPointsWidth1 / 2) +
-          ',' +
-          (containerHeight + 10 - xAxisThickness) +
-          ' ' +
-          'L ' +
-          (initialSpacing - dataPointsWidth1 / 2) +
-          ',' +
-          (containerHeight +
-            10 -
-            (data[0].value * containerHeight) / maxValue) +
-          ' ' +
-          xx +
-          ' ' +
-          'L ' +
-          (initialSpacing -
-            dataPointsWidth1 / 2 +
-            spacing * (data.length - 1)) +
-          ',' +
-          (containerHeight + 10 - xAxisThickness) +
-          ' ' +
-          'L ' +
-          (initialSpacing - dataPointsWidth1 / 2) +
-          ',' +
-          (containerHeight + 10 - xAxisThickness) +
-          ' ';
-        setFillPoints(xx);
-        // console.log('xx later ---->>>', xx)
+        if (data.length) {
+          xx =
+            'M ' +
+            (initialSpacing - dataPointsWidth1 / 2) +
+            ',' +
+            (containerHeight + 10 - xAxisThickness) +
+            ' ' +
+            'L ' +
+            (initialSpacing - dataPointsWidth1 / 2) +
+            ',' +
+            (containerHeight +
+              10 -
+              (data[0].value * containerHeight) / maxValue) +
+            ' ' +
+            xx +
+            ' ' +
+            'L ' +
+            (initialSpacing -
+              dataPointsWidth1 / 2 +
+              spacing * (data.length - 1)) +
+            ',' +
+            (containerHeight + 10 - xAxisThickness) +
+            ' ' +
+            'L ' +
+            (initialSpacing - dataPointsWidth1 / 2) +
+            ',' +
+            (containerHeight + 10 - xAxisThickness) +
+            ' ';
+          setFillPoints(xx);
+          // console.log('xx later ---->>>', xx)
+        }
 
         if (data2.length) {
           xx2 =
@@ -1240,32 +1244,44 @@ export const LineChart = (props: propTypes) => {
   const startFillColor1 =
     props.startFillColor1 || props.startFillColor || 'gray';
   const endFillColor1 = props.endFillColor1 || props.endFillColor || 'white';
-  const startOpacity1 = props.startOpacity1 || props.startOpacity || 1;
-  const endOpacity1 = props.endOpacity1 || props.endOpacity || 1;
+  const startOpacity = props.startOpacity === 0 ? 0 : props.startOpacity || 1;
+  const endOpacity = props.endOpacity === 0 ? 0 : props.endOpacity || 1;
+  const startOpacity1 =
+    props.startOpacity1 === 0 ? 0 : props.startOpacity1 || startOpacity;
+  const endOpacity1 =
+    props.endOpacity1 === 0 ? 0 : props.endOpacity1 || endOpacity;
 
   const startFillColor2 =
     props.startFillColor2 || props.startFillColor || 'gray';
   const endFillColor2 = props.endFillColor2 || props.endFillColor || 'white';
-  const startOpacity2 = props.startOpacity2 || props.startOpacity || 1;
-  const endOpacity2 = props.endOpacity2 || props.endOpacity || 1;
+  const startOpacity2 =
+    props.startOpacity2 === 0 ? 0 : props.startOpacity2 || startOpacity;
+  const endOpacity2 =
+    props.endOpacity2 === 0 ? 0 : props.endOpacity2 || endOpacity;
 
   const startFillColor3 =
     props.startFillColor3 || props.startFillColor || 'gray';
   const endFillColor3 = props.endFillColor3 || props.endFillColor || 'white';
-  const startOpacity3 = props.startOpacity3 || props.startOpacity || 1;
-  const endOpacity3 = props.endOpacity3 || props.endOpacity || 1;
+  const startOpacity3 =
+    props.startOpacity3 === 0 ? 0 : props.startOpacity3 || startOpacity;
+  const endOpacity3 =
+    props.endOpacity3 === 0 ? 0 : props.endOpacity3 || endOpacity;
 
   const startFillColor4 =
     props.startFillColor4 || props.startFillColor || 'gray';
   const endFillColor4 = props.endFillColor4 || props.endFillColor || 'white';
-  const startOpacity4 = props.startOpacity4 || props.startOpacity || 1;
-  const endOpacity4 = props.endOpacity4 || props.endOpacity || 1;
+  const startOpacity4 =
+    props.startOpacity4 === 0 ? 0 : props.startOpacity4 || startOpacity;
+  const endOpacity4 =
+    props.endOpacity4 === 0 ? 0 : props.endOpacity4 || endOpacity;
 
   const startFillColor5 =
     props.startFillColor5 || props.startFillColor || 'gray';
   const endFillColor5 = props.endFillColor5 || props.endFillColor || 'white';
-  const startOpacity5 = props.startOpacity5 || props.startOpacity || 1;
-  const endOpacity5 = props.endOpacity5 || props.endOpacity || 1;
+  const startOpacity5 =
+    props.startOpacity5 === 0 ? 0 : props.startOpacity5 || startOpacity;
+  const endOpacity5 =
+    props.endOpacity5 === 0 ? 0 : props.endOpacity5 || endOpacity;
 
   const rulesThickness =
     props.rulesThickness === 0 ? 0 : props.rulesThickness || 1;
@@ -2385,24 +2401,77 @@ export const LineChart = (props: propTypes) => {
             }}
           />
         )}
+      </View>
+    );
+  };
+
+  const renderStripAndLabel = () => {
+    let pointerItemLocal, pointerYLocal;
+
+    pointerItemLocal = [pointerItem];
+    let arr = [pointerY];
+    if (pointerY2 !== 0) {
+      arr.push(pointerY2);
+      pointerItemLocal.push(pointerItem2);
+    }
+    if (pointerY3 !== 0) {
+      arr.push(pointerY3);
+      pointerItemLocal.push(pointerItem3);
+    }
+    if (pointerY4 !== 0) {
+      arr.push(pointerY4);
+      pointerItemLocal.push(pointerItem4);
+    }
+    if (pointerY5 !== 0) {
+      arr.push(pointerY5);
+      pointerItemLocal.push(pointerItem5);
+    }
+    pointerYLocal = Math.min(...arr);
+
+    return (
+      <View
+        style={{
+          position: 'absolute',
+          left: pointerX + (pointerItemLocal[0].pointerShiftX || 0),
+          top: pointerYLocal,
+        }}>
         {showPointerStrip && (
           <View
             style={{
               position: 'absolute',
-              left: pointerRadius || pointerWidth / 2,
+              left: (pointerRadius || pointerWidth) - pointerStripWidth / 4,
               top: pointerStripUptoDataPoint
                 ? pointerRadius || pointerStripHeight / 2
                 : -pointerYLocal + 8,
+              width: pointerStripWidth,
               height: pointerStripUptoDataPoint
-                ? containerHeight - pointerYLocal - 10
+                ? containerHeight - pointerYLocal + 5 - xAxisThickness
                 : pointerStripHeight,
-              width: pointerStripWidth,
-              backgroundColor: pointerStripColor,
               marginTop: pointerStripUptoDataPoint
                 ? 0
                 : containerHeight - pointerStripHeight,
-            }}
-          />
+            }}>
+            <Svg>
+              <Line
+                stroke={pointerStripColor}
+                strokeWidth={pointerStripWidth}
+                strokeDasharray={
+                  pointerConfig.strokeDashArray
+                    ? pointerConfig.strokeDashArray
+                    : ''
+                }
+                x1={0}
+                y1={0}
+                x2={0}
+                // strokeLinecap="round"
+                y2={
+                  pointerStripUptoDataPoint
+                    ? containerHeight - pointerYLocal + 5 - xAxisThickness
+                    : pointerStripHeight
+                }
+              />
+            </Svg>
+          </View>
         )}
 
         {pointerLabelComponent && (
@@ -2769,7 +2838,6 @@ export const LineChart = (props: propTypes) => {
           endOpacity,
           strokeDashArray,
         )}
-        {pointerX ? renderPointer(lineNumber) : null}
       </View>
     );
   };
@@ -2971,7 +3039,6 @@ export const LineChart = (props: propTypes) => {
           endOpacity,
           strokeDashArray,
         )}
-        {pointerX ? renderPointer(lineNumber) : null}
       </Animated.View>
     );
   };
@@ -3206,6 +3273,24 @@ export const LineChart = (props: propTypes) => {
                 strokeDashArray5,
               )
           : null}
+        {pointerX ? (
+          <View
+            style={{
+              position: 'absolute',
+              height:
+                containerHeight + 10 + horizSectionsBelow.length * stepHeight,
+              bottom: 60 + labelsExtraHeight,
+              width: totalWidth,
+              zIndex: 20,
+            }}>
+            {renderPointer(1)}
+            {points2 ? renderPointer(2) : null}
+            {points3 ? renderPointer(3) : null}
+            {points4 ? renderPointer(4) : null}
+            {points5 ? renderPointer(5) : null}
+            {renderStripAndLabel()}
+          </View>
+        ) : null}
         {data.map((item: itemType, index: number) => {
           // console.log('item', item)
           return (

package/src/PieChart/index.tsx

@@ -230,7 +230,7 @@ export const PieChart = (props: propTypes) => {
           })}
         </Defs>
         {data.map((item, index) => {
-          console.log('index', index);
+          // console.log('index', index);
           let nextItem;
           if (index === pData.length - 1) nextItem = pData[0];
           else nextItem = pData[index + 1];

package/src/todos.md

@@ -1,6 +1,6 @@
 ## Feature requests
 
-1. OnPress function on Pie Chart https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/111
+None at the moment!
 
 ## To-dos in documentation-