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(pivot-table): truncate title and show full in tooltip (DHIS2-14827) #1579

Merged
merged 4 commits into from
Oct 3, 2023

Conversation

HendrikThePendric
Copy link
Contributor

@HendrikThePendric HendrikThePendric commented Sep 13, 2023

Implements DHIS2-14827


Key features

  1. Because we now truncate the title, long filters won't stretch the table horizontally anymore
  2. Once the title gets truncated a tooltip will be available for users to see the full title

Description

Before adding the tooltip functionality, I also addressed a small bug: the max-width for div.title-cell-content didn't take into account the cell padding and border and as such the value was a bit too high.

The tooltip is only added if the title text is overflowing the container.

I also added a story to demo the feature.


Considerations

  • The title cell has 5px padding in all directions. As a result, div.title-cell-content, which is the tooltip anchor element, has 5px of whitespace around it. So the tooltip only shows when hovering the actual text, not the entire table cell. I'm not sure if this is a bug or a feature. I think changing this behaviour should be relatively simple, but just not sure whether we want to.

TODO

  • Upgrade DV to the to-be-released version of @dhis2/analytics so it can benefit form this feature.
  • Decide if we want to keep the padding around the tooltip anchor, and make necessary changes if we don't. WE DECIDED TO FILL OUT THE CELL (see 2a47d1a)

Screenshots

Screenshot 2023-09-13 at 09 48 44

@HendrikThePendric HendrikThePendric force-pushed the DHIS2-14827-pivot-table-header-ellipsis branch from 9aa8776 to 2a47d1a Compare September 14, 2023 15:14
@HendrikThePendric HendrikThePendric force-pushed the DHIS2-14827-pivot-table-header-ellipsis branch from 2a47d1a to adba099 Compare September 25, 2023 14:12
@HendrikThePendric HendrikThePendric force-pushed the DHIS2-14827-pivot-table-header-ellipsis branch from 338b549 to 89de6cf Compare September 27, 2023 09:07
@HendrikThePendric HendrikThePendric force-pushed the DHIS2-14827-pivot-table-header-ellipsis branch from 0e147af to fc1cd4c Compare October 3, 2023 10:08
@HendrikThePendric HendrikThePendric merged commit c37ba2d into master Oct 3, 2023
2 checks passed
@HendrikThePendric HendrikThePendric deleted the DHIS2-14827-pivot-table-header-ellipsis branch October 3, 2023 12:42
dhis2-bot added a commit that referenced this pull request Oct 3, 2023
# [26.1.0](v26.0.21...v26.1.0) (2023-10-03)

### Features

* **pivot-table:** truncate title and show full in tooltip ([#1579](#1579)) ([c37ba2d](c37ba2d))
@dhis2-bot
Copy link
Contributor

🎉 This PR is included in version 26.1.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

@janhenrikoverland janhenrikoverland changed the title feat(pivot-table): truncate title and show full in tooltip feat(pivot-table): truncate title and show full in tooltip (DHIS2-14827) Oct 20, 2023
HendrikThePendric added a commit that referenced this pull request Jan 30, 2024
* feat(pivot-table): truncate title and show full in tooltip

* fix(pivot-table): set padding on hoverable div instead of container th

* fix(pivot-table): correctly show tooltip after resizing the container

* chore: simplify code and remove redundant prop
HendrikThePendric added a commit that referenced this pull request Jan 30, 2024
* feat(pivot-table): truncate title and show full in tooltip

* fix(pivot-table): set padding on hoverable div instead of container th

* fix(pivot-table): correctly show tooltip after resizing the container

* chore: simplify code and remove redundant prop
HendrikThePendric added a commit that referenced this pull request Nov 4, 2024
…1622)

* feat(pivot-table): truncate title and show full in tooltip

* fix(pivot-table): set padding on hoverable div instead of container th

* fix(pivot-table): correctly show tooltip after resizing the container

* chore: simplify code and remove redundant prop

Co-authored-by: Jan Henrik Øverland <[email protected]>
dhis2-bot added a commit that referenced this pull request Nov 4, 2024
# [24.11.0](v24.10.13...v24.11.0) (2024-11-04)

### Features

* **pivot-table:** truncate title and show full in tooltip ([#1579](#1579)) ([#1622](#1622)) ([f62b0c2](f62b0c2))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants