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.

Sign up for GitHub

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

Jump to bottom

feat(heatmap): allow rotation of x axis labels #1514

Merged
merged 41 commits into from
Feb 23, 2022
Merged

feat(heatmap): allow rotation of x axis labels #1514

merged 41 commits into from
Feb 23, 2022

Conversation

rshen91
Copy link
Contributor

@rshen91 rshen91 commented Dec 1, 2021 •
edited by markov00
Loading

Summary

The rotation configuration is available on the theme.heatmap.xAxisLabel theme style to rotate the labels of the X axis from 0 to 90 degree.
The rotation will shrink the chart vertically( and occasionally also horizontally) depending on the length of the labels.
Few changes to the x axis labels are also landed in this PR:

  • categorical labels overflowing the chart boundaries will play a role in shrinking the chart size.
  • the X axis now shows small ticks, center aligned for categorical scale and left aligned for time
  • the time axis ticks are aligned to the right of the ticks
  • time axis labels instead, will not shrink the chart anymore. The number of labels will be reduced gradually to avoid overlaps and overflows. The right edge of the heatmap will always touch the right edge of the rendering area.

BREAKING CHANGES

width, align and baseline style properties are removed from the xAxisLabels and yAxisLabels style of the Heatmap theme.
These properties were not used in the rendering.

Details

Compute the X axis space

Screenshot 2022-02-15 at 19 18 35

The X axis space is computed as the following:
categorical

  • measure all the categorical label sizes
  • compute the rotated boundingbox
  • use the screenspaceMarkerScaleCompressor to compute how much we need to shrink the grid width considering the label positions in the domain and their screen size. I also included the Y axis so that we can take also the maximum label width in the calculation.

time

  • similar to categorical we compute all the label sizes and the rotated bbox
  • we compute a first scale compression considering all the label visible. If that step produces no overlaps between labels and no overflows at the chart edges, we use that result if not we iterate over reducing the number of visible ticks each time by skipping ticks with an increasing cadence. The current tick reduction doesn't follow the multiLayerTimeAxis but in a future step we can include that.

Future possible steps

  • wrap and/or trim horizontal labels into multiple lines within their grid column size
  • reuse the multilayer time axis approach

Issues

Partially solves #1168 (missing the automatic trimming of horizontal labels)

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

@rshen91 rshen91 added :heatmap Heatmap/Swimlane chart related issue enhancement New feature or request labels Dec 7, 2021
@rshen91 rshen91 marked this pull request as ready for review December 7, 2021 22:33
@rshen91 rshen91 changed the title feat(heatmap): allow rotation and truncation of axis labels feat(heatmap): allow rotation, alternating and truncation of axis labels Dec 7, 2021
@rshen91 rshen91 requested a review from markov00 December 9, 2021 15:58
@rshen91
Copy link
Contributor Author

rshen91 commented Dec 27, 2021

jenkins test this

@markov00 markov00 changed the title feat(heatmap): allow rotation, alternating and truncation of axis labels feat(heatmap): allow rotation of x axis labels Feb 15, 2022
monfera
monfera suggested changes Feb 16, 2022
View reviewed changes
Copy link
Contributor

@monfera monfera left a comment

Choose a reason for hiding this comment

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

The overlap (and secondarily, rotating time tick labels in the example) look unintended, conveying less than ideal practice to users

integration/tests/heatmap_stories.test.ts Show resolved Hide resolved
@monfera monfera self-requested a review February 23, 2022 12:45
monfera
monfera approved these changes Feb 23, 2022
View reviewed changes
Copy link
Contributor

@monfera monfera left a comment

Choose a reason for hiding this comment

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

Good for merging once all tests pass

@markov00 markov00 mentioned this pull request Feb 23, 2022
Open
@markov00 markov00 merged commit 2a099e2 into elastic:master Feb 23, 2022
@markov00 markov00 mentioned this pull request Feb 28, 2022
Closed
nickofthyme pushed a commit that referenced this pull request Mar 1, 2022
@rshen91 @markov00 @nickofthyme
feat(heatmap): allow rotation of x axis labels (#1514)
b655156 
The `rotation` configuration is available on the `theme.heatmap.xAxisLabel` theme style to rotate the labels of the X-axis from 0 to 90 degrees. The rotation will shrink the chart vertically( and occasionally also horizontally) depending on the length of the labels.
Few changes to the x-axis labels are also landed in this PR:
- categorical labels overflowing the chart boundaries will play a role in shrinking the chart size.
- the X-axis now shows small ticks, center-aligned for categorical scale and left-aligned for time
- the time axis ticks are aligned to the right of the ticks
- time axis labels instead, will not shrink the chart anymore. The number of labels will be reduced gradually to avoid overlaps and overflows. The right edge of the heatmap will always touch the right edge of the rendering area.

BREAKING CHANGE: `width`, `align`, and `baseline` style properties are removed from the `xAxisLabels` and `yAxisLabels` style of the Heatmap theme.

Co-authored-by: Marco Vettorello <vettorello.marco@gmail.com>
nickofthyme pushed a commit that referenced this pull request Mar 1, 2022
@semantic-release-bot @markov00
chore(release): 44.0.0 [skip ci]
6ebdc53 
# [44.0.0](v43.1.1...v44.0.0) (2022-03-01)

### Bug Fixes

* **axis:** correct tick alignment in ordinal scale with numeric values ([#1609](#1609)) ([915349d](915349d))
* **legend:** width with duplicate nested pie slice labels ([#1585](#1585)) ([1073231](1073231))
* **partition:** consider legend extras when computing the legend size ([#1611](#1611)) ([2078f3d](2078f3d))
* **xy:** dataIndex keeps original data order on small multiples ([#1597](#1597)) ([9e2566c](9e2566c))

### Features

* **api:** expose Predicate enum ([#1574](#1574)) ([1f73eec](1f73eec))
* **heatmap:** allow rotation of x axis labels ([#1514](#1514)) ([b655156](b655156))

### BREAKING CHANGES

* **heatmap:** `width`, `align`, and `baseline` style properties are removed from the `xAxisLabels` and `yAxisLabels` style of the Heatmap theme.

Co-authored-by: Marco Vettorello <vettorello.marco@gmail.com>
@markov00 markov00 mentioned this pull request Mar 4, 2022
Merged
@markov00 markov00 mentioned this pull request Jun 9, 2022
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@monfera monfera monfera approved these changes

@nickofthyme nickofthyme Awaiting requested review from nickofthyme

@markov00 markov00 Awaiting requested review from markov00

Assignees
No one assigned
Labels
breaking change enhancement New feature or request :heatmap Heatmap/Swimlane chart related issue
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@rshen91 @markov00 @monfera