Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 35 commits into from Aug 2, 2018

Conversation

Projects
None yet
3 participants
@diosmosis
Copy link
Member

commented Jun 25, 2018

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

image

image

Make component work with widget preview and avoid unnecessary widget …
…reloads when multiple widgets of the same type are shown.
@@ -0,0 +1,5 @@
<{{ componentName }}
{% for key, value in componentParameters %}
{{ key }}="{{ value|e('html') }}"

This comment has been minimized.

Copy link
@mattab

mattab Jun 26, 2018

Member

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

This comment has been minimized.

Copy link
@diosmosis

diosmosis Jun 26, 2018

Author Member

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

@mattab

This comment has been minimized.

Copy link
Member

commented Jun 26, 2018

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

This comment has been minimized.

Copy link
Member Author

commented Jun 26, 2018

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.

diosmosis added some commits Jun 28, 2018

Generalize JS lastN range period computing and use to create standalo…
…ne sparkline angular component and get rid of need for "past-period" argument to single metric view.
@diosmosis

This comment has been minimized.

Copy link
Member Author

commented Jul 3, 2018

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

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

@diosmosis

This comment has been minimized.

Copy link
Member Author

commented Jul 3, 2018

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

This comment has been minimized.

Copy link
Member Author

commented Jul 23, 2018

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

@diosmosis

This comment has been minimized.

Copy link
Member Author

commented Jul 27, 2018

@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

This comment has been minimized.

Copy link
Member

commented Jul 31, 2018

should be fine @diosmosis 👍

@mattab

This comment has been minimized.

Copy link
Member

commented Jul 31, 2018

@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 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?
  • move the "Generic" category above the "Diagnostic" category if possible
@diosmosis

This comment has been minimized.

Copy link
Member Author

commented Jul 31, 2018

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

This comment has been minimized.

Copy link
Member

commented Jul 31, 2018

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

This comment has been minimized.

Copy link
Member Author

commented Jul 31, 2018

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

@mattab

This comment has been minimized.

Copy link
Member

commented Jul 31, 2018

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

This comment has been minimized.

Copy link
Member Author

commented Aug 1, 2018

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

@diosmosis

This comment has been minimized.

Copy link
Member Author

commented Aug 1, 2018

Moved the category:

image

@diosmosis

This comment has been minimized.

Copy link
Member Author

commented Aug 2, 2018

@mattab approved on slack, merging after fixing build

diosmosis added some commits Aug 2, 2018

@mattab

mattab approved these changes Aug 2, 2018

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

0 of 2 checks passed

continuous-integration/travis-ci/pr The Travis CI build could not complete due to an error
Details
continuous-integration/travis-ci/push The Travis CI build could not complete due to an error
Details

@diosmosis diosmosis deleted the 12358-single-metric-widget branch Aug 2, 2018

InfinityVoid added a commit to InfinityVoid/matomo that referenced this pull request Oct 11, 2018

Add reusable widget to display single metric w/ sparkline & evolution…
… 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.