* Improve dark mode
- Switch from `slate` to `zinc` for the gray color palette
- Darken overall dark mode UI
- Switch from `green` to `emerald` for the green color palette
- Update a few previously missed instances of title case to sentence case
- Consolidate button styles and change naming from `bright` to `secondary`
- Update button disabled styles
- Fix tooltip not adjusting to content width
- Update graph tooltip layout and typography
- Add transition effects to hover states
- Reduce footer logo size
* Fix oversights
- Update funnel graph colors
- Update graph grid colors
- Improve focus styles
- Improve disabled input styles
* Fix more oversights in relation to dashboard filtering
- Improve consistency of input, button, combobox and modal components in relation to settings area
- Fix segment tooltip color
* Fix search input style in funnel and segments dropdowns
* Add white background to favicon images in dark mode
- The GitHub and ChatGPT favicons are hard to see in dark mode, so we add a white background to them.
* Fix tooltip color to fit all backgrounds in dark mode
* Fix tests
* Fixed more tests
* Extract SourceFavicon component to eliminate favicon duplication
* Fix regression on installation page after rebase
* Fix formatting issues
* Fix favicon test failure in CI by reading placeholder icon at compile time
* Undo previous commit
* WIP
* Add tailwind migration script
* Change deprecated classes via migration script
* Manual fixes
* Restore color configuration with CSS variables
* Convert the rest of the config
* Fix dropdown ring opacity
* Remove migration script
* Fix stylelint errors
* NPM run format
* Fix shadow and rounded variant usage
* Add custom CSS to components layer
* Fix dark: and hover: conflict in settings_tab
* Fix funnel form background opacity
* Fix final bg-opacity
* Bring back cursor-pointer for buttons by default
* npm run format
* Remove new_time_on_page feature flag
* Update tests to use new time on page
* Mark time-on-page as a public metric in APIv2
* CHANGELOG.md
* Validate time_on_page in APIv2
* Update typing
* Remove redudant arguments
* Update GA4 test
* Update stats_controller_test
* Remove assertion from csv_importer
* Add nil case to new time on page tests
* Support passing `include` as a query parameter for dashboard APIs
* Mark time-on-page metric sortable
It now is thanks to the changed query
* new-time-on-page flag with cutoff being sent to the frontend
* Add correct tooltip title
* Implement metric warning for when legacy and new time_on_page metrics are mixed
* Send legacy_time_on_page_cutoff to backend
* Make time-on-page graphable with the new metric
* Only show metric warnings for time_on_page if flag is enabled
* Changelog
* Solve an clickhouse error when querying timeseries with only legacy time-on-page
* Add tests for timeseries of new time-on-page
Along the way fix an issue with comparisons not working properly
* Solve a typing issue
* Allow toggling legacy_time_on_page_cutoff off in dashboard
* Slightly better workaround
* Solve typing issue
* Prettier
* Guard against no warning
* Solve warning
* Hide top stat if value is null
* Handle nulls in events metric on dashboard - rendering - instead
* Return nulls for `event` metric when dealing with scroll goals
Counting conversions doesn't really make sense in this scenario.
If there are multiple goals, nulls are only returned for those affected.
If there is at least one scroll goal included by the filter, conversions
cannot be counted.
* Prettier
* Handle case with goal dimension AND filters correctly
* Remove todo
* add migration
* add schema field
* mark site_imports with has_scroll_depth
* add function to get imports in query range
* add scroll_depth metric warning in QueryResult
* return scroll_depth warning in top stats
* render minimalistic warning in top stats
* minimalistic warning in Top Pages breakdown
* prettier format
* silence credo
* add test
* use a snapshot of SiteImport schema in data migration
* also use a snapshot list of imported_* tables
* moduledoc (credo)
* change tooltip message
* change metric warnings structure in top stats response
* pass meta from queryresult directly
* revert top_stats_entry refactor
* prettier
* stop using SiteImport module in data migration
* Comparisons: Only render comparisons in top stats when both query and data support it
This fixes a bug from navigation:
1. Comparison disabled, choose a non-realtime period (e.g. press T for "Last 30 days")
2. Enable comparison mode (press X)
3. Choose the realtime period (press R)
4. Choose a non-realtime period again (press T)
Kudos to robert for discovering the repro case.
* Fix conditional
Broken when fixing another bug d727ba5ed5 (diff-f2361637bc87773faced883d7560491e4612b7581f4748f03241821f4ff8f6feL166)
* Comparisons: Move code to LegacyQueryBuilder
* WIP: Return comparison results to frontend
* refactor: remove useless param
* Different result format
* Pass object to metric.renderValue
* remove dead code
* Fixup response format
* Comparison in a tooltip
Not perfect at all, but a good start. Problems arise with money etc.
* Simple change arrow
* Extract metric entry to ts
* popper attempt WIP
* Slightly nicer content
* Solve warning
* Unified changeArrow in app
* Remove needless spanning
* Always set `graph_metric` in top stats.
FE already has business logic around whether a given metric is graphable
* Remove dead code
* Move Money module under dashboard utils, keep in build
* change <Metric /> definition to take in a `formatter` and store default formatters in another (typed) const
* Use standard system for formatting numbers
* Arrows only in table
* remove dead import
* Inline renderValue
* Render metric name in tooltip
* numberFormatter -> numberShortFormatter
* numberShortFormatter update
* Separate long/short formatters
* Use long vs short formatters
* Put column name into tooltip
* Slightly improved label handling for percentages, conversion rate
* Improved boundary handling in tooltip.js
* Iterate tooltips, no tooltip for - revenue
* Update top stats tests after graph_metric change
* Change revenue metrics stats API return structure
Conversion now happens earlier in query pipeline, we return float for comparison purposes
* useQueryContext in a component
* graph_metric for current visitors to fix realtime view
* No tooltips if fully - row
* renderValue as a proper function
* Simplify MetricEntry
* Use common const
* tooltip to typescript
* More explicit return structure
* metric-entry -> metric-value
* Restore some files
* ChangeArrow
* Restore MoreLink
* Fix typing in MoreLink
* <MetricValue />
* Tests for MetricValue and ChangeArrow
* details modal fixups
* re-add space between arrow and percentage
* Solve stylelint issues
* Update test
* Format
* Add flag `breakdown_comparisons_ui`
* reformat
* Remove no change icon, better alignment
* Revert "Remove no change icon, better alignment"
This reverts commit a8d62b6383.
* number-formatter.ts
* numberLongFormatter refactor
* useMemo dependency
* Handle nulls/undefined in top stats
---------
Co-authored-by: Uku Taht <uku.taht@gmail.com>
* fix deciding whether a filter operation is freeChoice
* fix displaying loading spinner when loading combobox options
* extract lastLoadTimestamp into a separate context
* prettier
* Give a more semantic name to a function
* Make the LineGraph component thinner
* Move LineGraph into a separate file
* Move interval logic into interval-picker.js
This commit also fixes a bug where the interval name displayed inside
the picker component flickers the default interval when the graph is
loading.
The problem was that we were counting on graphData for returning us the
current interval: `let currentInterval = graphData?.interval`
We should always know the default interval before making the main-graph
request. Sending graphData to IntervalPicker component does not make
sense anyway.
* extract data fetching functions out of VisitorGraph component
* Return graph_metric key from Top Stats API
This commit introduces no behavioral changes - only starts returning an
additional field, allowing us to avoid the following logic in React:
1. Finding the metric names, given a stat display name. E.g.
`Unique visitors (last 30 min) -> visitors`
2. Checking if a metric is graphable or not
* Move metric state into localStorage
This commit gets rid of the internal `metric` state in the VisitorGraph
component and starts using localStorage for that instead.
This commit also chains the main-graph request into the top-stats request
callback - meaning that we'll always fetch new graph data after top stats
are updated. And we do it all in a single function.
Doing so simplifies the loading state significantly, and also helps to
make it clear, that at all times, existing top stats are required before
we can fetch the graph. That's because the metric is determined by which
Top stats are returned (for example, we can't be sure whether revenue
metrics will be returned or not).
* Make sure graph tooltip says "Converted Visitors"
* Extract a StatsExport function component
Again, instead of relying on `graphData?.interval` we can read it from
localStorage, or default to the largest interval available. The export
should not be dependant on the graph.
* Extract SamplingNotice function component
* Extract WithImportedSwitch function component
* Stop "lazy-loading" the graph and top stats
Since the container is always on top on the page, it will be visible on
the first render in any case - no matter the screen size.
* Turn VisitorGraph into a function component
* Display empty container until everything has loaded
* Do not display loading spinner on realtime ticks
* Turn Top Stats into a fn component
* fetch top stats and graph async
* Make sure revenue metrics can remain on the graph
* Add an extra check to canMetricBeGraphed
* fix typo
* remove redundant double negation
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).
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.
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.
* 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>
* 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.
* 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
This commit lints JavaScript files, removes commented-out code, and
moves 3 constants to `graph-util.js`. This is part of the Intervals
work, in order to make the original pull request smaller and release
this feature incrementally.
Related: #1574
Co-authored-by: Vignesh Joglekar <hey@vigneshjoglekar.com>
* Replace current tooltip with Popper.js
* Merge tooltip and title for top stats
* Format bounce rate and visit duration numbers in tooltip
* Add 'width=manual' mode for embed
* Add changelog entry
* Use helper function canMetricBeGraphed
* First pass bringing in previous graph improvements, and comparsion context
* Swaps issue template to new issue form syntax
* Indentation update
* Indentation update?
* More indentation
* Intendation is hard
* Finalized indentation?
* Github indentation
* Missing fields
* Formatting changes
* Checkbox changes
* Uses new timeseries API, various UI improvements, descopes conversions, ToP from graphing
* Fixes Mobile UI Issues
* Improves point detection and display on hover
* Fixes & adds tests for updated main-graph API route
* Changelog
* Changes to better metric option declaration & minor UI/default fixes
* Fixes top stat tooltips showing unformatted numbers for special (non-rounded) top stats
* Formatting
* Fixes regression with dashed portion not stopping at present_index
* Removes comparison + lint
* Improves top stat active style
* Removes comparison tests
* Splits out tooltip and top stats
Still needs:
- Tests
- Potentially more cleanup
* Adds/moves tests for top stats
* Formatting
* Updates metric LS key, removes console log
* Various fixes + cleanup
* Makes tooltip position & style more consistent
* Fixes test (returns import status on both main graph & top stats)
* Fixes interaction with month dateFormatter
* Fixes edge case tooltip behavior
It was simpler than I thought :/
* Make the entire top stat clickable
* Minor UI improvements
* Fixes another tooltip visibility edge case + cleans up boolean algebra
Co-authored-by: Uku Taht <Uku.taht@gmail.com>
Sanne de Vries
Uku Taht
Karl-Aksel Puulmann
Artur Pata
RobertJoonas
Vini Brasil
Vignesh Joglekar