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.
–plugins/CoreHome/vue/src/PeriodSelector.vue
Immediately after the <template> tag on line 9, added
<span class=“period-increment” @click=“incrementPeriod(-1)”> ⮘
⮘ is html code for 3D left arrow.
Immediately before the </template> tag on line 161, added line
<span class=“period-increment” @click=“incrementPeriod(1)”>⮚
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);
break;
case ‘week’:
newDate.setDate(newDate.getDate() + amt * 7);
break;
case ‘month’:
newDate.setMonth(newDate.getMonth() + amt);
break;
case ‘year’:
newDate.setFullYear(newDate.getFullYear() + amt);
break;
default:
break;
}
this.dateValue = newDate;
this.onApplyClicked();
},
–plugins/CoreHome/vue/src/PeriodSelector.less
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