Create a new widget for each KPI metric from the "Visits overview" widget #12358

Currently we have a widget called "Visits overview" which lists several KPIs with their sparkline, KPI value and metric name. It looks like this:

This widget is very useful providing some of the key APIs. However in some cases, one only wants to see 2 or 3 or 4 of these KPIs in the dashboard, and not the whole list.

-> The goal of this issue is to create a new set widgets, one per KPI, so that users can add only the metric they want to their dashboard. This will allow for greater flexibility and more awesome looking and useful dashboards.

Additional notes:

• We should have one widget "Visits" and also one widget "Unique Visitors" (rather than one widget including both, as it is currently in the "Visits overview" widget)
• We should have a widget for "Total actions" on top of the existing metric "actions per visit (pageviews, downloads, outlinks, internal site searches)"
• If possible, the solution to split the "overview" widget into multiple widgets, would be generic solution, and we would also provide a new widget for each of the Goal conversions. Currently we have a widget for each goal showing Graph + KPIs + detailed report, and we'd like to have 2 (or 3) new widgets per goal: "Goal XYZ: Conversions" and "Goal XYZ: Conversion rate", and if enabled for this goal: "Goal XYZ: Revenue"

@mattab This is basically adding a widget for every metric, correct? Wouldn't that create clutter in the dashboard manager? And a single widget w/ just that metric and the title above it seems like it wouldn't be very visible in the dashboard. Feels like there needs to be more thought put into the UI?

Yes, a new widget for each metric.

Maybe if we put all these new widgets under a new category "Metrics" then it wouldn't create clutter (although the lits of widgets in this category would be huge).

And a single widget w/ just that metric and the title above it seems like it wouldn't be very visible in the dashboard.

For now we could just replicate the current sparkline + metric design (as per screenshot above). Maybe later we could tweak the design and show the metric in bigger font or so. But for now we can keep it simple. The goal of this issue is to bring a lot more flexibility to the dashboards by letting people pick and choose the metrics that are valuable to them. It was requested a few times by customers/users.

What about a new type of widget for "single metric view" that would have the metric value center in large text w/ the sparkline underneath? The widget would have a metric picker to allow switching or showing multiple metrics. Then we could create a single one of these widgets per category (eg, Events > Metrics, Actions > Metrics, Visitors > Metrics, etc.). Only possible downside is if a user wants to have visits in one widget & visitors in another widget, they wouldn't be able to (since the 'Metrics' widgets would be "per plugin".

Idk if it's too much work (doesn't seem like too much). Can do the simple solution but it seems like we can do better.

the goal of this feature is to let people build the custom dashboard they need. The requirement is only about being to add several widgets for each metric, and it's good enough for now to just reuse our existing widget style. Maybe after this is done we can build a more complex/useful visualisation, but we want to get this step done first as it's quickly done and very valuable.

FYI: Adding heaps of new widgets can make the UI quite slow. I don't know how many will be added, but there will be potentially a LOT of data transferred to the UI through the getWidgetMetadata and potentially getReportingPagesMetadata (or similar). It might be fine but is something that could be checked.

I was thinking of one widget otherwise as well that allows to switch the metric and saves the selected in the dashboard parameters. I wouldn't even have it per plugin but just overall...

Problem w/ overall (and also per plugin), is that you'd only be able to add that widget once, and I think users want to have, eg, Visits in one widget, Visitors in another widget, etc. I think this points to a fundamental limitation in the current dashboard implementation, in that widget types (ie, graph/metric/whatever) are tied to the actual report that's displayed.

(fyi a same widget can be added multiple times. although it is greyed out in the list, it can be re-added)

Ah ok, in that case, I'll try w/ a single widget as @tsteur suggests and if it doesn't work, see if having every metric as a widget works.

Here is an initial version of the widget (w/o metric picker):

What are your thoughts? (cc @matomo-org/core-team )

Looks good to me :+1:

regarding how would metric picker work, would it be available via a footer cog icon maybe, or another idea?

@mattab I already implemented the metric picker here: https://github.com/matomo-org/matomo/pull/13101

Can you take a look?