Add reusable widget to display single metric w/ sparkline & evolution percent (+ other changes) #13101

diosmosis · 2018-06-25T02:43:25Z

This PR is not done but is ready for an initial review.

Changes:

Added new single-metric-value widget (angular based).
Add query param filter_last_period_evolution that adds _past/_evolution metrics to any report. (not documented)
Found an issue in compileAngularComponents(). The method uses the scope for an element, but in some cases compileAngularComponents() is called again on the same element (like when reloading a widget). This means that the scope is re-used when compiling a widget again, which in turn means its not possible to destroy angular components/directives. In the dashboard I forced the creation of a new scope, not sure if it's the best way to fix.
Added Report:: getMetricDocumentationForReport() to access metric documentation for a report. Don't need it if an API.getProcessedReport, but that doesn't show the columns from filter_last_period_evolution.
Added a compileAngularComponents() call to widget preview.
Noticed when adding a widget it's reloaded several times (and all widgets w/ the same 'unique ID' are reloaded). Removed the extra reloads.

Note: if you'd rather the widget be rendered server side, let me know, just trying to use angular for all new work.

Fixes #12358

CC @mattab / @tsteur for additional changes made + angular related fixes

…ot grey out the widget in the dashboard manager, even if the widget is used in the dashboard.

…icker).

…evolution parameter.

…implementation.

…view.

…reloads when multiple widgets of the same type are shown.

mattab · 2018-06-26T20:39:35Z

plugins/CoreHome/templates/_angularComponent.twig

@@ -0,0 +1,5 @@
+<{{ componentName }}
+    {% for key, value in componentParameters %}
+    {{ key }}="{{ value|e('html') }}"


the componentName and key should be escaped here to be safe?

👍 might be automatic w/ twig? can't remember, but will double check

mattab · 2018-06-26T20:53:42Z

Feedback:

It's usable and looks very nice to have only one widget with the metric picker 👍
If we move the Sparklines rendering to client side, maybe we should aim to also convert the sparklines twig code to angular, as to avoid having the sparklines logic duplicated. Maybe this would be best done directly in this PR rather than later?
some of the metadata is not displayed yet (percentage sign for rate metrics, currency for revenue metrics),
sometimes the metric is shown empty for some (instead of zero)
is the isReusable flag needed? (the current/desired behavior is to allow adding the same widget multiple times for all widgets)
left a code comment re: maybe missing escaping

diosmosis · 2018-06-26T20:54:50Z

is the isReusable flag needed?

It's used to display the 'Metric' widget w/ black text instead of grey text. Not required, I guess, but I think it's slightly better UX.

…ne sparkline angular component and get rid of need for "past-period" argument to single metric view.

diosmosis · 2018-07-03T05:40:04Z

sometimes the metric is shown empty for some (instead of zero)

Do you remember which metric? Not currently able to reproduce.

diosmosis · 2018-07-03T05:45:27Z

some of the metadata is not displayed yet (percentage sign for rate metrics, currency for revenue metrics),

Some of this is hard to fix. Processed metrics (like percents) I could display via format_metrics=1, but normal metrics like revenue are not currently formatted in API output. I will add a fix in another PR.

diosmosis · 2018-07-23T05:59:37Z

@mattab fixed the revenue issue w/ a hacky fix. Needs review, will be adding tests now.

…sed metrics.

diosmosis · 2018-07-27T04:16:09Z

@tsteur FYI I changed the strategy here to calculate the evolution data on in the component so the new parameter isn't required. There's less backend changes now, the changes that exist are mostly fixes for issues I found.

tsteur · 2018-07-31T03:42:00Z

should be fine @diosmosis 👍

mattab · 2018-07-31T13:15:21Z

@diosmosis Looks good overall, a awesome new feature 👍

Feedback:

KPI metrics for each Goal (Goal conversions, Conversion rate, Revenue). Currently it only has the "overall conversions/revenue.
the overall conversion rate (visits with a completed goal) is missing, not sure if it's expected but it would be good to have
in general when comparing the list of metrics available in the metric picker VS all the metrics listed in https://github.com/innocraft/plugin-CustomReports/pull/56 -> how would it be possible to have more/all metrics available in this widget picker like they are in Custom Reports?
move the "Generic" category above the "Diagnostic" category if possible

diosmosis · 2018-07-31T18:27:14Z

KPI metrics for each Goal (Goal conversions, Conversion rate, Revenue). Currently it only has the "overall conversions/revenue.

The series picker doesn't let you pick more than a metric (ie, you can't pick a metric + an idGoal). I'll put another select for goals when a goal metric is displayed.

in general when comparing the list of metrics available in the metric picker VS all the metrics listed in innocraft/plugin-CustomReports#56 -> how would it be possible to have more/all metrics available in this widget picker like they are in Custom Reports?

This widget just uses the API.get report. Some metrics used in custom reports are probably metrics that aren't saved "standalone" (ie, maybe they're always w/ a specific report?). Ideally we would add these metrics to API.get to show them.

mattab · 2018-07-31T20:23:08Z

The series picker doesn't let you pick more than a metric (ie, you can't pick a metric + an idGoal). I'll put another select for goals when a goal metric is displayed.

was hoping we could simply list all the metrics in the list of metrics, ie if the goal name is Affiliate click we'd have the 3 metrics availble: Affiliate click conversions, Affiliate click conversion rate, Affiliate click Revenue. Would this work/doable?

diosmosis · 2018-07-31T20:53:53Z

@mattab I can probably hack something in like that, but it would create a very large series picker.

mattab · 2018-07-31T21:28:04Z

It will be OK to have a large picker as long as it's not buggy. in the future, we'll improve the metric picker so it looks like the custom reports metric picker.

diosmosis · 2018-08-01T03:28:16Z

@mattab added goal metrics, deserves more tests since it's a hacky change. (did not modify the API)

diosmosis · 2018-08-01T03:53:35Z

Moved the category:

diosmosis · 2018-08-02T02:28:26Z

@mattab approved on slack, merging after fixing build

