feat: Make Predict Charts Interactive

[andrepimenta]

Interactive Chart for Predict Markets

Overview

This PR adds interactive drag-to-view functionality to the Predict market details chart, allowing users to explore historical price data by dragging their finger across the chart.

CHANGELOG entry: null

Simulator.Screen.Recording.-.iPhone.16.Pro.-.2025-11-10.at.12.25.35.mov

Features

1. Touch Interaction

• Users can touch and drag on the chart to view values at different points in time
• Crosshair line follows finger position from top to bottom of chart
• Values update in real-time as user drags

2. Visual Feedback

• Crosshair Line: Solid vertical line (theme-aware) extends from top to bottom
• Time Label: Displayed at top of chart showing timestamp at dragged position
• Data Point Indicators: Colored circles on each line at the active position
• Value Labels: Colored badges showing series name and value at each data point

3. Smart Label Positioning

• Collision Detection: Labels automatically adjust to prevent overlap when lines cross
• Side Switching: Labels flip from right to left side when user drags past chart midpoint
• Character Limit: Labels truncate to 25 characters to prevent overflow

4. Dynamic Legend Values

• Legend above chart updates to show values at dragged position
• Automatically reverts to latest values when user releases touch
• Provides context for historical data exploration

5. Gesture Handling

• Directional Detection: Distinguishes between horizontal drags (chart interaction) and vertical scrolls (page scrolling)
• No Scroll Conflicts: Parent ScrollView continues to work for vertical scrolling
• Smart gesture capture prevents interference between chart interaction and page navigation

6. Theme Support

• All colors use design tokens for automatic light/dark mode support
• Crosshair line: colors.border.muted (gray in light mode, white in dark mode)
• Text: colors.text.alternative (gray in light mode, white in dark mode)
• Labels: colors.background.default for text on colored backgrounds

Technical Implementation

Components Modified

1. PredictDetailsChart.tsx

   • Added PanResponder for touch gesture handling
   • Implemented collision detection algorithm for label positioning
   • Created tooltip overlay with proper z-index stacking
   • Added directional gesture discrimination

2. ChartLegend.tsx

   • Added activeIndex prop to display dragged position values
   • Updates dynamically during drag interaction
   • Reverts to latest values on release

Key Technical Decisions

• Tooltip Rendering: Uses separate transparent LineChart overlay rendered last for proper z-index
• Collision Detection: Sorts labels by Y position and applies minimum 4px spacing
• Gesture Direction: Uses gestureState.dx and gestureState.dy to determine horizontal vs vertical movement
• Label Truncation: 25-character limit with ellipsis for long outcome titles

Testing

Manual Testing Steps

1. Navigate to any Predict market with price history
2. Touch and drag horizontally on the chart
3. Verify:
   • Crosshair line appears and follows touch
   • Time label shows at top of chart
   • Value labels appear next to data points
   • Legend values update to show dragged position
   • Labels flip to left side when dragging on right half
   • Labels don't overlap when lines cross
4. Release touch and verify:
   • Tooltip disappears
   • Legend reverts to latest values
5. Try vertical scrolling on chart area:
   • Verify page scrolls normally
   • Chart interaction only activates on horizontal drag

Edge Cases Tested

• ✅ Multiple series with crossing lines (collision detection)
• ✅ Long outcome titles (truncation to 25 chars)
• ✅ Single vs multiple series charts
• ✅ Empty data states
• ✅ Loading states
• ✅ Light and dark modes
• ✅ Gesture conflicts with ScrollView

Screenshots/Demo

Add screenshots or screen recording demonstrating the interactive features

Performance Considerations

• Uses useCallback for gesture handlers to prevent unnecessary re-renders
• Tooltip component defined outside render to avoid recreation
• Collision detection runs only during active drag (not on every render)
• Proper cleanup on gesture release

Accessibility

• Touch targets are appropriate size (chart fills available width)
• Visual feedback is clear and theme-aware
• Falls back to showing latest values when not interacting

Breaking Changes

None. All changes are additive and backward compatible.

Dependencies

No new dependencies added. Uses existing:

• react-native-svg-charts (already in use)
• react-native-svg (already in use)
• React Native PanResponder (built-in)

Future Enhancements

Potential improvements for future PRs:

• Haptic feedback on touch
• Animation transitions for label movements
• Pinch-to-zoom for chart data
• Export chart data feature
• Customizable tooltip appearance

Commits

• ba2a015 - feat: add interactive chart with drag-to-view values in Predict
• 3a40cd1 - refactor: improve chart tooltip styling and positioning
• 93142d5 - feat: add label collision detection to chart tooltip
• 2a6f32b - feat: update legend values dynamically based on dragged position
• a9d37d6 - feat: add character limit to tooltip labels

Checklist

• Code follows project coding guidelines
• No linting errors
• Changes are backward compatible
• Manual testing completed
• Works in both light and dark themes
• Gesture handling doesn't conflict with ScrollView
• Unit tests added (if applicable)
• E2E tests updated (if applicable)
• Documentation updated (if applicable)

Related Issues

Link any related issues or tickets here

---

Note

Adds touch-driven crosshair/tooltip overlay with dynamic legend updates to Predict details chart, plus extensive tests and minor type/mocks updates.

• PredictDetailsChart (PredictDetailsChart.tsx):
  • Add interactive drag support via PanResponder with horizontal/vertical gesture discrimination.
  • Implement ChartTooltip overlay (crosshair, timestamp, per-series circles/labels) rendered via transparent LineChart layer.
  • Dynamic legend: pass activeIndex to ChartLegend to show values at the dragged position; revert when inactive.
  • Data/type updates: ChartSeries.data supports optional label; generate formatted label for timestamps; collision handling and side-switching for tooltip labels; theme-aware colors.
• ChartLegend (components/ChartLegend.tsx):
  • Accept activeIndex to display contextual values; fallback to last point; formatting via formatTickValue.
• Tests:
  • Expand PredictDetailsChart.test.tsx to cover interactions, overlays, label truncation/collisions, theme, multiple series, and axis labels; adjust LineChart mock to hide transparent overlay; add Circle/Rect to SVG mocks.
  • Add ChartLegend.test.tsx with value formatting, activeIndex behaviors, edge cases, and multi-series coverage.

^{Written by Cursor Bugbot for commit 98d1802. This will update automatically on new commits. Configure here.}

[caieu]

LGTM

[github-actions]

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

[sonarqubecloud]

Quality Gate failed

Failed conditions
15.2% Coverage on New Code (required ≥ 80%)

See analysis details on SonarQube Cloud

[caieu]

LGTM