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(heatmap): add axis titles #1503

Merged
merged 29 commits into from
Dec 21, 2021
Merged

Conversation

rshen91
Copy link
Contributor

@rshen91 rshen91 commented Nov 23, 2021

Summary

xAxisTitle and yAxisTitle props are available and rendered in the Heatmap chart.
The title style reuse the one provided by the Theme.axes.axisTitle theme configuration.
Together with the visible option, using an empty string will result in a hidden title.

<Heatmap
...
xAxisTitle="Bottom axis"
yAxisTitle="Left axis"
...
/>

Screenshot 2021-12-21 at 14 03 08

BREAKING CHANGE

The heatmap yAxisLabel.padding style type is changed from Pixel | Partial<Padding> to Pixels | Padding.
The heatmap axis labels are now correctly subjected to padding calculations and it will result is slightly modified position of labels.

fix #1531

Details

I've refactored some calculations used to compute the size of the grid based on the style constraints and I've unified the chart elements size calculation within a single selector: computeChartElementSizesSelector.

In accordance with @darnautov I've also removed the gray mask in the lower part the heatmap when brushing the chart:

from:
image
to:
image

Issues

Closes #1221

Checklist

  • The proper chart type label has been added (e.g. :xy, :partition)
  • 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

@rshen91 rshen91 added :heatmap Heatmap/Swimlane chart related issue enhancement New feature or request labels Nov 23, 2021
@rshen91 rshen91 marked this pull request as ready for review November 29, 2021 15:51
Copy link
Collaborator

@nickofthyme nickofthyme left a comment

Choose a reason for hiding this comment

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

Looking good just a few more things to consider.

@rshen91
Copy link
Contributor Author

rshen91 commented Dec 7, 2021

Since Nick's PR is going to be pulling some properties off the theme vs the config, would it be cool to just put the titles on the theme instead of the config? @markov00 and @nickofthyme thoughts?

@markov00
Copy link
Member

markov00 commented Dec 9, 2021

Since Nick's PR is going to be pulling some properties off the theme vs the config, would it be cool to just put the titles on the theme instead of the config? @markov00 and @nickofthyme thoughts?

@rshen91 My preference is to put the title style in the theme and keep the title text as it is today. @nickofthyme ?

@markov00 markov00 self-requested a review December 20, 2021 21:13
@markov00 markov00 changed the title feat(heatmap): Add heatmap titles feat(heatmap): add axis titles Dec 21, 2021
@markov00 markov00 added the :axis Axis related issue label Dec 21, 2021
@markov00 markov00 enabled auto-merge (squash) December 21, 2021 17:45
@markov00 markov00 merged commit a87325d into elastic:master Dec 21, 2021
@rshen91 rshen91 deleted the heatmap-titles branch December 27, 2021 13:28
nickofthyme pushed a commit that referenced this pull request Jan 5, 2022
# [42.0.0](v41.0.1...v42.0.0) (2022-01-05)

### Bug Fixes

* **flamegraph:** solve animation regression occurring with 6db2677 ([#1541](#1541)) ([5ec6037](5ec6037)), closes [#1540](#1540)
* **heatmap:** render empty state ([#1532](#1532)) ([59002df](59002df))
* **waffle:** fix strange 0 text in legend item extra when label is 0 ([#1538](#1538)) ([72224b9](72224b9))

### Features

* **goal:** add valueFormatter for tooltip ([#1529](#1529)) ([8139973](8139973))
* **heatmap:** add axis titles ([#1503](#1503)) ([a87325d](a87325d))
* **types:** improve generic types in specs, and spec prop types ([#1421](#1421)) ([562929e](562929e))

### BREAKING CHANGES

* **types:** The `xAccessor` and `yAccessor` are now required on all xy chart specs. Stronger typing on `data` prop that may cause type errors when using untyped array (i.e. `const arr: never[] = []`). Other minor type changes related to spec types.
* **heatmap:** The heatmap yAxisLabel.padding style type is changed from Pixel | Partial<Padding> to Pixels | Padding. The heatmap axis labels are now correctly subjected to padding calculations and it will result in a slightly different position of labels.

Co-authored-by: Marco Vettorello <vettorello.marco@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
:axis Axis related issue enhancement New feature or request :heatmap Heatmap/Swimlane chart related issue
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Require all font config for the axis title [Heatmap] Add axes titles
3 participants