One Click Date Period Increment-Decrement

A couple of times I asked Matomo for the feature to have a one click date period change. I got tired of making 3 mouse clicks every time I wanted to change the report date by one day, so I dove into the Core code and figured out how to do it myself.

It works great with day, week, month and year.
The problem is it is a change to the plugins/CoreHome/vue/src/PeriodSelector.vue and .less files. I tried to figure out how to make a plugin that hooked into and modified the Core component, but could not figure that out. If anyone can point me to a way to do that it would be appreciated, otherwise I will probably need to redeploy this every time I update my Matomo in production.

It took me a few days to figure it out, but it turned out to be fairly simple. I probably have broken a number of Best Practices, but these are the changes I made.

Immediately after the <template> tag on line 9, added
<span class=“period-increment” @click=“incrementPeriod(-1)”>&nbsp;&#11160;
⮘ is html code for 3D left arrow.

Immediately before the </template> tag on line 161, added line
<span class=“period-increment” @click=“incrementPeriod(1)”>&#11162;&nbsp;

At very bottom of methods block on line 551, added the function

incrementPeriod(amt: number) {
   let newDate = new Date();
  //Production build fails with “cannot assign null to date” error without this check.
   if (this.dateValue != null) {
     newDate = this.dateValue;
   switch (this.periodValue) {
    case ‘day’:
       newDate.setDate(newDate.getDate() + amt);
    case ‘week’:
       newDate.setDate(newDate.getDate() + amt * 7);
    case ‘month’:
      newDate.setMonth(newDate.getMonth() + amt);
     case ‘year’:
       newDate.setFullYear(newDate.getFullYear() + amt);
    this.dateValue = newDate;

At bottom of file on line 109. added class

.period-increment {
font-weight: 900;
font-size: 18px;
cursor: default;
color: #1976d2;

This turned out to be so easy, and it sure makes my use of Matomo alot more enjoyable. I am not sure why the team has chosen not to implement it.

If anyone knows how to implement this functionality without hacking the Matomo Core code, I would appreciate some pointers to that information