… percent (+ other changes) (matomo-org#13101) * Add empty metric for single metric view. * Add new isReusable property to widget metadata & if set to true, do not grey out the widget in the dashboard manager, even if the widget is used in the dashboard. * Initial working version of single metric view. * Get single metric view widget to work and look correctly (no series picker). * Add series picker to single metric widget and add filter_last_period_evolution parameter. * Persist metric change through dashboard widget parameter saving. * Loading state for single metric view. * Make new evolution param work on processed reports + tweak component implementation. * Tweak CSS and make sure angular components are compiled in widget preview. * Make component work with widget preview and avoid unnecessary widget reloads when multiple widgets of the same type are shown. * Generalize JS lastN range period computing and use to create standalone sparkline angular component and get rid of need for "past-period" argument to single metric view. * Add format_metrics: "1" to API.get method. * Add escaping to _angularComponent.twig. * hacky fix for formatting revenue columns * Format past data values & allow evolution to be calculated for processed metrics. * filter evolution changes * Fix issue in subtable recursion for processed metric computation & metric formatting + add new processed metric compute hooks to fix bug in evolution calculation on subtables. * remove isReusable property. * attempting to change strategy * simpler solution that does not require backend changes * remove unneeded code + fix issue w/ formatted metrics * remove some more unneeded code * write UI test * add new screenshots * Add all goals to single metric view picker. * move category * fix test * fixing more tests * Fixing some UI tests. * Update more screenshots. * update two more screenshots

diosmosis added 9 commits June 21, 2018 22:35

Add empty metric for single metric view.

24bca20

Add new isReusable property to widget metadata & if set to true, do n…

b8caff1

…ot grey out the widget in the dashboard manager, even if the widget is used in the dashboard.

Initial working version of single metric view.

368dcc4

Get single metric view widget to work and look correctly (no series p…

ef13cb0

…icker).

Add series picker to single metric widget and add filter_last_period_…

e07008c

…evolution parameter.

Persist metric change through dashboard widget parameter saving.

e35d6a9

Loading state for single metric view.

c76e283

Make new evolution param work on processed reports + tweak component …

8439177

…implementation.

Tweak CSS and make sure angular components are compiled in widget pre…

ee534b4

…view.

diosmosis added this to the 3.6.0 milestone Jun 25, 2018

Make component work with widget preview and avoid unnecessary widget …

b9b0914

…reloads when multiple widgets of the same type are shown.

diosmosis mentioned this pull request Jun 25, 2018

New widget "Generic > Metric" to display any of the metric / KPI available in Matomo #12358

Closed

mattab reviewed Jun 26, 2018

View reviewed changes

diosmosis added 2 commits June 27, 2018 23:55

Generalize JS lastN range period computing and use to create standalo…

c0f6f12

…ne sparkline angular component and get rid of need for "past-period" argument to single metric view.

Add format_metrics: "1" to API.get method.

47b87a7

Add escaping to _angularComponent.twig.

cd8e575

diosmosis added 2 commits July 22, 2018 22:34

Merge branch '3.x-dev' into 12358-single-metric-widget

975370d

hacky fix for formatting revenue columns

c3e3193

diosmosis added 3 commits July 23, 2018 13:04

Format past data values & allow evolution to be calculated for proces…

83bebf8

…sed metrics.

Merge branch '3.x-dev' into 12358-single-metric-widget

4b4c54b

filter evolution changes

9108562

diosmosis added 3 commits July 26, 2018 20:37

simpler solution that does not require backend changes

8b52271

remove unneeded code + fix issue w/ formatted metrics

1714182

remove some more unneeded code

d242122

write UI test

bea73b2

diosmosis removed the Pull Request WIP Indicates the current pull request is still work in progress and not ready yet for a review. label Jul 27, 2018

diosmosis added 2 commits July 27, 2018 13:40

add new screenshots

1c17563

Merge branch '3.x-dev' into 12358-single-metric-widget

070ec2d

Add all goals to single metric view picker.

088a762

move category

e25e360

diosmosis added 2 commits August 1, 2018 17:53

Merge branch '3.x-dev' into 12358-single-metric-widget

37c280d

fix test

ed41604

diosmosis added 3 commits August 1, 2018 19:32

fixing more tests

a020d3d

Fixing some UI tests.

cc35ae6

Update more screenshots.

e56e0e2

mattab mentioned this pull request Aug 2, 2018

Select Goal conversion metrics for each goal in the Graphs metrics picker #3528

Closed

mattab approved these changes Aug 2, 2018

View reviewed changes

update two more screenshots

4898f32

diosmosis merged commit cb1d83d into 3.x-dev Aug 2, 2018

diosmosis deleted the 12358-single-metric-widget branch August 2, 2018 22:57

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add reusable widget to display single metric w/ sparkline & evolution percent (+ other changes) #13101

Add reusable widget to display single metric w/ sparkline & evolution percent (+ other changes) #13101

diosmosis commented Jun 25, 2018 •

edited

mattab Jun 26, 2018

diosmosis Jun 26, 2018

mattab commented Jun 26, 2018

diosmosis commented Jun 26, 2018

diosmosis commented Jul 3, 2018

diosmosis commented Jul 3, 2018

diosmosis commented Jul 23, 2018

diosmosis commented Jul 27, 2018

tsteur commented Jul 31, 2018

mattab commented Jul 31, 2018

diosmosis commented Jul 31, 2018

mattab commented Jul 31, 2018

diosmosis commented Jul 31, 2018

mattab commented Jul 31, 2018

diosmosis commented Aug 1, 2018

diosmosis commented Aug 1, 2018

diosmosis commented Aug 2, 2018

Navigation Menu

Add reusable widget to display single metric w/ sparkline & evolution percent (+ other changes) #13101

Add reusable widget to display single metric w/ sparkline & evolution percent (+ other changes) #13101

Conversation

diosmosis commented Jun 25, 2018 • edited

mattab Jun 26, 2018

Choose a reason for hiding this comment

diosmosis Jun 26, 2018

Choose a reason for hiding this comment

mattab commented Jun 26, 2018

diosmosis commented Jun 26, 2018

diosmosis commented Jul 3, 2018

diosmosis commented Jul 3, 2018

diosmosis commented Jul 23, 2018

diosmosis commented Jul 27, 2018

tsteur commented Jul 31, 2018

mattab commented Jul 31, 2018

diosmosis commented Jul 31, 2018

mattab commented Jul 31, 2018

diosmosis commented Jul 31, 2018

mattab commented Jul 31, 2018

diosmosis commented Aug 1, 2018

diosmosis commented Aug 1, 2018

diosmosis commented Aug 2, 2018

diosmosis commented Jun 25, 2018 •

edited