Added onPress as a prop to Bar Chart and passed item and index as parameters

This commit is contained in:
Abhinandan-Kushwaha 2022-04-25 00:36:47 +05:30
parent 493c0cf8bf
commit 33818b9783
5 changed files with 13 additions and 3 deletions

View File

@ -9,6 +9,7 @@
| data | Array of items | An item object represents a bar in the bar chart. It is described in the next table. | \_ | | data | Array of items | An item object represents a bar in the bar chart. It is described in the next table. | \_ |
| width | number | Width of the Bar chart | width of the parent | | width | number | Width of the Bar chart | width of the parent |
| height | number | Height of the Bar chart (excluding the bottom label) | 200 | | height | number | Height of the Bar chart (excluding the bottom label) | 200 |
| onPress | Function | Callback function called on press of a Bar (takes item and index as parameter) | null |
| maxValue | number | Maximum value shown in the Y axis | 200 | | maxValue | number | Maximum value shown in the Y axis | 200 |
| minValue | number | Minimum negative value shown in the Y axis (to be used only if the data set has negative values too) | \_ | | minValue | number | Minimum negative value shown in the Y axis (to be used only if the data set has negative values too) | \_ |
| noOfSections | number | Number of sections in the Y axis | 10 | | noOfSections | number | Number of sections in the Y axis | 10 |

View File

@ -1,6 +1,6 @@
{ {
"name": "react-native-gifted-charts", "name": "react-native-gifted-charts",
"version": "1.2.6", "version": "1.2.7",
"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.", "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", "main": "src/index.tsx",
"files": [ "files": [

View File

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

View File

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

View File

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