Improve top bar and main graph stats UI by sanne-san · Pull Request #6245 · plausible/analytics

sanne-san · 2026-04-13T16:05:52Z

Changes

Top bar

Add consistent styling and spacing for all buttons in the top bar
Move period arrows into the period picker visually instead of displaying them as separate buttons
Add selected state to buttons; when dropdown is open, the trigger background is light gray. This is also true when comparison is enabled.
Change filter button icon from magnifying glass to a filter icon
Change period picker button icons from chevron on the right to calendar icons on the left
Make top bar scroll horizontally on mobile

New options menu (⋮)

Move interval picker, export button, imported data toggle and notices out of the graph and into a new options menu in the top bar
Hide menu in realtime mode
Render button immediately as a non-interactive placeholder on page load to prevent layout shift
Change interval picker dropdown to a segmented control
Change the imported data toggle to an actual toggle button
Change notice icon + tooltip to an inline notice component
The i keyboard shortcut now cycles through graph intervals rather than opening the dropdown menu – also when the options menu is closed

Top stats

Change selected metric background highlight to a subtle background instead of a coloured underline on the label
Refine stat labels and values typography and colors
Ensure change arrows and percentages are shown also when in comparison mode (and removed from tooltip)
Show "until HH:MM" when "Today" is the comparison date range to indicate a partial day

Code organisation

Introduce a shared React context (DashboardOptionsProvider) to pass graph state (intervals, import settings) up to the top bar without prop drilling
Move custom icons to a shared icons file
Extract segmented control, toggle button and notice as reusable components
Old standalone StatsExport, WithImportedSwitch, and NoticesIcon components removed; functionality consolidated into the options menu

Before and after:
https://github.com/user-attachments/assets/ec519314-629f-4034-87d9-9cded458f646

New options menu:

Tests

Automated tests have been added

Changelog

Entry has been added to changelog

Documentation

Docs have been updated

Dark mode

The UI has been tested both in dark and light mode

Top bar - Add consistent styling and spacing for all buttons in the top bar - Move period arrows into the period picker visually instead of displaying them as separate buttons - Add selected state to buttons; when dropdown is open, the trigger background is light gray. This is also true when comparison is enabled. - Change filter button icon from magnifying glass to a filter icon - Change period picker button icons from chevron on the right to calendar icons on the left - Make top bar scroll horizontally on mobile instead of clipping New options menu (⋮) - Move interval picker, export button, imported data toggle and notices out of the graph and into a new options menu in the top bar - Hide menu in realtime mode - Render button immediately as a non-interactive placeholder on page load to prevent layout shift - Change interval picker dropdown to a segmented control - Change the imported data toggle to an actual toggle button - Change notice icon + tooltip to an inline notice component Top stats - Change selected metric background highlight to a subtle background instead of a coloured underline on the label - Refine stat labels and values typography and colors - Ensure change arrows and percentages are shown also when in comparison mode (and removed from tooltip) - Show "until HH:MM" when "Today" is the comparison date range to indicate a partial day Code organisation - Introduce a shared React context (DashboardOptionsProvider) to pass graph state (intervals, import settings) up to the top bar without prop drilling - Move custom icons to a shared icons file - Extract segmented control, toggle button and notice as reusable components - Old standalone StatsExport, WithImportedSwitch, and NoticesIcon components removed; functionality consolidated into the options menu

…CSS classes

github-actions · 2026-04-14T09:13:16Z

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

ukutaht · 2026-04-14T11:18:08Z

Tested on preview. Feels great to me overall. A couple things I noticed while testing:

1. Date picker has uneven padding when arrows not shown

The padding looks good with arrows.

2. Date picker dropdown has some weirdness

I cannot close the dropdown by clicking outside of it just above the datepicker: https://cap.so/s/8dg13mgn12zk6bb

Also I cannot replicate this for some reason but once I did manage to get it into this state where the focus ring shows and does not look great

ukutaht · 2026-04-14T12:07:18Z

