Differentiate current options (Day/Week/Month/Year) from new presets by chippison · Pull Request #24139 · matomo-org/matomo

chippison · 2026-02-26T07:22:39Z

Description

DEV-19875
This PR will fix and be used to review and test:

We want to update the look and feel of our calendar. This is the initial start to add some preset options (DEV-19876), moving the date options to the left(DEV-19874) and differentiating the Period Options from Preset Options

NOTE:
PeriodSelector.vue is a bit too long now and would require more refactors by splitting this component more into some more components and helper modules.

I plan to add that refactor in the next JIRA ticket since that will be the time we try to refresh the UI (w/o changing libraries).

I think this will help more to make it easy to review at that point as I think there are a lot of changes in this PR already.

Acceptance Criteria (took from the 3 JIRA issues above)

A preset list of dates is added to the Calendar
Each date selected highlights the calendar (same behaviour as current period selectors)
- Example: Selecting “Last 30 days” highlights that range on the calendar
For Preset Date Options, user does not need to click in the date picker/calendar, just click “Apply” to apply selected option
“Last week (Mon - Sun)” and “This week (Mon - Today)” have mention to the days included to make it clear which range will be selected
Each preset is implemented according to the table below
Comparison mode works with these new presets
The list of options is moved to the left of the component, left of the date picker.
Current day/week/month/year options style is updated
“date range” option is renamed to “Custom date range” and pushed to the top of the list
New preset options style is not affected
Apply button is always disabled for Period Options (Day, Week, Month, Year) except 'date range' (Custom date range).
- We need to click on the calendar for date selection to work
- This includes when 'Compare to' is ticked.

Checklist

[✔] I have understood, reviewed, and tested all AI outputs before use
[✔] All AI instructions respect security, IP, and privacy rules

Review

tzi · 2026-03-03T23:58:06Z

When clicking on day, it unselects the current day.

video before	video after
https://github.com/user-attachments/assets/73877ffa-05a3-4250-9a0e-f921423aff73	https://github.com/user-attachments/assets/ddad495c-aa11-4095-8322-ab8c52566842

tzi · 2026-03-04T00:06:34Z

When selecting the current week, the date dropdown label is FROM 2026-03-02 TO 2026-03-08. It goes until this sunday (several days in the future)

tzi · 2026-03-04T00:10:31Z

When selecting This quarter, the previous period is only 2 months

	Last quarter	This quarter
Screeshot
Period	✅ From 2025-10-01 to 2025-12-31	✅ From 2026-01-01 to 2026-03-04
Last period	✅ From 2025-07-01 to 2025-09-30	🚫 From 2025-10-30 to 2025-12-31

tzi · 2026-03-04T00:12:42Z

Is Choose period label should be Select period and should be bold?
https://innocraft.atlassian.net/browse/DEV-19875

tzi · 2026-03-04T00:18:55Z

Figma	Branch

Some feedbacks:

The horizontal and vertical separators should certainly be lighter?
I would have say #f1f1f1 instead of #d9d9d9
A lighter border for the input radio?
The labels should nearer to the input radio?

tzi · 2026-03-04T00:27:23Z

Not sure if we can do something about it, but the "Compare to" form is not as nice as before.

"Compare to" and "Previous period" are not aligned anymore

before	after
	<img width="478" height="661" alt="Screenshot

"Custom Range" are on two lines now

before	after

tzi · 2026-03-04T22:01:19Z

There is perhaps a problem with the workflow.

When using a day/week/month/year (not range) period selection you cannot turn on comparison in the intuitive order. You should set comparison before choosing a date on the calendar, because when you click on the calendar it validates a date and apply it directly
=> Perhaps it could be considered as a bug already
So you reopen date panel. The date is already selected. You enable the comparison, but you can still not apply it because the "Apply" button is disabled
=> Seems like a bug

🎬 Video of demonstration:
https://github.com/user-attachments/assets/b6ab00eb-73ee-447c-ad53-0b1a54b617d7

chippison · 2026-03-05T01:42:54Z

When selecting the current week, the date dropdown label is FROM 2026-03-02 TO 2026-03-08. It goes until this sunday (several days in the future)

This is known current behaviour

chippison · 2026-03-05T01:46:01Z

When selecting This quarter, the previous period is only 2 months

Also known behaviour since we get the number of days for 'this quarter' and we treat it as a range, the previous period also gets the number of days we have for this quarter. Example the number of days for this quarter is 63 days, it would also try to get the previous 63 days for the the previous period

chippison · 2026-03-05T01:47:20Z

Is Choose period label should be Select period and should be bold? https://innocraft.atlassian.net/browse/DEV-19875

We just reused Choose Period already in the translations.
Also made this bold now

chippison · 2026-03-05T01:48:24Z

Figma Branch

Some feedbacks:

The horizontal and vertical separators should certainly be lighter?
I would have say #f1f1f1 instead of #d9d9d9

A lighter border for the input radio?

The labels should nearer to the input radio?

I made the separators lighter, #f2f2f2 all good? This is already in the CSS variables so just used that instead of adding new colour.
Also moved the radio button closer. I only did this for period selector because if we changed it on the global CSS, we would have to change a lot of screenshots.
We have already changed the font colour for the PeriodSelector at the next JIRA ticket, we'll change the border colour for input radio there too

chippison · 2026-03-05T01:55:14Z

There is perhaps a problem with the workflow.

When using a day/week/month/year (not range) period selection you cannot turn on comparison in the intuitive order. You should set comparison before choosing a date on the calendar, because when you click on the calendar it validates a date and apply it directly
=> Perhaps it could be considered as a bug already

So you reopen date panel. The date is already selected. You enable the comparison, but you can still not apply it because the "Apply" button is disabled
=> Seems like a bug

🎬 Video of demonstration: https://github.com/user-attachments/assets/b6ab00eb-73ee-447c-ad53-0b1a54b617d7

This was discussed with Pedro a last Monday. We made the decision to use this workflow for now. This is the reason this was added to the Acceptance Criteria above.

Apply button is always disabled for Period Options (Day, Week, Month, Year) except 'date range' (Custom date range).
  - We need to click on the calendar for date selection to work
  - This includes when 'Compare to' is ticked.

…ectly in the calendar if we refresh tha page

…To controls, and separating out hash sync resolver

…s well; also updating less file so that we use css variables for colour

…d options

…period type but not selecting anything.

…our is explicit

…edundant states

caddoo

Tested manually as many paths as i could think of.

…24139) * adding date presets * adding the date range preset class; adding tests * refactoring to PresetDateRanges to a vue component instead of just a ts class/object * fixing bug that seems to always click the 'Periods' initially then 'Presets' on the second click. * refactoring out PeriodOptions into its own vue component. fixing some bugs found and adding new tests * refactoring out PresetDateRange so that it is its own module and not cluttering PresetDateRanges.vue * udating PresetDateRangeResolver.ts so that it uses magic strings we already have in Matomo for the lastXdays * fixing a bug that causes some issues with PeriodSelector closing the panel before 'Apply' has been clicked when a preset is being clicked. * fixing space difference for compare checkbox * fixing bug where the Period selector panel when switching from a single calendar view, to a double calendar view * added a 'gate' so that we can stop click event from going into date range picker if its coming from Preset date options. * making some cosmetic changes * adding tests and comments for using the magic keys in the URL for bookmarking * fixing move period bug can go over min/max dates; adding tests * made apply button show all the time again * fixing P1 where staged state can leak across report navigation if date/period is unchanged * adding tests for new watcher resync * fixing bug where changing some preset options immediately changes some parts of the UI when 'Apply' has not been clicked * making sure we include idSite and segment when trying to decide if context has changed. also adding tests so that its clear that preset options block calendar interactions and period options allow them * adding tests so that we check that preset mode exits when a period option is selected * hide preset date options for periods disabled in enabled_periods_UI * removed unused translation * making getContextKeyFromParsed more robust and not just be based on hard coded url params * added compareSegments to context to ignore * updating tests; transferred some ui dom tests to jest * moved the periods and preset date options to the left and the calendar to the right * added jest test to make sure clicking outside just closes the panel and does not apply pending presets * removed test that is already covered by jest test in PresetDateRanges.component.spec.ts. This test was changing some screenshot tests because it moved the selection * updated screenshot tests so that it actually types in the actual dates * making changes to the UI so that we follow the spec * adding tests and updating built files * adding hover colour to Period selection; also making the 'Apply' button not be clickable when Period options are selected except for 'Custom date range' option * fixing UI test * Adding keyboard accessibility and updating tests * adding a fix so that magic strings in the URL still reflect back correctly in the calendar if we refresh tha page * refactoring period selector by creating new vue component for CompareTo controls, and separating out hash sync resolver * changing spec names * update built file * updating screenshots * applying a bit of refactor for readability * disabling the whole calendar when we click on a Preset date option * updating tests so that we do not use nextTick; updating screenshots as well; also updating less file so that we use css variables for colour * fixing bug that sometimes enables the Apply button even when on period options * Build vue files * adding some changes from initial review * fixing issue where we unselect selected period option when we change period type but not selecting anything. * updating screenshots;updating unit test so and comment so that behaviour is explicit * renaming state names so that its more descriptive and also removing redundant states * Build vue files * updating screenshot --------- Co-authored-by: innocraft-automation <innocraft-automation@users.noreply.github.com>

chippison added this to the 5.8.0 milestone Feb 26, 2026

chippison force-pushed the dev-19875 branch from 08e2391 to 611226c Compare February 26, 2026 09:18

sgiehl modified the milestones: 5.8.0, 5.9.0 Feb 26, 2026

chippison force-pushed the dev-19875 branch from 529ab59 to 8cee524 Compare February 26, 2026 22:35

chippison marked this pull request as ready for review February 26, 2026 22:52

chippison requested a review from a team February 27, 2026 01:39

chippison force-pushed the dev-19875 branch 3 times, most recently from c4284d2 to d85d948 Compare March 2, 2026 21:21

nathangavin self-assigned this Mar 3, 2026

chippison commented Mar 3, 2026

View reviewed changes

Comment thread plugins/MobileMessaging/vue/dist/umd.metadata.json

chippison force-pushed the dev-19875 branch from 563e2d4 to d3ccfaf Compare March 5, 2026 00:49

chippison unassigned nathangavin Mar 5, 2026

chippison force-pushed the dev-19875 branch from 551ee09 to 2421258 Compare March 5, 2026 03:25

chippison mentioned this pull request Mar 5, 2026

Calendar Refresh UI #24175

Closed

10 tasks

chippison force-pushed the dev-19875 branch from 2ea68c1 to 1016103 Compare March 9, 2026 02:14

tzi reviewed Mar 9, 2026

View reviewed changes

Comment thread plugins/CoreHome/vue/src/PeriodSelector/PeriodSelector.less

chippison and others added 16 commits March 11, 2026 13:55

Adding keyboard accessibility and updating tests

fdcb8b5

adding a fix so that magic strings in the URL still reflect back corr…

5e49000

…ectly in the calendar if we refresh tha page

refactoring period selector by creating new vue component for Compare…

e42779f

…To controls, and separating out hash sync resolver

changing spec names

83236cc

update built file

410e8f9

updating screenshots

e1de302

applying a bit of refactor for readability

91998cb

disabling the whole calendar when we click on a Preset date option

44a2c6f

updating tests so that we do not use nextTick; updating screenshots a…

16943bd

…s well; also updating less file so that we use css variables for colour

fixing bug that sometimes enables the Apply button even when on perio…

90795e0

…d options

Build vue files

6483bcb

adding some changes from initial review

02883bb

fixing issue where we unselect selected period option when we change …

9c1ccd9

…period type but not selecting anything.

updating screenshots;updating unit test so and comment so that behavi…

9aaacff

…our is explicit

renaming state names so that its more descriptive and also removing r…

6e8ed45

…edundant states

Build vue files

a01de1d

chippison dismissed tzi’s stale review via a01de1d March 11, 2026 00:59

chippison force-pushed the dev-19875 branch from 7223f21 to a01de1d Compare March 11, 2026 00:59

updating screenshot

d44a7bb

caddoo approved these changes Mar 11, 2026

View reviewed changes

pmgsPT mentioned this pull request Mar 11, 2026

Better calendar to view "Last 7 days", "Last 30 days", "3 months", "6 months" like in GA #18573

Closed

sgiehl linked an issue Mar 11, 2026 that may be closed by this pull request

Better calendar to view "Last 7 days", "Last 30 days", "3 months", "6 months" like in GA #18573

Closed

chippison merged commit 8e13640 into 5.x-dev Mar 11, 2026
50 of 51 checks passed

chippison deleted the dev-19875 branch March 11, 2026 19:06

sgiehl linked an issue Mar 13, 2026 that may be closed by this pull request

Add a Today button in the date selector UI Enhancement #22786

Closed

This was referenced Mar 13, 2026

Add a Today button in the date selector UI Enhancement #22786

Closed

Add new preset date options to our calendar #24098

Closed

Move period and preset date options to the left #24120

Closed

chippison mentioned this pull request Mar 16, 2026

Calendar refresh V2 #24232

Merged

10 tasks

Uh oh!

Conversation

chippison commented Feb 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Acceptance Criteria (took from the 3 JIRA issues above)

Checklist

Review

Uh oh!

Uh oh!

tzi commented Mar 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

tzi commented Mar 4, 2026

Uh oh!

tzi commented Mar 4, 2026

Uh oh!

tzi commented Mar 4, 2026

Uh oh!

tzi commented Mar 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

tzi commented Mar 4, 2026

Uh oh!

tzi commented Mar 4, 2026

Uh oh!

chippison commented Mar 5, 2026

Uh oh!

chippison commented Mar 5, 2026

Uh oh!

chippison commented Mar 5, 2026

Uh oh!

chippison commented Mar 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

chippison commented Mar 5, 2026

Uh oh!

Uh oh!

caddoo left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

6 participants

chippison commented Feb 26, 2026 •

edited

Loading

tzi commented Mar 3, 2026 •

edited

Loading

tzi commented Mar 4, 2026 •

edited

Loading

chippison commented Mar 5, 2026 •

edited

Loading