Dashboard: show comparison for breakdowns

[macobo]

Changes

This PR adds support for showing comparisons for various breakdown lists, e.g.

The feature is under a feature flag: breakdown_comparisons_ui

Along the way, this PR:

• updates breakdown endpoints to support sending comparison responses.
• restructures how values are formatted in frontend
• adds popper tooltips for values in a similar style to top stats
• brings some components to typescript and adds some more frontend tests
• removes graphable_metric? logic from backend - this already exists in frontend
• updates how revenue metrics are formatted when sent to frontend, removing some controller-specific logic

Note that:

• The new response structure doesn't adhere to APIv2 - this would have made this PR significantly more complicated, pushing this a bit more down the line.

Untackled issue: Breakdown comparison reports sometimes report 0 results for previous period incorrectly. This will be tackled in a separate PR. See https://github.com/plausible/analytics/pull/4697 for a fix

Screenshots

Click here to see comparison screenshots

1. Normal tooltips

2. Revenue tooltip

3. Percentage tooltip

4. Comparison tooltip

5. Comparison revenue tooltip

6. Comparison details screen

7. Dark mode comparisons

[github-actions[bot]]

Preview environment👷🏼‍♀️🏗️
PR-4692

[ukutaht]

Some UI feedback:

Big picture it's very close to being great, but I'd like to fix some details before go-live.

Icons

The arrows look real nice, but the 'no change' indicator needs some work. It's much wider than the arrows, which means when it's included in the column it makes it wider and throws off the alignment of the whole column:

In modals it also breaks onto a newline sometimes:

I think these problems will we fixed by finding a visual indicator of 'no change' that is exactly the same width as the arrows. I'd try to find something from the iconset we're using since they're all exactly the same size. If we want to stick to fonts maybe a monospace variant would work.

Modals may need some extra work, not sure if fixed width icons would fix all the wonkyness in the screenshot above

Tooltip

I think we should include the comparison date ranges in the tooltips to provide more context to the user. Something like:

17 Sept - 17 Oct: 228,724 visitors ↑12%
vs
20 Aug - 19 Sept: 203,505 visitors

There are many possible was to display it, I'd like to play around with some options.

@macobo mind if I do my own pass on the UI? I should have some time this afternoon/evening. If it's behind a feature flag feel free to merge, otherwise I can also work on top of this PR.

[ukutaht]

I don't know if it would work but I'd also like to try giving a visual indication of the magnitude of change for quick scanning (i.e. no tooltip). Maybe defining 3-4 buckets that will get progressively more green or red depending on how big the percentage change is.

[macobo]

@macobo mind if I do my own pass on the UI? I should have some time this afternoon/evening. If it's behind a feature flag feel free to merge, otherwise I can also work on top of this PR.

Go ahead! I'll add a feature flag shortly (want to solve the other related issue anyways).

[apata]

I had a look as well, really good job with this, @macobo!

I like the verbose tooltips, @ukutaht, but maybe we can avoid propagating the resolved period to the tooltips and just use the period and comparison period formats from query-date-picker.tsx?

The up down arrows are a solid option, but I'm thinking in the breakdowns when they are next to small integer values they might be confused with the change of position of the item. I had a little go with diagonal arrows, see what you think:

To show magnitude, how about we add stroke width to the arrow? Like make it double thickness if change is over 50%: examples here https://github.com/plausible/analytics/pull/4698

[macobo]

@apata this should be ready now for another look. Will update the tooltips and arrows in a separate PR :)

[apata]

Nice! Happy with the changes @macobo, but the page errors on load in certain situations now. I think the steps to reproduce are

1. (declare flag)
2. Open localhost:8000 in Chrome incognito
3. Log in
4. Click dummy.site
5. Set period to All

Expected: works Actual: crashes with error about accessing toString on undefined:

hooks.tsx:631 React Router caught the following error during render TypeError: Cannot read properties of undefined (reading 'toString')
    at numberShortFormatter (number-formatter.ts:34:16)
    at topStatNumberShort (top-stats.js:29:10)
    at renderStat (top-stats.js:176:18)
    at Array.map (<anonymous>)
    at TopStats (top-stats.js:188:40)
    at renderWithHooks (react-dom.development.js:15486:18)
    at updateFunctionComponent (react-dom.development.js:19617:20)
    at beginWork (react-dom.development.js:21640:16)
    at beginWork$1 (react-dom.development.js:27465:14)
    at performUnitOfWork (react-dom.development.js:26599:12) {componentStack: '\n    at TopStats (http://localhost:8000/js/dashboa…y (http://localhost:8000/js/dashboard.js:68822:7)'}

[macobo]

Indeed, that will be solved in the upcoming PR similar to how Uku solved it above.