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

feat(legend): custom legend width #1467

Merged
merged 6 commits into from
Dec 13, 2021

Conversation

nickofthyme
Copy link
Collaborator

@nickofthyme nickofthyme commented Nov 5, 2021

Summary

The legendSize prop is now available in the Settings component to set the exact size of the legend.

Limitations:

  • Height and width limited to max of 70% of respective chart dimensions. Prevent squishing the chart area.
  • Width limited to min of 30% computed legend width. Prevent squishing the static legend elements.

Screen Recording 2021-11-05 at 11 37 27 AM

This will override the max dimensioning options on the theme including theme.legend.verticalWidth & theme.legend.horizontalHeight.

Issues

fix #963

Checklist

  • The proper chart type label has been added (e.g. :xy, :partition)
  • The proper feature labels have been added (e.g. :interactions, :axis)
  • All related issues have been linked (i.e. closes #123, fixes #123)
  • New public API exports have been added to packages/charts/src/index.ts
  • Unit tests have been added or updated to match the most common scenarios
  • The proper documentation and/or storybook story has been added or updated

@nickofthyme nickofthyme added enhancement New feature or request :legend Legend related issue :all Applies to all chart types labels Nov 5, 2021
Copy link
Member

@markov00 markov00 left a comment

Choose a reason for hiding this comment

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

Changes look good to me.
The chosen min/max ratio is fine and allows a nice customizability

@nickofthyme
Copy link
Collaborator Author

The chosen min/max ratio is fine and allows a nice customizability

The only issue i see with adding these limits is if Lens, or anyone, has a value that is outside of these limits, there would be no way for them to know without passing back some callback or them knowing the limits and chart width/height. Say they set the legend width to 1000px but the chart width is only 700px, it would be restricted to 70% of 700px.

I think it's fine for now but to me not ideal.

@markov00
Copy link
Member

markov00 commented Nov 26, 2021

I think it's fine for now, we can expose those ratio in the future through the theme if we want

@nickofthyme
Copy link
Collaborator Author

@elasticmachine merge upstream

@nickofthyme nickofthyme enabled auto-merge (squash) December 13, 2021 17:38
@nickofthyme nickofthyme merged commit 51f50df into elastic:master Dec 13, 2021
@nickofthyme nickofthyme deleted the custom-legend-width branch December 13, 2021 17:54
nickofthyme pushed a commit that referenced this pull request Dec 17, 2021
# [41.0.0](v40.2.0...v41.0.0) (2021-12-17)

### Bug Fixes

* replace createRef with useRef in Functional Components. ([#1524](#1524)) ([9538417](9538417))

### Code Refactoring

* **goal:** remove deprecated config ([#1408](#1408)) ([312e31d](312e31d))

### Features

* **heatmap:** dark mode with theme controls ([#1406](#1406)) ([f29c8dd](f29c8dd))
* **legend:** custom legend width ([#1467](#1467)) ([51f50df](51f50df))

### BREAKING CHANGES

* **goal:** The `GoalSpec.config` prop is removed. All properties have been moved/renamed under new `Theme.goal` options with the following exceptions:

- `Config.margin` is now controlled by `Theme.chartMargins` and is no longer a margin ratio as before.
- `Config.backgroundColor` is now controlled by `Theme.background.color`, even though it's not yet used.
- `fontFamily` moved into each respective label styles
- `angleStart` and `angleEnd` are moved onto the `GoalSpec` as optional values.
- `sectorLineWidth`, `width` and `height` all removed as they were never used.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
:all Applies to all chart types enhancement New feature or request :legend Legend related issue
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Customizable legend width
3 participants