status-im
/
react-native-gifted-charts
mirror of https://github.com/status-im/react-native-gifted-charts.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Added leftShiftForTooltip to Bar and stack charts

This commit is contained in:
Abhinandan-Kushwaha 2022-07-01 14:01:06 +05:30
parent 621d19c70b
commit 37b4f5b65c
5 changed files with 17 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/BarChart/BarChartProps.md
View File

@ -30,6 +30,7 @@
| scrollAnimation | Boolean | When set to true, scroll animation is visible when the chart automatically scrolls to the rightmost bar | true |
| initialSpacing | number | distance of the first bar from the Y axis | 40 |
| renderTooltip | Function | tooltip component appearing above the bar when it is pressed, takes item and index as parameters | null |
| leftShiftForTooltip | number | The distance by which the tooltip component should shift towards left | 0 |
| leftShiftForLastIndexTooltip | number | The distance by which the tooltip component of the last bar should shift towards left | 0 |
---
@ -109,6 +110,7 @@ The properties of this line chart can be controlled using the `lineConfig` prop
| spacing | number | Distance of the next Bar from the currennt Bar |
| barBackgroundPattern | Component | A svg component containing the background pattern for bars |
| patternId | String | ID of the pattern component |
| leftShiftForTooltip | number | The distance by which the tooltip component should shift towards left |
---

2
package.json
View File

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

6
src/BarChart/RenderBars.tsx
View File

@ -64,6 +64,7 @@ type Props = {
onPress?: Function;
xAxisTextNumberOfLines: number;
renderTooltip: Function;
leftShiftForTooltip?: number;
leftShiftForLastIndexTooltip: number;
initialSpacing: number;
selectedIndex: number;
@ -95,6 +96,7 @@ type itemType = {
barBackgroundPattern?: Function;
patternId?: String;
barMarginBottom?: number;
leftShiftForTooltip?: number;
};
const RenderBars = (props: Props) => {
const {
@ -120,6 +122,7 @@ const RenderBars = (props: Props) => {
labelTextStyle,
xAxisTextNumberOfLines,
renderTooltip,
leftShiftForTooltip,
leftShiftForLastIndexTooltip,
initialSpacing,
selectedIndex,
@ -580,7 +583,8 @@ const RenderBars = (props: Props) => {
left:
index === data.length - 1
? leftSpacing - leftShiftForLastIndexTooltip
: leftSpacing,
: leftSpacing -
(item.leftShiftForTooltip ?? leftShiftForTooltip),
zIndex: 1000,
}}>
{renderTooltip(item, index)}

9
src/BarChart/RenderStackBars.tsx
View File

@ -39,6 +39,7 @@ type Props = {
patternId?: String;
xAxisTextNumberOfLines: number;
renderTooltip: Function;
leftShiftForTooltip?: number;
leftShiftForLastIndexTooltip: number;
initialSpacing: number;
selectedIndex: number;
@ -70,6 +71,7 @@ type itemType = {
barBackgroundPattern?: Function;
barBorderRadius?: Number;
patternId?: String;
leftShiftForTooltip?: number;
};
const RenderStackBars = (props: Props) => {
const {
@ -87,13 +89,13 @@ const RenderStackBars = (props: Props) => {
labelTextStyle,
xAxisTextNumberOfLines,
renderTooltip,
leftShiftForTooltip,
leftShiftForLastIndexTooltip,
initialSpacing,
selectedIndex,
setSelectedIndex,
activeOpacity,
stackData,
data,
} = props;
let leftSpacing = initialSpacing;
for (let i = 0; i < index; i++) {
@ -328,9 +330,10 @@ const RenderStackBars = (props: Props) => {
position: 'absolute',
bottom: totalHeight + 60,
left:
index === data.length - 1
index === stackData.length - 1
? leftSpacing - leftShiftForLastIndexTooltip
: leftSpacing,
: leftSpacing -
(item.leftShiftForTooltip ?? leftShiftForTooltip),
zIndex: 1000,
}}>
{renderTooltip(item, index)}

3
src/BarChart/index.tsx
View File

@ -144,6 +144,7 @@ type PropTypes = {
barMarginBottom?: number;
onPress?: Function;
renderTooltip?: Function;
leftShiftForTooltip?: number;
leftShiftForLastIndexTooltip?: number;
};
type lineConfigType = {
@ -1542,6 +1543,7 @@ export const BarChart = (props: PropTypes) => {
onPress={props.onPress}
xAxisTextNumberOfLines={xAxisTextNumberOfLines}
renderTooltip={props.renderTooltip}
leftShiftForTooltip={props.leftShiftForTooltip || 0}
leftShiftForLastIndexTooltip={
props.leftShiftForLastIndexTooltip || 0
}
@ -1610,6 +1612,7 @@ export const BarChart = (props: PropTypes) => {
onPress={props.onPress}
xAxisTextNumberOfLines={xAxisTextNumberOfLines}
renderTooltip={props.renderTooltip}
leftShiftForTooltip={props.leftShiftForTooltip || 0}
leftShiftForLastIndexTooltip={
props.leftShiftForLastIndexTooltip || 0
}