Commit Graph

281 Commits

Author SHA1 Message Date
RobertJoonas
0541098330
Make the ListReport component more flexible (#3078)
* refactor ListReport

Pass a 'getFilterFor' function instead of a 'filter' object to ListReport

* Keep the statsBoxClass in one place only

* add classname prop to MoreLink

* define metric structs as ListReport inputs

* Fix a bug

If the query changes, we also want to reset the eventListener function.
Otherwise we keep calling an outdated function that fetches old data.

* fix CI
2023-07-06 17:29:08 +03:00
hq1
01fba1f34b
Bump funnel max size to 8 steps (#3094)
* Bump max funnel size to 8 steps

* Improve chart rendering for small screens/large funnels
2023-07-04 12:07:24 +02:00
hq1
ade437c085
Evaluate ephemeral funnels before saving (#3097)
* PoC: evaluate funnel on step selection

* Adjust test to actually _select_ steps

* Throttle and test ephemeral funnel evaluation

* Format compact percentages server-side

At this point it's pointless to duplicate this;
all the primitives exist in the API in case the client
wants a different representation.
2023-07-04 12:07:16 +02:00
hq1
4ac83b6e5d
Reconfigure live websocket (#3087)
* Dynamically set :domain for the live socket

Ref: https://github.com/phoenixframework/phoenix_live_view/pull/2715

* Make runtime config raise before the user ends up in a reconnect loop

* hall of shame: remove console.info remnant

* Check origin on live websocket

* Get rid of single pipe
2023-06-28 10:16:32 +02:00
hq1
bbedeff683
Implement Funnels view on dashboard (#3066)
* Add Funnel react component

assets/js/dashboard/stats/behaviours/funnel.js - restored from:

98a76cbd Remove console.info calls
d94db99d Convert Funnel class component into a functional one
028036ad Review comments
3067a940 Stop doing maths in react
73407cc3 Fix error handling when local storage gets corrupted
e8c6fc52 Format numbers on funnel labels
c815709f Reorganize component responsibility
7a88fe44 Outline basic error handling
94caed7c Chart styling updates
4514608a Add percentages to funnel
d622c32d Add funnel picker

Co-authored-by: Uku Taht <uku.taht@gmail.com>

* Pass funnels list to react via data-funnels

* Implement Funnels react API

lib/plausible_web/controllers/api/stats_controller.ex - restored from:

f36ad234 Adjust to Plausible.Stats interface
9b532273 Test funnel stats controller
028036ad Review comments
bea3725f Remove IO.inspect
7a88fe44 Outline basic error handling
c8ae3eaf Move Funnels to StatsController and use base query
667cf222 Put private functions at the bottom

* Tweak funnel presentation

* Handle errors at the top

* Do not register DataLabels plugin globally

or else all the existing charts are affected

* Calculate drop-off percentage evaluating funnels

* Tweak dark mode + implement nicer tooltips

* Make currently selected funnel bold in the picker

* Count user_ids not session_ids when evaluating funnels

So if a visitor goes:

1. Start session
2. Complete funnel step 1
3. Inactive for 30 minutes
4. Complete funnel step 2

We would not be able to track this funnel completion because of the session timeout.
We like to o measure this as funnel completion even though the session expired in the middle.

cc @ukutaht

* Add extra properties to the funnels API

cc @ukutaht

* Improve tooltips so that step to data is rendered

* Change tooltip number formatting

* Remove debugging remnants

* Quick & dirty mobile view

* Fix mobile view: tweak dark mode & funnel switching

* Ignore DOMException: the operation was aborted

Otherwise this sometimes flashes the space shuttle
screen when navigating quickly via a keyboard.

* Format percentages on the main chart

* Close missing tag 🙈

* Revert "Close missing tag 🙈"

This reverts commit 9c2f970e22fd7e2980503242b414f42ce8bce1d2.

* Use jsx to render funnel tooltip

To get markup validated via lsp mostly...

* Fixup: s/class/className

* Fix className interpolation

* Add a ruler to the tooltip

* Tweak funnel chart style

* Fix font distortion issue on chart/canvas labels

* s/class/className

* Put "Set up funnels" link behind a feature flag

* Refactor internal selection storage

Getting ready for live funnel evaluation

* Don't try to connect LV socket if there's no CRSF token set up

This is perfectly okay for some of the templates/layouts.

* Fix up funnel creation typespecs

Unfortunately we can't define a type with literal string keys,
hence this must suffice.

* Use uniq over count/distinct

* Revert JSX in tooltips

Ref: https://github.com/plausible/analytics/pull/3066#discussion_r1241891155

* Remove the extra query for counting all visitors

cc @ukutaht

* Add premium notice

---------

Co-authored-by: Uku Taht <uku.taht@gmail.com>
2023-06-27 10:04:35 +02:00
Vini Brasil
b97290b5cf
Add revenue metrics to top stats (#3059)
This commit adds revenue data to top stats. Average and total are displayed when filtering by a revenue goal (or many if they have the same currency set).
2023-06-22 19:36:43 +01:00
Vini Brasil
8f6224b5de
Revenue tracking: goal conversions and tracker script (#3019)
* Add revenue average and total to Goal Conversions

* Add revenue option to tracker script

* Simplify revenue tracker script
2023-06-14 10:23:11 +01:00
hq1
c7b8a8ef27
Bugfix for #3005 (#3025)
* Revert "Revert "UI groundwork: Conversions to Behaviors (#3005)" (#3024)"

This reverts commit dc0853bac7.

* Move ref back to LazyLoader container
2023-06-13 12:26:33 +02:00
hq1
dc0853bac7
Revert "UI groundwork: Conversions to Behaviors (#3005)" (#3024)
This reverts commit ba19f9530e.
2023-06-13 12:05:13 +02:00
RobertJoonas
ba19f9530e
UI groundwork: Conversions to Behaviors (#3005)
* copy relevant files from b2ace16540

* make it work and set site.funnels to empty list

* make Behaviours a functional component

* add UI for a setup hint and always display conversions by default

* cherry-pick migration commit

* update site schema with new fields

* backend: implement disable-feature action

* switch between tabs in the behaviors section

Introduces template components to build props and funnels on. Both
only show a setup notice atm, and both are behind feature flags.

* extend API for disabling props and funnels

* render feature setup note directly from the Behaviours component

* fix UI behavior when features are hidden

* update setup notices

* add conversions feature switch to Site Settings > Goals

* mix format

* remove IO.inspect

* change setup notice - use buttons + popup confirmation

* optimize for light mode

* restrict access to setup notices

* some styling improvements

* allow super-admins to enable/disable features

* only show conversions (last 30min) in realtime mode

* use shorter display names for tabs

* optimize for mobile screens

* note about sending custom events

* changelog update + fix CI

* change HTTP verb for the disable-feature action

* change UI label for show/hide goals
2023-06-13 08:16:38 +02:00
RobertJoonas
6c907cbf42
Fix favicon request URLS (#2976)
Also use the favicon.ex proxy in referrer drilldown
2023-05-29 10:30:03 +03:00
Uku Taht
eec842c46b
Remove visits_metric feature flag (#2898)
* Remove `visits_metric` feature flag

* Fix credo warning
2023-05-16 11:58:40 +02:00
Vini Brasil
30465aaaf4
Add percentage difference back to default view (#2895)
This commit brings back percentage arrows to default view. These were
removed by the recent comparisons work, and we've had reports of people
missing it. As we haven't noticed any difference in performance, I've
decided to revert that change.
2023-05-04 10:42:48 +01:00
Vini Brasil
eb6baa92a3
Show imported icon only when querying imported ranges (#2892)
This commit updates the imported 'G' icon, so that it appears only when
querying or comparing a range with imported data. By hiding the icon in
all other cases, users will see it only when they can actually click on
it.
2023-05-03 09:46:13 +01:00
Vini Brasil
990447ff74
Ensure comparison line Y axis scale matches main plot (#2884)
Previously, the comparison line could sometimes be displayed with a
different scale than the main plot due to the maxTicksLimit option not
being fixed and changing based on the data. This commit fixes the issue
by setting the maxTicksLimit value to 8 in the graph settings instead of
for each individual axis.

Additionally, a callback that attempted to dynamically change the Y axis
ticks while resizing has been removed. As the graph has a fixed height,
dynamically resizing the Y axis no longer makes sense.
2023-05-02 09:30:55 +01:00
RobertJoonas
caeff41932
Prop filter modal (#2841)
* Add PropFilterModal (only UI)

* small variable refactor

* allow selecting prop value filter type

* allow selecting only one prop_key

* allow selecting many prop_values only when prop_key selected

* handle submitting filter

* get applied filters from query + remove option

* change prop filter label format

* support member and not_member filter types for pageview props

* show (none) value in filter suggestions

* refactor zip_results/4 and remove unused code

* fix displaying (none) values in goals section prop breakdown

* remove unnecessary functionality

* fix bug: returning prop names for goal :member filter

* fix bug: submitting regular filter modal with Enter key

* bugfix: disallow opening prop filter modal when feature flag disabled

* mix format

* break selected combobox values into multiple lines

* fix useEffect behavior for focusing on prop_key field

* support submitting prop filter with Enter key

* refactor getFormState in PropFilterModal

* separate fetchPropKey and fetchPropValue functions

* Allow querying props for pageview goals

* Make the internal props API only return a list of props (not map)
* Separate function for fetching all props in Stats API goal breakdown (this returns a map as before)

* ditch state for keeping search bar visible

* group by event_name in db query
2023-04-27 14:09:33 +03:00
Vini Brasil
8dc8423319
Prepare Comparisons for release (#2873)
This pull request removes the comparisons feature flag, making it visible to all users. It also removes percentages from top stats in default view, leaving those for the comparison view only.
2023-04-26 12:22:33 +01:00
Uku Taht
cc5c795fd6
Add more spacing for graph controls (#2878) 2023-04-26 10:24:56 +02:00
Vini Brasil
9f036d3915
Show detailed comparison dates in top stats (#2804)
* Pass comparison_query as argument to top stats functions

* Add comparison values and dates to top stats API

* Display comparison dates and values in top stats

* Rename function to renderPercentageComparison

* Create component to do conditional rendering

* DRY date range formatting function

---------

Co-authored-by: Uku Taht <uku.taht@gmail.com>
2023-04-11 09:59:10 -03:00
Uku Taht
e672ea66ec
Frontend timezone issues (#2810)
* Use dayjs with UTC plugin for date-formatter

* Remove 'toHuman' function

* Use dayjs dates in Datepicker component

* Use util/date.js functions in date formatter

* Remove `fromJSDate`

* Use formatISO instead of raw dayjs formatter
2023-04-07 09:56:02 -03:00
RobertJoonas
7204e470a8
Filter modal refactor (#2806)
* Refactor: FilterModal -> RegularFilterModal

* Rename filter.js to regular-filter-modal.js

* Refactor: extract FilterTypeSelector component

* fix undefined order in test

* classNames function style improvement
2023-04-05 16:20:35 +01:00
Uku Taht
71e4d228c0
Escape pipes in goal names (#2814)
* Escape pipes in goal names

* Apply suggestions from code review

Use ~S sigil for better readability

Co-authored-by: Vini Brasil <vini@hey.com>

---------

Co-authored-by: Vini Brasil <vini@hey.com>
2023-04-05 12:59:25 +03:00
Uku Taht
9a4c4f46bb
Remove empty filters from suggestions query (#2801) 2023-03-29 09:45:58 -03:00
Uku Taht
70f1c6538d
Fix open state in combobox (#2797)
* Fix open state in combobox

* Improve filter suggestions when using the `contains` filter

* Support contains filter type for utm filter group

* Remove console.log
2023-03-28 20:06:37 +02:00
Uku Taht
46048e50f7
Support multiple filters - frontend (#2773)
* Wrap Plausible.Stats.Filters with unit tests

* Parse `member` filter type

* Support for `member` filter in `aggregate_time_on_page`

* Support `not_member` filter type

* Support `matches_member` and `not_matches_member` filters

* Extract util module for React filters

* Implement Combobox from scratch with no libs

* Support multple filter clauses in combobox

* Don't use browser / os in version label

* Show highlighted option in combobox

* WIP

* Fix location filters outside filter modal

* Align open/close behaviour with react-select

* Styling updates for combobox

* Add support for wildcards in Combobox

* Implement keybindings for combobox

* Allow free choice inputs in combobox

* Rename 'Save filter' -> Apply filter

* Remove TODO comment

* Clean up some rebase mistakes

* Rename `allowWildcard` -> `freeChoice`

* Dark mode fixes

* Remove hint from filter modal

* Escape pipe character in filter modal

* Do not allow selecting duplicate options in combobox

* Escape brackets in `page_regex/1`

* Fix disabled style in dark mode

* Add regex fallback for safari

* Show no matches found when visibleOptions is empty

* Disable enter key when no visible options

* Do not submit empty form fields

* Remove unnecessary setOpen(true)
2023-03-27 16:51:31 +03:00
Vini Brasil
87a63fe28a
Custom comparison mode (#2753)
This commit implements the custom comparison mode using a date range.
2023-03-22 09:31:44 -03:00
RobertJoonas
ad3edbfb9a
Bug fix - show views_per_visit when stats include imported data (#2738)
* show views_per_visit with imported data

* use optional chaining instead
2023-03-10 10:28:01 +02:00
RobertJoonas
874d664521
Add the new Views per Visit metric to dashboard Top Stats and CSV export (#2728)
* globally rename 'pages_per_visit' to 'views_per_visit'

* change the order of top stats

* rename 'Visits' to 'Total visits' in the UI

* add views_per_visit to UI

* put the new metric under a feature flag

* add new metric to CSV export under feature flag

* mix format

* use only one feature flag
2023-03-07 13:58:36 +02:00
Uku Taht
43bf7dd09f
Use user-agent instead of screen_width to get device type (#2711)
* Use user-agent instead of screen_width to get device type

Co-authored-by: eriknakata <erik.nakata5@gmail.com>

* Fix credo

* Log on unhandled UAInspector device type

* Make 'browser' the default tab in devices report

* Remove device tooltip

* Remove screen_width from ingestion completely

* Remove browserstack harness, run playwright directly

* Select meta key based on OS platform

* Run CI tests in parallel

* Improve device match readability

* Add changelog

---------

Co-authored-by: eriknakata <erik.nakata5@gmail.com>
2023-03-02 11:04:01 +01:00
RobertJoonas
bc557b78fd
Add visits metric under a feature flag (#2687)
* Add visits metric and make it graphable

* include visits metric in csv export (visitors.csv)

* put visits under a feature flag (CSV export)

* feature flag for displaying visits on the dashboard

* fix formatting

* add visits metric to top stats (fix)

* fix imported_test to expect visits metric included

* fix formatting
2023-02-22 18:10:18 +02:00
Vini Brasil
858687c77b
Fix graph z-index property (#2699)
* Revert "Fix graph element z-index (#2698)"

This reverts commit 35ab26308d.

* Revert "Fix interval selector z-index (#2696)"

This reverts commit c307057386.

* Set graph z-index to zero

* Add as={Fragment} to Transition component
2023-02-22 15:54:24 +02:00
Vini Brasil
35ab26308d
Fix graph element z-index (#2698)
Previously, the graph element was overlapping with other UI elements
such as the period input. This commit fixes this issue by setting the
z-index of the graph element to 0, which moves it behind other elements
in the stacking order.
2023-02-22 09:23:38 -03:00
Vini Brasil
c307057386
Fix interval selector z-index (#2696)
This commit fixes a bug where the interval selector was not clickable
because it was behind the graph.
2023-02-21 13:57:44 -03:00
Vini Brasil
db9b4b81fb
Refactor: Graph Dataset functions (#2690)
* Refactor graph dataset building function

This commit refactors the graph dataset building functions into three
separate functions, one for each plot: main plot, comparison plot, and
dashed plot.

* Merge default graph dataset options

This commit moves default options from graph building functions to the
main function.

* Remove truncateToPresentIndex function

* Include dashed part when comparing periods

This commit fixes a bug where some period + interval combinations were
not working properly with comparisons. This is because `present_index`
is not available in every period, e.g. Last Month.
2023-02-21 11:36:26 -03:00
Uku Taht
531dfb114b
Refactor: Use HeadlessUI for search-select component (#2676)
* Use HeadlessUI for search select box

* Remove downshift from package.json

* More consistent API for Combobox component

* Combine toFilterType and valueWithoutPrefix into a single function

* Rename MyCombobox -> PlausibleCombobox

* Update webpack-cli

* Disable cache for build

* Revert "Disable cache for build"

This reverts commit aa130541f8.

* Disable cache for build

* Update webpack dependencies

* Remove glob from webpack config

* Webpack is required by package.json

* Require autoprefixer in postcss config

* Revert build changes

* Fix styling for dark mode
2023-02-20 11:10:11 +02:00
Vini Brasil
565036c9b2
Refactor: Graph Tooltip (#2685)
* Move GraphTooltip to its own file

* Convert graph tooltip module to JSX

* Improve graph tooltip code

* Change graph tooltip element to `<aside>`

* Add arrows to comparisons percentage difference

* Revert graph tooltip JSX change
2023-02-16 10:11:58 -03:00
RobertJoonas
6f4d479852
Refactor top stats and graph positioning (#2662)
* Position the graph component relatively

* lose graph container height flicker (resized canvas)

* rename variable

* prevent flicker in the loading process

* remove unused import

* disable cursor-pointer class for minute interval

* change var names and loading state conditions

* refactor showLoader condition

* fix UI bug with interval change

set `graphData` to `null` so that the component would fade out when
loader becomes visible. Before, the spinner was just displayed on top of
the graph.
2023-02-14 09:59:25 -03:00
Aviral
0db52ff977
Add year to X axis of multi-year graph (#2607)
* Add year to X axis of multi-year graph

* Remove hardcoded condition for rendering year string, render if multiple years present in graph view

* Apply new argument contract to dateFormatter usage in graph-util.js

* Better defensive runtime type guard when deriving hasMultipleYears

* Remove console log

* Remove unrelated JSDoc change

---------

Co-authored-by: Vini Brasil <vini@hey.com>
2023-02-14 08:54:22 -03:00
Vini Brasil
5159e683cc
First pass at Comparisons (#2650)
This commit adds support for comparing the actual showed period on the main graph with the previous one. This is a first pass and it's hidden under a feature flag because it's not feature complete yet as we want to support other comparison modes.
2023-02-07 10:00:49 -03:00
Adam Rutkowski
8a2df294f5
Replace empty OS/screen size/Browser with (not set) in UI/API/exports (#2646)
* Make Device section components aware of (not set)

So that no extra sub-filters are possible when the unset
top item is selected.

* Support '(not set)' in breakdown/filters

* Update expectations for export tests

* Add extra tests for returning/filtering by '(not set)'

* Add changelog entry

* Remove ListReport conditional render

* Prevent redundant sub-filters

* Fix filter text rendering

---------

Co-authored-by: Uku Taht <uku.taht@gmail.com>
2023-02-07 12:47:54 +01:00
Vini Brasil
061cb6ec83
Remove the ability to collapse the main graph + transition bug fix (#2627)
* Remove the ability to collpase the top graph

This commit removes the ability to collapse the top graph. The graph
collapsed whenever `metric` was falsy. I removed all related code to
that. Metric now defaults to visitors.

We want to add new items to top stats, and this commit will make it
easier to change it. Also, there's currently a bug where top stats is
randomly collapsing, which should be fixed by this commit.

* Refactor graph and top stats loading state

The graph loading state shows and hides the graph conditionally
depending on whether the data is loaded, loading or refreshing.

The current code is a bit difficult to read because its big
conditionals. This commit refactors the loading state making it easier
to read.

This commit also fixes a bug where the graph wasn't fading out when
changing metrics.
2023-01-31 16:11:51 -03:00
Adam Rutkowski
5bb53c7e35
Revert "parse date labels by local timezone instead of UTC (#2601)" (#2619)
This reverts commit 7a7076ed20.
2023-01-24 10:43:43 +01:00
RobertJoonas
7a7076ed20
parse date labels by local timezone instead of UTC (#2601) 2023-01-23 12:32:12 +02:00
RobertJoonas
c4b8bf8c32
Fix metric undefined (#2589)
* extract maybeUpdateMetric function

* reset graph metric after fetching top stats

* fix bug

Also make sure we do not allow 'metric' to become undefined anymore

* keep graph hidden when empty metric saved

* reset metric in setState callback

* pass function not call
2023-01-18 16:37:03 +02:00
RobertJoonas
3999f282a5
Last updated tooltip (#2576)
* extract blinkingDot function

* position pulsating-circle with tailwind instead

* remove unused function

* extract renderStatName function

* display seconds since last realtime update

Adds a 'Last updated X seconds ago' label to the Current Visitors tooltip.

* small refactor: avoid duplication of this.props and this.state

* show the 'last updated ...' tooltip in historical

* changelog update

* use className utility function
2023-01-16 10:30:22 +02:00
David Janda
b6349df475
Display pageviews in details modal for top pages when filtering by a source (#2585) 2023-01-13 14:10:20 -03:00
David Janda
f949278d39
Convert list elements to button elements for stats tabs in order to enable keyboard navigation (#2526) 2023-01-05 11:45:19 +02:00
RobertJoonas
47e21121db
Realtime dashboard improvements (#2445)
* add a new realtime-update-timer module

* hook to the new 'tick' event in ListReport for auto-updates

This commit fixes the bug where all reports using the `ListReport` component did not
auto-update in realtime mode. Those reports are:

- Pages (Top / Entry / Exit)
- Locations (Countries / Regions / Cities)
- Devices (Screen Sizes / Browsers + versions / OS-s + versions)

* fetch data for ListReports only when scrolled into view

* refactor fetching data in ListReport

* refer to one source of truth for utm tags

* make the 'All' tab in Sources auto-update

* make all UTM tabs in Sources auto-update

* fetch UTM data only when scrolled into view

* auto-update Referrers with the new timer

* auto-update google search terms

* auto-update Conversions

* make countries map auto-update

* auto-update visitor-graph and top stats with new timer

* use new tick event for current visitors (in Historical)

* remove the old timer class

* update changelog

* Visual improvements to automatic realtime updates (#2532)

* minor consistency fix for text color in dark mode

* use FlipMove in goal conversions report

* use FlipMove in ListReports

* set main graph and top stats loading state correctly

* refactor isIntervalValid function

* enforce intervals are valid when set and stored

* remove duplicate data fetching on interval change

Fetching new data is handled by the `fetchGraphData` callback in `updateInterval`

* refactor updateMetric function

* make it clearer why 'metric' can be a faulty value

* extract 'query' and 'site' variables from 'this.props'

* reset interval state only when period is changed

The 'maybeRollbackInterval' function was also used to fetch data. This commit replaces
all those function calls with 'fetchGraphData' which better describes the actual behavior.
We should only worry about rolling back the interval if 'query.period' has changed.

This commit also stops the graph from flickering when it is updated in realtime.

* update names of two variables

* remove unnecessary negation

* make collapsed graph state more explicit

* consider stored invalid intervals when graph mounts

* fix not showing loading spinner regression

* remove interval state from VisitorGraph (#2540)

* Realtime prop breakdown (#2535)

* disable load more in realtime mode

* extract doFetch function

* separate fetchPropBreakdown and fetchNextPage functions

* subscribe for auto-updates in realtime

* improve readability with function name changes
2023-01-02 17:42:57 +02:00
Uku Taht
a37b3433d7
Always show direct traffic in sources reports (#2531)
* Remove show_noref behaviour

Removes query param show_noref which was used from React to control
whether to show Direct / None traffic or not. The show_noref behaviour
was untested previously.

Closes #2523

* Add changelog entry

* Fix tests

* Removed files I did not mean to check in :)
2022-12-19 13:40:21 +01:00
Uku Taht
8f20bf0ab2
Add metric ID to HTML (#2518) 2022-12-19 12:21:15 +01:00