-
-
Notifications
You must be signed in to change notification settings - Fork 1.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
RadialBar: activeShape should work with Tooltip #3803
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Overall great addition! I have a few comments and questions but nothing blocking. Thank you for your (repeated ❤️ ) contribution
src/util/RadialBarUtils.tsx
Outdated
} | ||
|
||
if (props.isActive) { | ||
return <Layer className="recharts-active-shape">{sectorShape}</Layer>; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Not sure about best practice, but we are already using this twice so far, we could extract it as a constant.
What is the use case of this className? Testing? Enabling the user to further adapt the style?
If the reason is testing, should we then not be using data-testid attribute instead?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
What is the use case of this className? Testing? Enabling the user to further adapt the style?
I believe if the user provides activeShape
an object of attributes, or as a boolean, then they could use this classname to target styling.
Thank you @andrewangelle! I tested it again and found no issue. |
[![Mend Renovate](https://app.renovatebot.com/images/banner.svg)](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [recharts](https://togithub.com/recharts/recharts) | [`2.8.0` -> `2.9.0`](https://renovatebot.com/diffs/npm/recharts/2.8.0/2.9.0) | [![age](https://developer.mend.io/api/mc/badges/age/npm/recharts/2.9.0?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/recharts/2.9.0?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/recharts/2.8.0/2.9.0?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/recharts/2.8.0/2.9.0?slim=true)](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>recharts/recharts (recharts)</summary> ### [`v2.9.0`](https://togithub.com/recharts/recharts/releases/tag/v2.9.0) [Compare Source](https://togithub.com/recharts/recharts/compare/v2.8.0...v2.9.0) #### What's Changed Quite a lot this minor release! We sent out a cry for help and many answered - thank you so much for that 🙌🏼 This release aims at internal maintainability, long lingering bugs, and needed improvements. Highlights include equidistant tick improvements, an active bar feature, and an ~85k/~9kb (gzipped) bundle size reduction 🚀 ##### Feat - `Bar`: Implement activeBar for Bar component by [@​andrewangelle](https://togithub.com/andrewangelle) in [recharts/recharts#3756 - `CartesianGrid`: add `syncWithticks`, `horizonalValues`, and `verticalValues` props to allow more grid line customization by [@​morozovkirill](https://togithub.com/morozovkirill) in [recharts/recharts#3746 solves [recharts/recharts#2153 - `CartesianAxis`: Improve interval option 'equidistantPreserveStart' by [@​nikolasrieble](https://togithub.com/nikolasrieble) in [recharts/recharts#3768 - `CartesianAxis`: Throw an invariant when axisIds do not match between chart and axis components by [@​ckifer](https://togithub.com/ckifer) - `Brush`: add onDragEnd event to Brush component by [@​simkesd](https://togithub.com/simkesd) in [recharts/recharts#3774 ##### Fix - Active Shape improvements - `Funnel`: activeShape should work with Tooltip by [@​andrewangelle](https://togithub.com/andrewangelle) in [recharts/recharts#3772 - `Scatter`: activeShape should work with Tooltip by [@​andrewangelle](https://togithub.com/andrewangelle) in [recharts/recharts#3839 - `Pie`: activeShape should work with Tooltip by [@​andrewangelle](https://togithub.com/andrewangelle) in [recharts/recharts#3818 - `RadialBar`: activeShape should work with Tooltip by [@​andrewangelle](https://togithub.com/andrewangelle) in [recharts/recharts#3803 - `CartesianGrid`: Remove offset attribute from lines by [@​branberry](https://togithub.com/branberry) in [recharts/recharts#3854 solves [recharts/recharts#3810 - `ResponsiveContainer`: style prop is now passed down correctly by [@​d-gottlieb](https://togithub.com/d-gottlieb) in [recharts/recharts#3726 - `Legend`: "Functions are not valid as a React child" error in <Legend/> when a function is passed as the payload [#​3749](https://togithub.com/recharts/recharts/issues/3749) by [@​chris-mcdonald-dev](https://togithub.com/chris-mcdonald-dev) in [recharts/recharts#3750 - `Tooltip`: Fix tooltip position when container uses transform scale by [@​MateuszTrN](https://togithub.com/MateuszTrN) in [recharts/recharts#3748 - `Tooltip`: Tooltip does not include data from all charts when a separate dataset is passed to chart prop data and specified on Line/Area/etc prop data by [@​andrewangelle](https://togithub.com/andrewangelle) in [recharts/recharts#3733 fixes [recharts/recharts#3669 ##### Refactor Impossible to mention all of the great refactoring done this release thanks to [@​PavelVanecek](https://togithub.com/PavelVanecek) (33 PRs in one month!!) and others! Notable improvements include (non-breaking) type safety enhancements and source code file size reductions, and unit test improvements that will help reduce regressions. ##### Chore - Upgrade react-smooth to 2.0.5 - potentially fixes [recharts/recharts#1135 (edit: this was already fixed) - Add performance testing tool by [@​PavelVanecek](https://togithub.com/PavelVanecek) in [recharts/recharts#3829 - remove reduceCSSCalc by [@​HHongSeungWoo](https://togithub.com/HHongSeungWoo) in [recharts/recharts#3820 ##### Storybook - Add storybook-addon-performance by [@​PavelVanecek](https://togithub.com/PavelVanecek) in [recharts/recharts#3826 - many storybook improvements and fixes #### 🚀 New Contributors (!!) 🚀 - [@​d-gottlieb](https://togithub.com/d-gottlieb) made their first contribution in [recharts/recharts#3726 - [@​andrewangelle](https://togithub.com/andrewangelle) made their first contribution in [recharts/recharts#3733 - [@​wanisramdani](https://togithub.com/wanisramdani) made their first contribution in [recharts/recharts#3751 - [@​MateuszTrN](https://togithub.com/MateuszTrN) made their first contribution in [recharts/recharts#3748 - [@​chris-mcdonald-dev](https://togithub.com/chris-mcdonald-dev) made their first contribution in [recharts/recharts#3750 - [@​PavelVanecek](https://togithub.com/PavelVanecek) made their first contribution in [recharts/recharts#3759 - [@​simkesd](https://togithub.com/simkesd) made their first contribution in [recharts/recharts#3774 - [@​samtmorgan](https://togithub.com/samtmorgan) made their first contribution in [recharts/recharts#3778 - [@​Shashangbhagat](https://togithub.com/Shashangbhagat) made their first contribution in [recharts/recharts#3786 - [@​morozovkirill](https://togithub.com/morozovkirill) made their first contribution in [recharts/recharts#3746 - [@​branberry](https://togithub.com/branberry) made their first contribution in [recharts/recharts#3854 - [@​HHongSeungWoo](https://togithub.com/HHongSeungWoo) made their first contribution in [recharts/recharts#3820 **Full Changelog**: recharts/recharts@v2.8.0...v2.9.0 </details> --- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Enabled. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://developer.mend.io/github/SAP/ui5-webcomponents-react). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNy44LjEiLCJ1cGRhdGVkSW5WZXIiOiIzNy4xOS4yIiwidGFyZ2V0QnJhbmNoIjoibWFpbiJ9--> --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Lukas Harbarth <lukas.harbarth@sap.com>
[![Mend Renovate](https://app.renovatebot.com/images/banner.svg)](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [recharts](https://togithub.com/recharts/recharts) | [`2.8.0` -> `2.9.3`](https://renovatebot.com/diffs/npm/recharts/2.8.0/2.9.3) | [![age](https://developer.mend.io/api/mc/badges/age/npm/recharts/2.9.3?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/recharts/2.9.3?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/recharts/2.8.0/2.9.3?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/recharts/2.8.0/2.9.3?slim=true)](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>recharts/recharts (recharts)</summary> ### [`v2.9.3`](https://togithub.com/recharts/recharts/releases/tag/v2.9.3) [Compare Source](https://togithub.com/recharts/recharts/compare/v2.9.2...v2.9.3) #### Fix `Brush`: Fix an issue where after 2.9 `Brush` does not correctly slice data when using `Line` components - fixes [recharts/recharts#3929 - thank you [@​HHongSeungWoo](https://togithub.com/HHongSeungWoo) ### [`v2.9.2`](https://togithub.com/recharts/recharts/releases/tag/v2.9.2) [Compare Source](https://togithub.com/recharts/recharts/compare/v2.9.1...v2.9.2) Fix another TS issue from 2.9. ##### Fix - `Line/ActiveDot`: Fix breaking type change for the `onClick` function of `activeDot` on `Line` - this resolves [recharts/recharts#3922 - thank you [@​andrewangelle](https://togithub.com/andrewangelle) for the quick turnaround ### [`v2.9.1`](https://togithub.com/recharts/recharts/releases/tag/v2.9.1) [Compare Source](https://togithub.com/recharts/recharts/compare/v2.9.0...v2.9.1) Bug fixes following 2.9.0 #### Fix - `TypeScript`: fix breaking change in `ActiveShape` types - fixes [recharts/recharts#3911 - thanks [@​andrewangelle](https://togithub.com/andrewangelle) - `CartesianGrid`: fix breaking change where you could no longer render `CartesianGrid` without a y-axis - fixes [recharts/recharts#3907 - thanks [@​akamfoad](https://togithub.com/akamfoad) - `Line`: fix infinite loop when `strokeDasharray` is `'0'` on `Line` - fixes [recharts/recharts#3899 (and maybe others) **Full Changelog**: recharts/recharts@v2.9.0...v2.9.1 ### [`v2.9.0`](https://togithub.com/recharts/recharts/releases/tag/v2.9.0) [Compare Source](https://togithub.com/recharts/recharts/compare/v2.8.0...v2.9.0) #### What's Changed Quite a lot this minor release! We sent out a cry for help and many answered - thank you so much for that 🙌🏼 This release aims at internal maintainability, long lingering bugs, and needed improvements. Highlights include equidistant tick improvements, an active bar feature, and an ~85k/~9kb (gzipped) bundle size reduction 🚀 ##### Feat - `Bar`: Implement activeBar for Bar component by [@​andrewangelle](https://togithub.com/andrewangelle) in [recharts/recharts#3756 - `CartesianGrid`: add `syncWithticks`, `horizonalValues`, and `verticalValues` props to allow more grid line customization by [@​morozovkirill](https://togithub.com/morozovkirill) in [recharts/recharts#3746 solves [recharts/recharts#2153 - `CartesianAxis`: Improve interval option 'equidistantPreserveStart' by [@​nikolasrieble](https://togithub.com/nikolasrieble) in [recharts/recharts#3768 - `CartesianAxis`: Throw an invariant when axisIds do not match between chart and axis components by [@​ckifer](https://togithub.com/ckifer) - `Brush`: add onDragEnd event to Brush component by [@​simkesd](https://togithub.com/simkesd) in [recharts/recharts#3774 ##### Fix - Active Shape improvements - `Funnel`: activeShape should work with Tooltip by [@​andrewangelle](https://togithub.com/andrewangelle) in [recharts/recharts#3772 - `Scatter`: activeShape should work with Tooltip by [@​andrewangelle](https://togithub.com/andrewangelle) in [recharts/recharts#3839 - `Pie`: activeShape should work with Tooltip by [@​andrewangelle](https://togithub.com/andrewangelle) in [recharts/recharts#3818 - `RadialBar`: activeShape should work with Tooltip by [@​andrewangelle](https://togithub.com/andrewangelle) in [recharts/recharts#3803 - `CartesianGrid`: Remove offset attribute from lines by [@​branberry](https://togithub.com/branberry) in [recharts/recharts#3854 solves [recharts/recharts#3810 - `ResponsiveContainer`: style prop is now passed down correctly by [@​d-gottlieb](https://togithub.com/d-gottlieb) in [recharts/recharts#3726 - `Legend`: "Functions are not valid as a React child" error in <Legend/> when a function is passed as the payload [#​3749](https://togithub.com/recharts/recharts/issues/3749) by [@​chris-mcdonald-dev](https://togithub.com/chris-mcdonald-dev) in [recharts/recharts#3750 - `Tooltip`: Fix tooltip position when container uses transform scale by [@​MateuszTrN](https://togithub.com/MateuszTrN) in [recharts/recharts#3748 - `Tooltip`: Tooltip does not include data from all charts when a separate dataset is passed to chart prop data and specified on Line/Area/etc prop data by [@​andrewangelle](https://togithub.com/andrewangelle) in [recharts/recharts#3733 fixes [recharts/recharts#3669 ##### Refactor Impossible to mention all of the great refactoring done this release thanks to [@​PavelVanecek](https://togithub.com/PavelVanecek) (33 PRs in one month!!) and others! Notable improvements include (non-breaking) type safety enhancements and source code file size reductions, and unit test improvements that will help reduce regressions. ##### Chore - Upgrade react-smooth to 2.0.5 - potentially fixes [recharts/recharts#1135 (edit: this was already fixed) - Add performance testing tool by [@​PavelVanecek](https://togithub.com/PavelVanecek) in [recharts/recharts#3829 - remove reduceCSSCalc by [@​HHongSeungWoo](https://togithub.com/HHongSeungWoo) in [recharts/recharts#3820 ##### Storybook - Add storybook-addon-performance by [@​PavelVanecek](https://togithub.com/PavelVanecek) in [recharts/recharts#3826 - many storybook improvements and fixes #### 🚀 New Contributors (!!) 🚀 - [@​d-gottlieb](https://togithub.com/d-gottlieb) made their first contribution in [recharts/recharts#3726 - [@​andrewangelle](https://togithub.com/andrewangelle) made their first contribution in [recharts/recharts#3733 - [@​wanisramdani](https://togithub.com/wanisramdani) made their first contribution in [recharts/recharts#3751 - [@​MateuszTrN](https://togithub.com/MateuszTrN) made their first contribution in [recharts/recharts#3748 - [@​chris-mcdonald-dev](https://togithub.com/chris-mcdonald-dev) made their first contribution in [recharts/recharts#3750 - [@​PavelVanecek](https://togithub.com/PavelVanecek) made their first contribution in [recharts/recharts#3759 - [@​simkesd](https://togithub.com/simkesd) made their first contribution in [recharts/recharts#3774 - [@​samtmorgan](https://togithub.com/samtmorgan) made their first contribution in [recharts/recharts#3778 - [@​Shashangbhagat](https://togithub.com/Shashangbhagat) made their first contribution in [recharts/recharts#3786 - [@​morozovkirill](https://togithub.com/morozovkirill) made their first contribution in [recharts/recharts#3746 - [@​branberry](https://togithub.com/branberry) made their first contribution in [recharts/recharts#3854 - [@​HHongSeungWoo](https://togithub.com/HHongSeungWoo) made their first contribution in [recharts/recharts#3820 **Full Changelog**: recharts/recharts@v2.8.0...v2.9.0 </details> --- ### Configuration 📅 **Schedule**: Branch creation - "after 4pm every weekday" in timezone Europe/Paris, Automerge - At any time (no schedule defined). 🚦 **Automerge**: Enabled. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://developer.mend.io/github/specfy/specfy). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNy40Ni4wIiwidXBkYXRlZEluVmVyIjoiMzcuNDYuMCIsInRhcmdldEJyYW5jaCI6ImNob3JlL3Jlbm92YXRlQmFzZUJyYW5jaCJ9--> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
<!--- Provide a general summary of your changes in the Title above --> The existing activeShape prop on `<RadialBar />` should work with the `<Tooltip />` in the same manner as `<Line />`, `<Bar />`, `<Funnel/>` do. ## Description <!--- Describe your changes in detail --> - #### src/chart/generateCategoricalChart.tsx - Added another if block to render the graphical item when `activeShape` is truthy. Inside the new if block, render the graphical item and pass in `activeIndex` which defaults to user defined `activeIndex` and falls back to `activeTooltipIndex` when undefined. - #### src/polar/RadialBar.tsx - Renamed the generically exported type named Props to RadialBarProps - Refactored static render method out to RadialBarUtils - Updated type of `RadialBar.activeShape` to match the signature of activeLine/activeBar/activeShape in Line/Bar/Funnel components ## Related Issue recharts#3792 <!--- This project only accepts pull requests related to open issues --> <!--- If suggesting a new feature or change, please discuss it in an issue first --> <!--- If fixing a bug, there should be an issue describing it with steps to reproduce --> <!--- Please link to the issue here: --> ## Motivation and Context <!--- Why is this change required? What problem does it solve? --> To provide a consistent interface between Line / Bar / Funnel / RadialBar and their respective props of activeDot / activeBar / activeShape ## How Has This Been Tested? Unit tests and storybook <!--- Please describe in detail how you tested your changes. --> <!--- Include details of your testing environment, and the tests you ran to --> <!--- see how your change affects other areas of the code, etc. --> ## Screenshots (if appropriate): <img width="342" alt="Screenshot 2023-09-29 at 5 23 19 PM" src="https://github.com/recharts/recharts/assets/24420033/bc25c31b-1e9a-4538-9441-0161b3045cc4"> ## Types of changes <!--- What types of changes does your code introduce? Put an `x` in all the boxes that apply: --> - [x] Bug fix (non-breaking change which fixes an issue) - [x] New feature (non-breaking change which adds functionality) - [ ] Breaking change (fix or feature that would cause existing functionality to change) ## Checklist: <!--- Go over all the following points, and put an `x` in all the boxes that apply. --> <!--- If you're unsure about any of these, don't hesitate to ask. We're here to help! --> - [x] My code follows the code style of this project. - [ ] My change requires a change to the documentation. - [ ] I have updated the documentation accordingly. - [x] I have added tests to cover my changes. - [x] I have added a storybook story or extended an existing story to show my changes - [x] All new and existing tests passed.
The existing activeShape prop on
<RadialBar />
should work with the<Tooltip />
in the same manner as<Line />
,<Bar />
,<Funnel/>
do.Description
src/chart/generateCategoricalChart.tsx
activeShape
is truthy.Inside the new if block, render the graphical item and pass in
activeIndex
which defaults to user definedactiveIndex
and falls back toactiveTooltipIndex
when undefined.src/polar/RadialBar.tsx
RadialBar.activeShape
to match the signature of activeLine/activeBar/activeShape in Line/Bar/Funnel componentsRelated Issue
#3792
Motivation and Context
To provide a consistent interface between Line / Bar / Funnel / RadialBar and their respective props of activeDot / activeBar / activeShape
How Has This Been Tested?
Unit tests and storybook
Screenshots (if appropriate):
Types of changes
Checklist: