Modernize Dashboards & Widgets (design, layout system, reports)

[Dominic-Marcelino]

Summary

In order to create more beautiful, modern and clearer Dashboard the whole Dashboard-setup should be modernized. The design-modernization should also be applied to the reports.

This ticket is supposed to be an ongoing list to track ideas and inspiration

This should include

• A new layout system A row-based layout in order to allow different columns per row

• Design-options

  • Custom background colors for widgets and rows for visual separation
  • Font-size settings (e.g for KPI widgets)
  • Conditional colors: change color based on the value (custom colors and limits)

• Editing mode Right now we can view the settings ALWAYS by hovering over a widget. I suppose that customization options should only be displayed when activating an "edit mode". This provides a clearer UI and prevents from changing anything unintentionally

• Hide empty values An option to hide empty values from tables and bar-charts

• Comparable option Add options to display comparable values everywhere (compared to insights view - e.g add graph line from previous month)

• Update data There's already an option to re-fetch the data for a single widget. A button to update all widgets would be lovely

• Modernize UI The graphs (especially the line-graph) feel pretty fashioned and could be modernized (see examples below)

• Save selected time period Right now the analytics period always jumps back to global user-default ("day" by default). For some dashboard that doesn't makes any sense at all. I'd suggest to save the period selected in the editing mode mentioned above

• Limit dashboard for specific sites Custom created dashboards are available on all sites. I'd suppose to add a whitelist and a blacklist option to enable or disable the dashboard just for specific sites

Inspiration

• Plausible Dashboards

• Fanthom

[peterhashair]

@Dominic-Marcelino thank you for the feedback and suggestions, our UX team is currently working on this.

[Dominic-Marcelino]

@Dominic-Marcelino thank you for the feedback and suggestions, our UX team is currently working on this.

@peterhashair awesome 🤩 Is there already some kind of high-level roadmap? Couldn’t find a lot in the milestones

[peterhashair]

@Dominic-Marcelino yeah, it's not really shown on the milestone, I would say you probably look at Matomo 5. x for these changes, but it's definitely on our plans.

[Dominic-Marcelino]

@peterhashair Thanks 🎉☺️

[tomper00]

I would really like to see a custom HTML or perhaps a markdown widget as well, so that you can describe the dashboards better to the users.

[atom-box]

A user contacted us about this:

Question: What is the one thing you’d like to see improved in Matomo and why? Answer: A better user interface, more modern, would be great.

[mattab]

Thanks for creating this issue! We appreciate your input. This issue covers a lot of ground, and it's a bit too broad for us to tackle effectively as is. So, we're going to close it for now.

Here are some related issues: https://github.com/matomo-org/matomo/issues/19669 https://github.com/matomo-org/matomo/issues/8096 and https://github.com/matomo-org/matomo/issues/15515

But don't let this stop you! If you've got specific ideas or improvements related to this topic, feel free to open new issues for each one. That way, we can dive into them in more detail.