FormidableLabs / FormidableLabs/victory-native-xl
Tooltip position always 0 when x axis is a Date type
- Dominant language
- TypeScript
- Stars
- 1.2k
- Forks
- 110
- Avg merge
- 1d 15h
- Merged PRs (30d)
- 3
Description
### Prerequisites
- [x] I have searched the open [issues](https://www.github.com/FormidableLabs/victory-native-xl/issues) to make sure I'm not opening a duplicate issue
- [x] I have read through the [docs](https://www.formidable.com/open-source/victory-native-xl/docs) before asking a question
- [ ] I am using the latest version of victory-native-xl
### Describe Your Environment
**What version of victory-native-xl are you using?** (can be found by running `npm list --depth 0 victory-native`)
victory-native: ~41.16.2
**What version of React and React Native are you using?**
React-native: 0.76.9
React: 18.3.1
**What version of Reanimated and React Native Skia are you using?**
@shopify/react-native-skia: 1.5.0
react-native-reanimated: ~3.16.1
**Are you using Expo or React Native CLI?**
Expo
**What platform are you on?** (e.g., iOS, Android)
iOS, Android
### Describe the Problem
**Expected behavior:** The `state.x.position` and `state.y.highTmp.position` should change its value when the `isActive == true`
**Actual behavior:** [What actually happens] The `state.x.position` and `state.y.highTmp.position` is always `0` when `isActive == true`
### Additional Information
This happens when x axis data is a `Date` type
```ts
import * as React from 'react';
import {View} from 'react-native';
import {CartesianChart, Line, useChartPressState} from 'victory-native';
import {Circle} from '@shopify/react-native-skia';
import {type SharedValue} from 'react-native-reanimated';
export function MyChart() {
const {state, isActive} = useChartPressState({x: 0, y: {highTmp: 0}});
const {state: state2, isActive: isActive2} = useChartPressState({
x: 0,
y: {highTmp: 0},
});
return (
{
const date = new Date(value);
const dtString = date.toLocaleString('pt-BR', { month: 'short', day: 'short' });
return Number.isNaN(date.getTime())
? ''
: capitalizeString(dtString.replace('.', ''));
},}}>
chartPressState={[state, state2]}
>
{({points}) => (
<>
{isActive && (
)}
{isActive2 && (
)}
)}
);
}
function ToolTip({x, y}: {x: SharedValue; y: SharedValue}) {
return ;
}
const DATA = Array.from({length: 31}, (_, i) => ({
day: new Date(2024, 11, i + 1),
highTmp: 40 + 30 * Math.random(),
}));
```
Contributor guide
Research direction
Run the provided CartesianChart example with the Date-valued DATA first. Then trace useChartPressState and chartPressState handling in CartesianChart, comparing Date x-axis behavior with numeric x values. Done means state.x.position and state.y.highTmp.position update from 0 while the press state is active.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, react-native, typescript
- Domain
- data-visualization, mobile
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100