status-im/react-native-gifted-charts
2
0
Fork 0
mirror of https://github.com/status-im/react-native-gifted-charts.git synced 2025-02-23 09:08:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #215 from Abhinandan-Kushwaha/abhi

Browse Source 
fixed label position issue with pointers in Line/Area charts
This commit is contained in:
Abhinandan Kushwaha 2022-05-30 19:49:55 +05:30 committed by GitHub
commit 09474b1497
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 20 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

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

20
src/LineChart/index.tsx
View File

@ -371,6 +371,7 @@ type Pointer = {
export const LineChart = (props: propTypes) => { export const LineChart = (props: propTypes) => {
const scrollRef = useRef(); const scrollRef = useRef();
const [scrollX, setScrollX] = useState(0);
const [pointerIndex, setPointerIndex] = useState(-1); const [pointerIndex, setPointerIndex] = useState(-1);
const [pointerX, setPointerX] = useState(0); const [pointerX, setPointerX] = useState(0);
const [pointerY, setPointerY] = useState(0); const [pointerY, setPointerY] = useState(0);
@ -2557,6 +2558,11 @@ export const LineChart = (props: propTypes) => {
if (autoAdjustPointerLabelPosition) { if (autoAdjustPointerLabelPosition) {
if (pointerX < pointerLabelWidth / 2) { if (pointerX < pointerLabelWidth / 2) {
left = 7; left = 7;
} else if (
activatePointersOnLongPress &&
pointerX - scrollX < pointerLabelWidth / 2 - 10
) {
left = 7;
} else { } else {
if ( if (
!activatePointersOnLongPress && !activatePointersOnLongPress &&
@ -2568,7 +2574,10 @@ export const LineChart = (props: propTypes) => {
left = -pointerLabelWidth - 4; left = -pointerLabelWidth - 4;
} else if ( } else if (
activatePointersOnLongPress && activatePointersOnLongPress &&
pointerX > totalWidth - yAxisLabelWidth - pointerLabelWidth / 2 pointerX - scrollX >
(props.width + 10 ||
Dimensions.get('window').width - yAxisLabelWidth - 15) -
pointerLabelWidth / 2
) { ) {
left = -pointerLabelWidth - 4; left = -pointerLabelWidth - 4;
} else { } else {
@ -3293,6 +3302,15 @@ export const LineChart = (props: propTypes) => {
scrollRef.current.scrollToEnd({animated: scrollAnimation}); scrollRef.current.scrollToEnd({animated: scrollAnimation});
} }
}} }}
onScroll={ev => {
if (
pointerConfig &&
pointerConfig.activatePointersOnLongPress &&
pointerConfig.autoAdjustPointerLabelPosition
) {
setScrollX(ev.nativeEvent.contentOffset.x);
}
}}
showsHorizontalScrollIndicator={showScrollIndicator} showsHorizontalScrollIndicator={showScrollIndicator}
indicatorStyle={props.indicatorColor} indicatorStyle={props.indicatorColor}
style={[ style={[