diff --git a/client/my-sites/stats/site.jsx b/client/my-sites/stats/site.jsx index ca4a9fb7e0e8e..ca58e7073d869 100644 --- a/client/my-sites/stats/site.jsx +++ b/client/my-sites/stats/site.jsx @@ -486,6 +486,7 @@ class StatsSite extends Component { statsType="statsTopPosts" showQueryDate isShort + dateRange={ customChartRange } /> diff --git a/client/my-sites/stats/stats-date-picker/index.jsx b/client/my-sites/stats/stats-date-picker/index.jsx index ee3934ae14e37..2a4a12a26bafd 100644 --- a/client/my-sites/stats/stats-date-picker/index.jsx +++ b/client/my-sites/stats/stats-date-picker/index.jsx @@ -52,16 +52,52 @@ class StatsDatePicker extends Component { } dateForDisplay() { - const { date, moment, period, translate, isShort } = this.props; + const { date, moment, period, translate, isShort, dateRange } = this.props; + const weekPeriodFormat = isShort ? 'll' : 'LL'; + + // If we have chartStart/chartEnd in dateRange, use those for the date range + if ( dateRange?.chartStart && dateRange?.chartEnd ) { + const startDate = moment( dateRange.chartStart ); + const endDate = moment( dateRange.chartEnd ); + + // If it's the same day, show single date + if ( startDate.isSame( endDate, 'day' ) ) { + return startDate.format( 'LL' ); + } + + // If it's a full month + if ( + startDate.isSame( startDate.clone().startOf( 'month' ), 'day' ) && + endDate.isSame( endDate.clone().endOf( 'month' ), 'day' ) && + startDate.isSame( endDate, 'month' ) + ) { + return startDate.format( 'MMMM YYYY' ); + } + + // If it's a full year + if ( + startDate.isSame( startDate.clone().startOf( 'year' ), 'day' ) && + endDate.isSame( endDate.clone().endOf( 'year' ), 'day' ) && + startDate.isSame( endDate, 'year' ) + ) { + return startDate.format( 'YYYY' ); + } + + // Default to date range + return translate( '%(startDate)s - %(endDate)s', { + context: 'Date range for which stats are being displayed', + args: { + startDate: startDate.format( weekPeriodFormat ), + endDate: endDate.format( weekPeriodFormat ), + }, + } ); + } // Ensure we have a moment instance here to work with. const momentDate = moment.isMoment( date ) ? date : moment( date ); const localizedDate = moment( momentDate.format( 'YYYY-MM-DD' ) ); let formattedDate; - // ll is a date localized with abbreviated Month by momentjs - const weekPeriodFormat = isShort ? 'll' : 'LL'; - switch ( period ) { case 'week': formattedDate = translate( '%(startDate)s - %(endDate)s', {