Skip to content

Conversation

@sanne-san
Copy link
Contributor

@sanne-san sanne-san commented Dec 1, 2025

Changes

  • Add percentage values to the reports that are currently lacking this.
  • Change the way percentage is displayed to show only on hover (and tap on mobile). On the dashboard, all report percentages show when hovering the report. In the detailed breakdown, hovering on a row shows the percentage.
  • Remove tooltip for all values except the ones that are abbreviated. The tooltip is still shown for all metrics in comparison mode.
  • In the detailed breakdown, abbreviated numbers are displayed in full when hovering its corresponding table row.
  • Render tooltip via portal as it doesn't play nice with the overflow:hidden class needed to make the sliding hover effect work.
  • Update tooltip style, including removing the arrow for a more modern feel.
  • Remove the logic that hides the Details button when all items are visible on the dashboard, so the detailed breakdown can be viewed at all times.
  • Improved detailed breakdown modal's responsiveness; the inner table is now scrollable, rather than the entire modal.
CleanShot.2025-12-11.at.13.27.17.mp4

Tests

  • Automated tests have been added

Changelog

  • Entry has been added to changelog

Documentation

  • This change does not need a documentation update

Dark mode

  • The UI has been tested both in dark and light mode

@github-actions
Copy link

github-actions bot commented Dec 1, 2025

Preview environment👷🏼‍♀️🏗️
PR-5923

@sanne-san sanne-san changed the title Update report percentages on dashboard and details view WIP - Update report percentages on dashboard and details view Dec 1, 2025
@sanne-san sanne-san force-pushed the sanne-report-percentages branch from f11a50c to bd04d96 Compare December 1, 2025 14:20
@sanne-san sanne-san force-pushed the sanne-report-percentages branch 2 times, most recently from 939409c to 09f0011 Compare December 8, 2025 13:07
- Enable horizontal scroll for details modal on mobile
- Add responsive spacing and positioning to modal
@sanne-san sanne-san force-pushed the sanne-report-percentages branch from 09f0011 to 5360b49 Compare December 8, 2025 13:13
@sanne-san sanne-san force-pushed the sanne-report-percentages branch from 680d2dc to 8628a99 Compare December 9, 2025 12:46
@sanne-san sanne-san force-pushed the sanne-report-percentages branch from fe9b493 to 53b4bdf Compare December 11, 2025 10:43
@sanne-san sanne-san force-pushed the sanne-report-percentages branch from 741cd5e to db70e69 Compare December 11, 2025 11:58
@sanne-san sanne-san changed the title WIP - Update report percentages on dashboard and details view Add report percentages to dashboard and details view Dec 11, 2025
@sanne-san sanne-san marked this pull request as ready for review December 11, 2025 12:16
@sanne-san sanne-san requested a review from a team December 11, 2025 12:34
- Update tests to expect correct percentages (≤100%) when imported data is included. These tests will fail until the percentage calculation bug is fixed, documenting the expected behavior.
@sanne-san sanne-san added this pull request to the merge queue Dec 16, 2025
@github-merge-queue github-merge-queue bot removed this pull request from the merge queue due to failed status checks Dec 16, 2025
@sanne-san sanne-san added this pull request to the merge queue Dec 16, 2025
@github-merge-queue github-merge-queue bot removed this pull request from the merge queue due to failed status checks Dec 16, 2025
@sanne-san sanne-san added this pull request to the merge queue Dec 16, 2025
github-merge-queue bot pushed a commit that referenced this pull request Dec 16, 2025
* Update report percentages on dashboard and details view

* Add percentages to Countries, Regions, and Cities reports

* Add percentages to Channels, Sources, and UTM reports

* Add percentages to top pages, entry pages, and exit pages reports

* Update tests to include percentages

* Change dashboard copy from title case to sentence case

* Update details modal style

* Make animations snappier

* Introduce max height to modal and make inner content scrollable

* Improve modal mobile design

- Enable horizontal scroll for details modal on mobile
- Add responsive spacing and positioning to modal

* Added mobile tap behavior to external link in list report

* Show tooltips only when in comparison mode or when the number is abbreviated

* remove previously added showTooltip prop

- This isn't needed anymore since we now handle the tooltip logic in the MetricValue component

* Show long format upon hovering detailed view metrics

* Added mobile tapping behaviour to detailed view

* Added percentages to all detailed views

* Add mobile swipe-to-close behavior for modal

* Adjust sensitivity of modal drag to close

* Use hammerjs for swipe-to-close modal behaviour

* Prevent dragging if gesture starts inside table

* Show 2 decimal places for percentages < 0.1% across dashboard

* Adjust dark mode styles

* Add hover effect to external link icon

* Update tests to expect two-decimal percentages

* Undo hammer install and revert to old modal styling

* Remove CR and % columns from goals and custom props reports on dashboard, and show on hover in detailed view

* Remove unused constants

* Undo conversion rate on hover behaviour

- Unlike percentages, CR should show permanently.

* Show percentages permanently in custom props detailed view

* Adjust width of conversion metrics column

* Updated metric-value test

* Update top-bar test

* Added changelog entry

* Fix test expectations for percentages with imported data

- Update tests to expect correct percentages (≤100%) when imported data is included. These tests will fail until the percentage calculation bug is fixed, documenting the expected behavior.

* Add imported_visitors to tests to ensure correct total_visitors calculation

* Correct imported_visitors count in test
Merged via the queue into master with commit dfeda94 Dec 16, 2025
16 checks passed
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.

3 participants