feature: legend navigation #11825
Open
feature: legend navigation #11825
Conversation
This file contains 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
- Add legend pagination as an optional feature - Fix multiline legend overlap in horizontal positioning - Fix legend title left and right padding not working - Fix legend title overlapping with multiple lines
LeeLenaleee
reviewed
Aug 8, 2024
| @@ -56,6 +57,26 @@ export class Legend extends Element { | |||
| */ | |||
| this._hoveredItem = null; | |||
|
|
|||
| this.navigation = { | |||
There was a problem hiding this comment.
Wouldn't it be more logical if this was undefined unless someone has its feature enabled?
LeeLenaleee
reviewed
Aug 8, 2024
| @@ -117,7 +139,272 @@ export class Legend extends Element { | |||
| legendItems.reverse(); | |||
| } | |||
|
|
|||
| this.legendItems = legendItems; | |||
| this.navigation.legendItems = this.legendItems = legendItems; | |||
There was a problem hiding this comment.
Personally I think doing this in 2 steps is a lot more readable and less error prone:
Suggested change
| this.navigation.legendItems = this.legendItems = legendItems; | |
| this.legendItems = legendItems; | |
| this.navigation.legendItems = legendItems; |
LeeLenaleee
reviewed
Aug 8, 2024
Comment on lines
+188
to
+190
| this.navigation._width = this.navigation._height = 0; | ||
| this.navigation._maxWidth = this.navigation._maxHeight = 0; | ||
| this.navigation.itemWidth = this.navigation.itemHeight = 0; |
etimberg
reviewed
Aug 13, 2024
| @@ -0,0 +1,56 @@ | |||
| { | |||
There was a problem hiding this comment.
In this test the arrows are vertical, but in the previous test legend-navigation-horizontal-auto-visible they are horizontal. Is that expected?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
I needed this feature to manage many legends on the same chart, but I couldn't find anything besides the HTML legends. Therefore, I decided to implement this feature, and I hope it can be useful for the Chart.js core, as I believe it is essential.
An example of the navigation working, and also the documentation created, can be found here: https://cerbaro.dev/Chart.js/samples/legend/navigation.html
Furthermore, during the process I encountered some issues and ended up solving them.
#11280 - Horizontal padding of the legend title does not work
#11824 - Horizontal legend multiline labels overlaps
I am willing to collaborate with any changes you deem necessary.
Issues related to legend pagination: #10893, #7100, #6545, #3761, #5561, #11425 (There's probably others as well).
There is an open issue for a refactor in the legend plugin (#9342), but I don't know when version 5 will be released, perhaps it would be interesting to add this navigation to the current version anyway.
I would be happy to contribute to the new version if needed.