Don't want to get too much into small matters of taste, but I couldn't help but notice that in the new variant the 'current visitors' text looks noticeably heavier than the site domain:

As opposed to the current version where the domain is heavier than current visitors:

The new version looks a bit strange to me but I can't put my finger on why or justify it too much :) did you choose it deliberately and prefer it this way?

- Refactor site switcher to use a static component when not logged in - Add test for static site switcher - Fix padding on period picker when arrows are hidden - Fix focus-visible ring on period picker - Update typography for site switcher and current visitors

sanne-san · 2026-04-16T11:32:08Z

@ukutaht good catches, fixed them! RE typography of the site switcher and current visitors: it was a choice between consistency and hierarchy, and I opted for more consistency. I was hesitating as well though so I reverted it to the original. I think because the site domain isn't capitalised and the current visitors starts with a number, the latter feels heavier somehow.

…-bar

apata · 2026-04-20T16:23:42Z

-          height: SEE_MORE_WIDTH_PX,
-          width: SEE_MORE_WIDTH_PX,


nitpick, non-blocking: The reason size was given with style is for the actual size and the size used in calculations not to be out of sync. Now, the sync between size-8 and SEE_MORE_WIDTH_PX has to be managed manually.

apata · 2026-04-20T16:28:33Z

+        {showCurrentVisitors && <CurrentVisitors />}
      </div>
-      <div className="flex w-full">
+      <div className="flex min-w-0 flex-1">


issue, non-blocking: Now this section can shrink to nothing.

apata · 2026-04-20T16:40:11Z

+}: {
+  children: React.ReactNode
+}) {
+  const [options, setOptions] = useState<DashboardOptionsContextValue | null>(


issue, non-blocking: This is duplicative state (between visitor-graph and this component), which causes us to need syncing code. I think a better split would be to have

GraphIntervalContext - solely responsible for calculating available intervals and the current one, and providing the means to change the current one

ImportsIncludedContext - same as above, just for imports, may itself depend on GraphIntervalContext

and to use the exposed context state in the components where they're needed, when fetching the graph and in the new triple dot menu.

Should ImportsIncludedContext own its own query, or is a push from visitor-graph fine since the imports state comes from the top stats fetch?

Valid question, I think that needs to be pushed.

apata · 2026-04-20T16:49:35Z

  )
 })

