Adds Main Graph Metric Selection

[Vigasaurus]

Changes

Resolves #117 and #532

This does also include (as discussed) the concept that if a user chooses to deselect the currently selected top stat from the graph, only the top stats show, and the graph gets hidden.

I did, however - for now - not include choosing time on page or conversion (rate/users) as an available graph selection, purely because they're not well supported (at all) in the new timeseries interface, and implementing them would not be trivial & probably shouldn't be in the scope of this PR alone. Right now, the top stat selection for showing as the graph data supports the 4 primary and default top stats (unique visitors, pageviews, bounce rate, and visit duration).

I'm also not necessarily super happy with the UI for the comparison enable/disable button in the datepicker, so I'm definitely open to ideas there.

2575756 is referring to this comical tooltip:

I'll set up some tests for this (and fix the existing tests to include the new main-graph route) soonish, but I figured it could get pushed for feedback anyways.

Tests

• Automated tests have been added

Changelog

• Entry has been added to changelog

Documentation

• Docs have been updated
  I imagine this will need both normal docs updates, and API doc updates

Screenshots

[ukutaht]

Thanks @Vigasaurus. Just letting you know I don't have time today to look at it and I'm off until Thu next week. So the review will take some time, sorry. Will that block your other stuff?

[Vigasaurus]

@ukutaht All good - and no, not at all; I'm working on the interval selection for the graph technically on top of this in a separate branch, but without much reliance on it (it's really only to make sure I don't cause UI-based merge conflicts, since the file change overlap is almost 100%), and if nothing else, I'll have all the tests etc all sorted by the time you're back.

[ukutaht]

Just pulled it down to look at how the UI feels before I review the code.

Overall I really like it. Love how much more interactive everything is.

I do have a few nitpicks on the UI:

