fix: Constrain LineIndicator within path area boundaries#13
Merged
Conversation
- Add boundary validation to prevent LineIndicator from exceeding xAxis coordinates - Implement isCursorWithinPathArea check to only render indicator within data area - Update y-axis coordinate calculation to use pre-calculated axis values - Add comprehensive tests for boundary constraint scenarios This fix addresses issues where the line indicator could extend beyond the chart boundaries into the axis labels area.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
🔍 PR Validation ReportStatus: ✅ PASSED ✅ Validation Results
🎯 Next StepsThis PR is ready for review - all validation checks passed! 📦 Expected Release ImpactBased on branch name This validation runs automatically on every PR. Questions? Check our Contributing Guidelines |
Contributor
❌ Auto-publish FailedThe automatic publication process failed. Please check the workflow logs for details. 🔧 Common Solutions
🔐 Required Secrets Configuration
📞 Next Steps
|
Contributor
🐛 Auto-publish Successful!
📦 Installationnpm install @kubit-ui-web/react-charts@1.5.1
# or
yarn add @kubit-ui-web/react-charts@1.5.1✅ Completed Steps
🎉 Ready to use in production! |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
📝 Summary
This PR fixes an issue where the
LineIndicatorcomponent could exceed the chart's path boundaries, extending into axis labels and other chart areas. Previously, the indicator was rendered without boundary validation, causing visual overflow and accessibility issues.The fix adds proper boundary constraints that ensure the line indicator only renders within the valid data visualization area, preventing overflow into axis labels while maintaining consistent behavior across all chart interactions.
🔧 Changes
✅ Added boundary validation to prevent
LineIndicatorfrom exceeding xAxis coordinates✅ Implemented
isCursorWithinPathAreacheck to constrain indicator rendering within data area✅ Updated y-axis coordinate calculation to use pre-calculated axis values instead of computing from canvas height
✅ Refactored coordinate logic for improved maintainability and consistency
✅ Added comprehensive test suite for boundary constraint scenarios
✅ Added test cases for edge cases (left/right of boundary, at min/max boundaries, within boundaries)
Type of Change
🧪 Testing
✅ Unit tests added for boundary constraint validation
✅ Test cases for LineIndicator left of boundary (should not render)
✅ Test cases for LineIndicator at min boundary (should render)
✅ Test cases for LineIndicator within boundary (should render)
✅ Test cases for LineIndicator at max boundary (should render)
✅ Test cases for LineIndicator right of boundary (should not render)
✅ All tests passing
✅ Manual testing performed with mouse cursor interactions
📦 Developer Experience Improvements
Author: Miguel García (@miguelgarglez)