+describe(`${getPartialDayTimeRange.name}`, () => {


suggestion, non-blocking: Let's also test that it handles timezones in the date string (I've not actually seen 2024-01-13T00:00:00, always something like

"date_range": [ "2026-01-19T00:00:00+00:00", "2026-04-19T23:59:59+00:00" ],

apata · 2026-04-20T16:52:59Z

+  return { topStats, meta, from, to, comparingFrom, comparingTo, timeRange }
+}
+
+// Returns "until HH:MM" when the date range is a partial day (period=day for


suggestion, non-blocking: If the comment about the function is exactly above the function, IDEs include it when hovering at a call site.

/** Does something complex, explanation */ const f = () => { // .. }

apata · 2026-04-20T17:05:05Z

-                {formatDateRange(site, data.comparingFrom, data.comparingTo)}
+              <p className="text-xs text-gray-500 dark:text-gray-400 font-medium">
+                {data.timeRange
+                  ? `${formatDayShort(parseUTCDate(data.comparingFrom))}, ${data.timeRange}`


issue, blocking: This works for Today vs Previous period, but it is incorrect when comparing Today vs Custom Period (pick yesterday from comparison calendar). The comparison query is made for the whole day, so we'd need to calculate and show comparisonTimeRange here.

apata · 2026-04-20T17:11:35Z


  expect(arrowElement).toHaveTextContent('↑ 1%')
-  expect(arrowElement.children[0]).toHaveClass('text-green-500')
+  expect(arrowElement.children[0]).toHaveAttribute('data-direction', 'up')


question, non-blocking: Why did we get rid of the color asserts? I think they matter because bounce rate down being rendered as green is important. Up/down direction is already tested with toHaveTextContent('↑ 1%'). (The arrow icons are mocked with a particular unicode character)

apata · 2026-04-20T17:14:37Z

+      className={classNames(
+        popover.toggleButton.classNames.rounded,
+        'gap-x-1.5 px-2.5 font-medium text-gray-700 dark:text-gray-100',
+        '!pl-0'


question, non-blocking: why padding left with !important? I don't see padding left previously declared in popover.toggleButton.classNames.rounded, just on the prev line.

apata · 2026-04-20T17:22:30Z

-              'hover:bg-gray-100 dark:hover:bg-gray-800'
+              popover.toggleButton.classNames.rounded,
+              popover.toggleButton.classNames.ghost,
+              '!pl-1.5'


question, non-blocking: Does the switcher not need same left & right padding? E.g. !px-1.5

apata · 2026-04-20T17:35:25Z

@@ -627,10 +640,7 @@ test.describe('location filtering tests', () => {

      await applyFilterButton(page).click()

-      await page
-        .getByRole('button', { name: 'See 1 more filter and actions' })
-        .click()
-
+      await page.getByRole('button', { name: /See.*more/ }).click()


issue, non-blocking: These tests are running on a constant viewport (1024px). "See N more" depends on that, filter pills style, and other top bar items.

Because the UI changed, the conditions to wrap to to "See N more" changed, so I can see why you added another filter. However, the comment is misleading and there's some missing asserts now.

In these tests, I think we should definitively check which filters of the added filters are visible without clicking "See more", that "See more" has the correct label, and that all the rest are visible after clicking "See more".

apata · 2026-04-20T17:41:30Z

Great work! Pretty major changes at first glance, but opening the app it feels very familiar and natural, at least to me. With the top stats enhanced time labels issue solved (#6245 (comment)), it's ready to go as far as I'm concerned.

sanne-san added the preview label Apr 13, 2026

sanne-san and others added 4 commits April 13, 2026 18:11

Merge branch 'master' into sanne-dashboard-top-bar

2dea52f

Remove unused tooltipBoundaryRef from CurrentVisitors

cfd9040

Add changelog entries

4b10507

Update change-arrow tests to use data-direction attribute instead of …

269eac4

…CSS classes

sanne-san force-pushed the sanne-dashboard-top-bar branch from d0eeb10 to 269eac4 Compare April 13, 2026 16:31

sanne-san added 2 commits April 14, 2026 10:11

Updated e2e tests

6cabfeb

Add "Graph interval" label to interval picker

f334e4d

sanne-san force-pushed the sanne-dashboard-top-bar branch from 07c0dc1 to f334e4d Compare April 14, 2026 09:05

Remove unused hasActionItems

e773d64

sanne-san marked this pull request as ready for review April 14, 2026 09:12

sanne-san added preview and removed preview labels Apr 14, 2026

sanne-san requested a review from a team April 14, 2026 09:32

Implement feedback

7575f95

- Refactor site switcher to use a static component when not logged in - Add test for static site switcher - Fix padding on period picker when arrows are hidden - Fix focus-visible ring on period picker - Update typography for site switcher and current visitors

sanne-san force-pushed the sanne-dashboard-top-bar branch from ac3223d to 7575f95 Compare April 16, 2026 11:30

sanne-san added 3 commits April 20, 2026 17:01

Merge remote-tracking branch 'origin/master' into sanne-dashboard-top…

644617b

…-bar

Fix interval type errors

108e867

Remove unused imports

cde540b

sanne-san requested review from RobertJoonas and apata April 20, 2026 15:23

apata reviewed Apr 20, 2026

View reviewed changes

Uh oh!

Conversation

sanne-san commented Apr 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes

Tests

Changelog

Documentation

Dark mode

Uh oh!

github-actions bot commented Apr 14, 2026

Uh oh!

ukutaht commented Apr 14, 2026

Uh oh!

ukutaht commented Apr 14, 2026

Uh oh!

sanne-san commented Apr 16, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

apata commented Apr 20, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

sanne-san commented Apr 13, 2026 •

edited

Loading