react-native-gifted-charts 1.2.5 → 1.2.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-charts",
-  "version": "1.2.5",
+  "version": "1.2.8",
   "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;
@@ -845,7 +846,9 @@ export const BarChart = (props: PropTypes) => {
           props.hideAxesAndRules !== true &&
             !hideYAxisText &&
             horizSectionsBelow.map((sectionItems, index) => {
-              let label = getLabel(sectionItems.value);
+              let label = getLabel(
+                horizSectionsBelow[horizSectionsBelow.length - 1 - index].value,
+              );
               return (
                 <View
                   key={index}
@@ -1456,6 +1459,7 @@ export const BarChart = (props: PropTypes) => {
                   labelTextStyle={
                     item.labelTextStyle || props.xAxisLabelTextStyle
                   }
+                  onPress={props.onPress}
                 />
               ))}
         </Fragment>

package/src/LineChart/index.tsx

@@ -819,7 +819,7 @@ export const LineChart = (props: propTypes) => {
           ppp4 = '',
           ppp5 = '';
 
-        if (!animateOnDataChange) {
+        if (data.length && !animateOnDataChange) {
           ppp =
             'L' +
             (initialSpacing - dataPointsWidth1 / 2) +
@@ -1007,35 +1007,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 +1242,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;
@@ -1866,7 +1880,9 @@ export const LineChart = (props: propTypes) => {
           props.hideAxesAndRules !== true &&
             !hideYAxisText &&
             horizSectionsBelow.map((sectionItems, index) => {
-              let label = getLabel(sectionItems.value);
+              let label = getLabel(
+                horizSectionsBelow[horizSectionsBelow.length - 1 - index].value,
+              );
               return (
                 <View
                   key={index}

package/src/PieChart/index.tsx

@@ -1,6 +1,14 @@
 import React from 'react';
 import {ColorValue, View} from 'react-native';
-import Svg, {Path, Circle, Text as SvgText, FontStyle} from 'react-native-svg';
+import Svg, {
+  Path,
+  Circle,
+  Text as SvgText,
+  FontStyle,
+  Defs,
+  RadialGradient,
+  Stop,
+} from 'react-native-svg';
 
 type propTypes = {
   radius?: number;
@@ -36,12 +44,17 @@ type propTypes = {
   tiltAngle?: string;
   initialAngle?: number;
   labelsPosition?: 'onBorder' | 'outward' | 'inward' | 'mid';
+  showGradient?: boolean;
+  gradientCenterColor?: string;
+  onPress?: Function;
+  onLabelPress?: Function;
 };
 type itemType = {
   value: number;
   shiftX?: number;
   shiftY?: number;
   color?: string;
+  gradientCenterColor?: string;
   text?: string;
   textColor?: string;
   textSize?: number;
@@ -53,6 +66,8 @@ type itemType = {
   shiftTextX?: number;
   shiftTextY?: number;
   labelPosition?: 'onBorder' | 'outward' | 'inward' | 'mid';
+  onPress?: Function;
+  onLabelPress?: Function;
 };
 
 export const PieChart = (props: propTypes) => {
@@ -102,6 +117,8 @@ export const PieChart = (props: propTypes) => {
   const showTextBackground = props.showTextBackground || false;
   const textBackgroundColor = props.textBackgroundColor || 'white';
   const showValuesAsLabels = props.showValuesAsLabels || false;
+  const showGradient = props.showGradient || false;
+  const gradientCenterColor = props.gradientCenterColor || 'white';
 
   const colors = [
     'cyan',
@@ -186,8 +203,34 @@ export const PieChart = (props: propTypes) => {
         }`}
         height={radius * 2 + strokeWidth}
         width={radius * 2 + strokeWidth}>
+        <Defs>
+          {data.map((item, index) => {
+            return (
+              <RadialGradient
+                id={'grad' + index}
+                cx="50%"
+                cy="50%"
+                rx="50%"
+                ry="50%"
+                fx="50%"
+                fy="50%"
+                gradientUnits="userSpaceOnUse">
+                <Stop
+                  offset="0%"
+                  stopColor={item.gradientCenterColor || gradientCenterColor}
+                  stopOpacity="1"
+                />
+                <Stop
+                  offset="100%"
+                  stopColor={item.color || colors[index % 9]}
+                  stopOpacity="1"
+                />
+              </RadialGradient>
+            );
+          })}
+        </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];
@@ -219,14 +262,24 @@ export const PieChart = (props: propTypes) => {
               }`}
               stroke={strokeColor}
               strokeWidth={strokeWidth}
-              fill={item.color || colors[index % 9]}
+              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) => {
-
             let mx = cx * (1 + Math.sin(2 * pi * mData[index] + initialAngle));
             let my = cy * (1 - Math.cos(2 * pi * mData[index] + initialAngle));
 
@@ -270,6 +323,17 @@ export const PieChart = (props: propTypes) => {
                       textSize
                     }
                     fill={item.textBackgroundColor || textBackgroundColor}
+                    onPress={() => {
+                      item.onLabelPress
+                        ? item.onLabelPress()
+                        : props.onLabelPress
+                        ? props.onLabelPress(item, index)
+                        : item.onPress
+                        ? item.onPress()
+                        : props.onPress
+                        ? props.onPress(item, index)
+                        : null;
+                    }}
                   />
                 )}
                 <SvgText
@@ -283,7 +347,18 @@ export const PieChart = (props: propTypes) => {
                     (item.shiftTextX || 0) -
                     (item.textSize || textSize) / 1.8
                   }
-                  y={y + (item.shiftTextY || 0)}>
+                  y={y + (item.shiftTextY || 0)}
+                  onPress={() => {
+                    item.onLabelPress
+                      ? item.onLabelPress()
+                      : props.onLabelPress
+                      ? props.onLabelPress(item, index)
+                      : item.onPress
+                      ? item.onPress()
+                      : props.onPress
+                      ? props.onPress(item, index)
+                      : null;
+                  }}>
                   {item.text || (showValuesAsLabels ? item.value + '' : '')}
                 </SvgText>
               </>

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-