Skip to content
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

add stroke properties to discrete color legend (#860) #994

Merged

Conversation

Wattenberger
Copy link
Contributor

Added the ability to set stroke properties (strokeDasharray, strokeStyle, strokeWidth) of Discrete Color Legend items to match Line Series components. At first I considered mimicking the colors attribute and letting users add a strokeWidths array, but it seemed to over-complicate the api, so I settled with grabbing those properties from an item's object.

The legend items now render an svg path instead of a 2x14px div, which was necessary to match the dash-array property, but it also might help keep the legend consistent with the chart.

I edited one of the legend examples to show the implementation - happy to remove it if it's too heavy-handed.

image

Happy to hear any feedback, thanks!

strokeDasharray, strokeStyle, strokeWidth
Copy link
Contributor

@mcnuttandrew mcnuttandrew left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You are on fire! I think this is a fine solution to this problem. Would you mind adding a test to support this change?

update tests to use svg properties, add tests for stroke dasharray and stroke width, and filter out unused styles
@Wattenberger
Copy link
Contributor Author

Oh shoot! Tests, of course!

I updated the tests to match the svg styles/elements and added stroke-width and stroke-dasharray tests. Thanks for the speedy response!

@mcnuttandrew
Copy link
Contributor

Looks good! Thanks again

@mcnuttandrew mcnuttandrew merged commit 1d350bb into uber:master Oct 8, 2018
ayarcohaila pushed a commit to ayarcohaila/react-vis that referenced this pull request Jun 30, 2021
* add stroke properties to discrete color legend (uber#860)

strokeDasharray, strokeStyle, strokeWidth

* update tests for discrete color legend

update tests to use svg properties, add tests for stroke dasharray and stroke width, and filter out unused styles
ayarcohaila added a commit to ayarcohaila/react-vis that referenced this pull request May 30, 2023
* add stroke properties to discrete color legend (uber#860)

strokeDasharray, strokeStyle, strokeWidth

* update tests for discrete color legend

update tests to use svg properties, add tests for stroke dasharray and stroke width, and filter out unused styles
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants