Skip to content

feat(legend): custom legend width#1467

Merged
nickofthyme merged 6 commits intoelastic:masterfrom
nickofthyme:custom-legend-width
Dec 13, 2021
Merged

feat(legend): custom legend width#1467
nickofthyme merged 6 commits intoelastic:masterfrom
nickofthyme:custom-legend-width

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
Collaborator

@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
Collaborator

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