FormidableLabs / FormidableLabs/victory-native-xl

Tooltip position always 0 when x axis is a Date type

Open
#591 3 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.