search

matomo-org / matomo

Empowering People Ethically with the leading open source alternative to Google Analytics that gives you full control over your data. Matomo lets you easily collect data from websites & apps and visualise this data and extract insights. Privacy is built-in. Liberating Web Analytics. Star us on Github? +1. And we love Pull Requests!
https://matomo.org/
GNU General Public License v3.0
19.72k stars 2.63k forks source link

Header row in table with goals metrics visualisations isn't sticky making the report hard to impossible to use #19714

Open tsteur opened 2 years ago

tsteur commented 2 years ago

I'm on /index.php?module=CoreHome&action=index&idSite=12&period=week&date=today#?idSite=1&period=month&date=2022-08-26&category=General_Actions&subcategory=General_Pages

Then I change visualisation to "Display a table with goal metrics".

Then I scroll down.

Expected: The header row stay on top always visible when scrolling down.

Actual: The header row becomes invisible once you scroll down too far.

Then the visualisation becomes almost impossible to use since you never really know which value is for what goal etc. In the regular Table view the header row remains sticky but not for this visualisation.

sgiehl commented 2 years ago

@tsteur That is actually kind of expected behaviour. The problem is, that the sticky header doesn't work in combination with a x-scroll. So this should actually not only be an issue of the goal viz, but all reports that are wider then available space.

peterhashair commented 2 years ago

To completely fix this, maybe we can use a bootstrap 5 library (https://examples.bootstrap-table.com/#extensions/sticky-header.html), but we have to convert the table js quite a bit.

sgiehl commented 2 years ago

@peterhashair Does that lib support having sticky header and a sticky first column?

peterhashair commented 2 years ago

@sgiehl looks like they have https://examples.bootstrap-table.com/#extensions/fixed-columns.html

sgiehl commented 2 years ago

@peterhashair If you have a look at their implementation details, having sticky header and a sticky first column does not work there as well. At least it is no native support. They are using a sticky header only. The sticky first column is "simulated" by copying the full first column into a new table, that is then positioned absolute above the original table. The scrolling of both tables is then also synced using javascript.

That might be something we could also implement on our own. But iirc we didn't implement something like that initially, as it would be a lot more effort. See https://github.com/matomo-org/matomo/pull/18124