Can't Get Custom Period to Show in UI

Plugins & Platform
1

I created a plugin for two custom date periods, 7 and 30 days. It works fine using the reporting APIs. I am having trouble getting the Vue to show in the UI. Comments in the CoreHome/vue/Periods/Periods.ts says
“To add your own period to the frontend, create a period class for it. Then call Periods.addCustomPeriod w/ your period class:

  • Periods.addCustomPeriod('mycustomperiod', MyCustomPeriod);”

I did this in my plugin, but the call to Periods.addCustomPeriod is clearly calling a new instance of Periods, not the one used by Matomo.

The only way I got the new Periods to show up in the UI was to put the new Period class under the CoreHome/vue/Periods folder, then modify the plugins/CoreHome/vue/src/index.ts file to import the new classes. import ‘./Periods/SevenDay’;. If I remove the import statement the code fails.

How do I configur my plugin’s vue component so it will show up in the Period select list without changing CoreHome?


import { translate } from '../../../../CoreHome/vue/src/translate';
import Periods from '../../../../CoreHome/vue/src/Periods/Periods';
import { parseDate, format, todayIsInRange } from './utilities';

export default class SevenDayPeriod {
  constructor(private dateInPeriod: Date) {}

  static parse(strDate: string): SevenDayPeriod {
    return new SevenDayPeriod(parseDate(strDate));
  }

  static getDisplayText(): string {
    return '7 Days';
    // translate('Intl_PeriodDay');
  }

  getPrettyString(): string {
    let startDate = new Date(this.dateInPeriod);
    startDate.setDate(startDate.getDate() - 6);
    startDate = format(startDate);
    const endDate = format(this.dateInPeriod);
    return translate('General_DateRangeFromTo', [startDate, endDate]);
  }

  getDateRange(): Date[] {
    return [new Date(this.dateInPeriod.getTime()), new Date(this.dateInPeriod.getTime())];
  }

  containsToday(): boolean {
    return todayIsInRange(this.getDateRange());
  }
}
Periods.addCustomPeriod('seven', SevenDayPeriod);