1. When switching between different stat selections, it almost feels like the screen is tearing. I don't know if it's my machine or universal but the way it re-renders data is quite jarring. I think fading into a spinner and back (like when you switch between 'Top pages' and 'Entry pages') would feel nicer and also be more consistent.
2. The active state for top stats (to show that it's selected) could be better I think. Dynamically adding the icon changes the width of the 'box' and makes the lines between the top stats reflow. Would be nice if they could stay consistent. Also the icon doesn't feel super obvious to me. I would play around with text styles instead - make the active one bold and maybe give it a color with stronger contrast. Maybe try a bigger font size. Playing with font size and weight will still change the width of the container but less than adding an icon.
3. Something feels off about the enable/disable comparison button. I would love it in the datepicker if it looked something like this: Add comparison with some other periods #277 (comment). That design takes a lot of space and we would have to figure out how to make it work on smaller screens and/or how to collapse it if you don't want a comparison at all. For now, maybe some sort of icon (with an active state when enabled) next to the download icon and the upcoming interval selector would be best? @metmarkosaric what do you think?

[metmarkosaric]

3. Something feels off about the enable/disable comparison button. I would love it in the datepicker if it looked something like this: [Add comparison with some other periods #277 (comment)](https://github.com/plausible/analytics/discussions/277#discussioncomment-299634). That design takes a lot of space and we would have to figure out how to make it work on smaller screens and/or how to collapse it if you don't want a comparison at all. For now, maybe some sort of icon (with an active state when enabled) next to the download icon and the upcoming interval selector would be best? @metmarkosaric what do you think?

I also like the #277 design. Looks very Plausible-like! Would definitely take way too much space in the top bar if its standalone. Could we somehow fit that comparison menu within date range? Search Console only shows comparison menu when you click on the date range like this:

[ukutaht]

@metmarkosaric I like that how Search Console does it. And when you select a comparison mode, it could be shown at the top like in #277.

My concern would be that I've never seen a dropdown with tabs so it might not work great in our datepicker dropdown. Maybe we should use a popup like Search Console? Gotta give it a try and see how it feels.

[Vigasaurus]

Alright, should be all good to go! I also was able to add the slide up and down transition for the graph getting hidden fully as you'd mentioned + fixed up some UX on the top stat selectors.

[ukutaht]

Amazing @Vigasaurus, thank you for sticking with it and keeping the PR up to date. Heroic effort!

[ukutaht]

Some feedback:

For us the most important info on the tooltip would be the actual number - but now it's quite condensed. Maybe if you could take the number to a separate line and make it bold?

I agree with this as well. The actual metric number is not as easy to see anymore. I see why you did it - to fit comparisons in the tooltip as well. But maybe just play around with the text styles a bit to make the metric more prominent?

I can take a look as well, just posting here in case you have time to play around with it :)

[Vigasaurus]

Yeah for sure - I could see it being not bad by just scaling up + bolding the number, but I do definitely see how the hierarchy is kinda skewed in the current version where the data is basically the least prominent item.

0. Before:
   

1. Maybe something like this?
   

2. Or maybe by reducing the prominence of the title, the data can shine a bit more:
   

3. Or maybe combining the previous + reducing the weight of the "Click to view month", and changing the color of the actual data text:
   

4. Similarly with the last one, making the data color be the line color, it might make sense to hide the circle color swatch:
   

I personally don't love removing the swatch, especially when the comparisons are visible (also it makes the tooltip look a bit bare in my opinion).

I personally most like either 2 or 3, potentially with the reduction of weight in the "Click to view" of 3, and the still white color of 2; but lmk what you think.

In other words, I think this is probably my favorite (also includes swapping the boldness of the "Click the view" for italics).

[metmarkosaric]

thanks @Vigasaurus! I also like your favorite one (also don't mind if you make the metric in color too). And I see no problem with making "click to view" less prominent or completely removing it. I've shared this with the person who wrote this in the first place to see what they say.

[Vrq]

The suggested version looks good!
Does anyone have a Screenshot of how the tooltip looked before?

[metmarkosaric]

Thanks, let's go with that one then!

It looked something like this:

[Vigasaurus]

Cool - so just to validate, this version looks good for everyone?

https://dev.vigneshjoglekar.com/plausible.io

[metmarkosaric]

I get 404 on your dashboard

[Vigasaurus]

I forgot to make it public - should be good now

[metmarkosaric]

thanks! looks fine to me

[jpomykala]

I found a UI bug. Last 7 days + visit duration. Now, I click on Unique Visitors, and change time to Last 30 days. Now, I got highlighted two labels.

Have a great Friday 😄

[Vigasaurus]

@jpomykala Are you sure both are actually showing as selected and it's not just showing the hover color change for one of them? (This can happen on mobile if you press and hold on the button/top stat - it gets treated as a hover).

You should be able to check by just tapping anywhere else in the whitespace of the page to see if it goes back to having just the actual one highlighted.

I don't particularly know of anything that could cause such an issue outside of something like that, as all the properties are fully mutually exclusive otherwise.

[jpomykala]

Hey @Vigasaurus you are right! This probably because the hover color is the same as active color. So when I change time range, it looks like that both options are active. 😄

[Vrq]

I am not sure if this will be fixed with this PR but it would be nice to go back to detailed number, so not 1.2k but for example 1256.
Or maybe add rounding for bigger numbers, like 100s of thousands.

[ukutaht]

@Vigasaurus this PR introduced a regression. To reproduce:

1. Scroll down on the dashboard
2. Click on 'details' in Top Sources
3. Close the popup modal
4. Expected behaviour: your previous scroll position is restored. Sticky header works.
5. Actual behaviour: browser jumps to the top of the page. Sticky header is broken until refresh.

Can you take a look?

[Vigasaurus]

@ukutaht Ah yeah super weird - looks like it was caused by the overflow-x: hidden on app.css:35 interfering with the modal - that can just be removed all together (it was only relevant to an old version of the tooltip). I can PR if you want, but it'd probably just be easy if you want to commit it.

[ukutaht]

Ah sweet, thanks for letting me know! I'll commit it on master

[Vrq]

I am not sure if this will be fixed with this PR but it would be nice to go back to detailed number, so not 1.2k but for example 1256. Or maybe add rounding for bigger numbers, like 100s of thousands.

@metmarkosaric any chance to bring this back as well? :)

[metmarkosaric]

I miss that one myself too. Any chance we can explore couple of designs that allow full numbers in the tooltip again @Vigasaurus?

[metmarkosaric]

Another thing I noticed is that our mobile dashboard is no longer responsive. Not sure if it's related to this PR but it did start happening around the same time. Basically I can now scroll all the way on the right on our dashboard to an empty screen on my mobile. And when I click on any "details" views, they no longer show centrally on my screen.

[Vigasaurus]

Full numbers

Yeah I can look into some of those, or at least just tweaking the shorting criteria for them.

Broken modals & width

That modal width issue seems not new, I see it happening even back to months back branch states (but I could be misunderstanding what you mean). (I don't use mobile enough to have seen it earlier), and I don't quite know anything in this PR that could have caused that, but it's possible.

As for the actual dashboard extraneous width, I can't quite reproduce that on master - I'm happy to take a look if you have some more specific reproduction steps though.

[metmarkosaric]

fyi: the mobile issue seems to have been fixed. i don't see the problems on my own phone anymore