From 244456a4925455ceca0851032100ce448b107382 Mon Sep 17 00:00:00 2001 From: Marcelo Vega Date: Fri, 6 Dec 2024 16:45:08 -0300 Subject: [PATCH 1/5] Add arrows to switch dates for the post details page --- .../stats/stats-post-detail/index.jsx | 1 + .../stats/stats-post-summary/index.jsx | 37 ++++++++++++++++++- 2 files changed, 36 insertions(+), 2 deletions(-) diff --git a/client/my-sites/stats/stats-post-detail/index.jsx b/client/my-sites/stats/stats-post-detail/index.jsx index 6edc9a0137844..83354c33f0b5d 100644 --- a/client/my-sites/stats/stats-post-detail/index.jsx +++ b/client/my-sites/stats/stats-post-detail/index.jsx @@ -213,6 +213,7 @@ class StatsPostDetail extends Component { siteId={ siteId } postId={ postId } supportsUTMStats={ supportsUTMStats } + siteSlug={ siteSlug } /> diff --git a/client/my-sites/stats/stats-post-summary/index.jsx b/client/my-sites/stats/stats-post-summary/index.jsx index d4dc454217505..1e0f08db9e87b 100644 --- a/client/my-sites/stats/stats-post-summary/index.jsx +++ b/client/my-sites/stats/stats-post-summary/index.jsx @@ -35,6 +35,7 @@ class StatsPostSummary extends Component { siteId: PropTypes.number, translate: PropTypes.func, supportsUTMStats: PropTypes.bool, + siteSlug: PropTypes.string, }; state = { @@ -54,6 +55,28 @@ class StatsPostSummary extends Component { this.setState( { selectedRecord: record } ); }; + onPeriodChange = ( { direction } ) => { + const chartData = this.getChartData(); + if ( ! chartData.length ) { + return; + } + + let selectedRecord = this.state.selectedRecord; + if ( ! selectedRecord ) { + selectedRecord = chartData[ chartData.length - 1 ]; + } + + const recordIndex = chartData.findIndex( + ( item ) => item.startDate === selectedRecord.startDate + ); + + if ( 'previous' === direction && recordIndex > 0 ) { + this.setState( { selectedRecord: chartData[ recordIndex - 1 ] } ); + } else if ( 'next' === direction && recordIndex < chartData.length - 1 ) { + this.setState( { selectedRecord: chartData[ recordIndex + 1 ] } ); + } + }; + getChartData() { const { moment, stats } = this.props; if ( ! stats ) { @@ -168,7 +191,7 @@ class StatsPostSummary extends Component { } render() { - const { isRequesting, postId, siteId, translate } = this.props; + const { isRequesting, postId, siteId, translate, siteSlug } = this.props; const periods = [ { id: 'day', label: translate( 'Days' ) }, { id: 'week', label: translate( 'Weeks' ) }, @@ -180,6 +203,9 @@ class StatsPostSummary extends Component { if ( ! this.state.selectedRecord && chartData.length ) { selectedRecord = chartData[ chartData.length - 1 ]; } + const selectedRecordIndex = chartData.findIndex( + ( item ) => item.startDate === selectedRecord.startDate + ); const summaryWrapperClass = clsx( 'stats-post-summary', 'is-chart-tabs', { 'is-period-year': this.state.period === 'year', @@ -191,7 +217,14 @@ class StatsPostSummary extends Component { - + From 4c85cca91438d474c47739070865fcdb3e73898a Mon Sep 17 00:00:00 2001 From: Marcelo Vega Date: Fri, 6 Dec 2024 20:18:55 -0300 Subject: [PATCH 2/5] Adding pagination for days --- .../stats/stats-post-summary/index.jsx | 56 +++++++++++++++---- 1 file changed, 44 insertions(+), 12 deletions(-) diff --git a/client/my-sites/stats/stats-post-summary/index.jsx b/client/my-sites/stats/stats-post-summary/index.jsx index 1e0f08db9e87b..44596263bf8ad 100644 --- a/client/my-sites/stats/stats-post-summary/index.jsx +++ b/client/my-sites/stats/stats-post-summary/index.jsx @@ -38,9 +38,12 @@ class StatsPostSummary extends Component { siteSlug: PropTypes.string, }; + static MAX_RECORDS_PER_DAY = 10; + state = { selectedRecord: null, period: 'day', + page: 1, }; selectPeriod( period ) { @@ -56,7 +59,7 @@ class StatsPostSummary extends Component { }; onPeriodChange = ( { direction } ) => { - const chartData = this.getChartData(); + let chartData = this.getChartData(); if ( ! chartData.length ) { return; } @@ -70,19 +73,39 @@ class StatsPostSummary extends Component { ( item ) => item.startDate === selectedRecord.startDate ); - if ( 'previous' === direction && recordIndex > 0 ) { - this.setState( { selectedRecord: chartData[ recordIndex - 1 ] } ); - } else if ( 'next' === direction && recordIndex < chartData.length - 1 ) { - this.setState( { selectedRecord: chartData[ recordIndex + 1 ] } ); + if ( 'previous' === direction ) { + if ( recordIndex > 0 ) { + this.setState( { selectedRecord: chartData[ recordIndex - 1 ] } ); + } else { + const nextPage = this.state.page + 1; + chartData = this.getChartData( nextPage ); + if ( chartData ) { + this.setState( { selectedRecord: chartData[ chartData.length - 1 ] } ); + } + } + } else if ( 'next' === direction ) { + if ( recordIndex < chartData.length - 1 ) { + this.setState( { selectedRecord: chartData[ recordIndex + 1 ] } ); + } else { + const nextPage = this.state.page - 1; + chartData = this.getChartData( nextPage ); + this.setState( { selectedRecord: chartData[ 0 ] } ); + } } }; - getChartData() { + getChartData( newPage = 0 ) { const { moment, stats } = this.props; if ( ! stats ) { return []; } + let page = this.state.page; + if ( newPage ) { + page = newPage; + this.setState( { page: newPage } ); + } + switch ( this.state.period ) { case 'day': if ( ! stats.data ) { @@ -90,7 +113,10 @@ class StatsPostSummary extends Component { } return stats.data - .slice( Math.max( stats.data.length - 10, 0 ) ) + .slice( + Math.max( stats.data.length - StatsPostSummary.MAX_RECORDS_PER_DAY * page, 0 ), + stats.data.length - StatsPostSummary.MAX_RECORDS_PER_DAY * ( page - 1 ) + ) .map( ( [ date, value ] ) => { const momentDate = moment( date ); return { @@ -191,7 +217,7 @@ class StatsPostSummary extends Component { } render() { - const { isRequesting, postId, siteId, translate, siteSlug } = this.props; + const { isRequesting, postId, siteId, translate, siteSlug, stats } = this.props; const periods = [ { id: 'day', label: translate( 'Days' ) }, { id: 'week', label: translate( 'Weeks' ) }, @@ -203,9 +229,15 @@ class StatsPostSummary extends Component { if ( ! this.state.selectedRecord && chartData.length ) { selectedRecord = chartData[ chartData.length - 1 ]; } - const selectedRecordIndex = chartData.findIndex( - ( item ) => item.startDate === selectedRecord.startDate - ); + + const maxPages = Math.ceil( stats.data.length / StatsPostSummary.MAX_RECORDS_PER_DAY ); + let disablePreviousArrow = false; + if ( this.state.page >= maxPages - 1 ) { + const selectedRecordIndex = chartData.findIndex( + ( item ) => item.startDate === selectedRecord.startDate + ); + disablePreviousArrow = selectedRecordIndex === 0; + } const summaryWrapperClass = clsx( 'stats-post-summary', 'is-chart-tabs', { 'is-period-year': this.state.period === 'year', @@ -223,7 +255,7 @@ class StatsPostSummary extends Component { url={ `/stats/post/${ postId }/${ siteSlug }` } date={ selectedRecord?.startDate } period={ this.state.period } - disablePreviousArrow={ selectedRecordIndex === 0 } + disablePreviousArrow={ disablePreviousArrow } > From 9f2350aab356c2bf3c9dc31335da59d036a07972 Mon Sep 17 00:00:00 2001 From: Marcelo Vega Date: Mon, 9 Dec 2024 11:15:59 -0300 Subject: [PATCH 3/5] fix first page pagination --- .../stats/stats-post-summary/index.jsx | 36 ++++++++++--------- 1 file changed, 20 insertions(+), 16 deletions(-) diff --git a/client/my-sites/stats/stats-post-summary/index.jsx b/client/my-sites/stats/stats-post-summary/index.jsx index 44596263bf8ad..a3806b9c1f0c4 100644 --- a/client/my-sites/stats/stats-post-summary/index.jsx +++ b/client/my-sites/stats/stats-post-summary/index.jsx @@ -107,25 +107,29 @@ class StatsPostSummary extends Component { } switch ( this.state.period ) { - case 'day': + case 'day': { if ( ! stats.data ) { return []; } - return stats.data - .slice( - Math.max( stats.data.length - StatsPostSummary.MAX_RECORDS_PER_DAY * page, 0 ), - stats.data.length - StatsPostSummary.MAX_RECORDS_PER_DAY * ( page - 1 ) - ) - .map( ( [ date, value ] ) => { - const momentDate = moment( date ); - return { - period: momentDate.format( 'MMM D' ), - periodLabel: momentDate.format( 'LL' ), - startDate: date, - value, - }; - } ); + const dataStart = Math.max( + stats.data.length - StatsPostSummary.MAX_RECORDS_PER_DAY * page, + 0 + ); + const dataEnd = Math.max( + stats.data.length - StatsPostSummary.MAX_RECORDS_PER_DAY * ( page - 1 ), + 0 + ); + return stats.data.slice( dataStart, dataEnd ).map( ( [ date, value ] ) => { + const momentDate = moment( date ); + return { + period: momentDate.format( 'MMM D' ), + periodLabel: momentDate.format( 'LL' ), + startDate: date, + value, + }; + } ); + } case 'year': if ( ! stats.years ) { return []; @@ -232,7 +236,7 @@ class StatsPostSummary extends Component { const maxPages = Math.ceil( stats.data.length / StatsPostSummary.MAX_RECORDS_PER_DAY ); let disablePreviousArrow = false; - if ( this.state.page >= maxPages - 1 ) { + if ( this.state.page >= maxPages ) { const selectedRecordIndex = chartData.findIndex( ( item ) => item.startDate === selectedRecord.startDate ); From b211b9ac73f5ce0f1fed93bcd7c2e39ea21eb245 Mon Sep 17 00:00:00 2001 From: Marcelo Vega Date: Mon, 9 Dec 2024 21:00:17 -0300 Subject: [PATCH 4/5] fix pagination for other periods --- .../stats/stats-period-navigation/index.jsx | 14 ++++++++-- .../stats/stats-post-detail/index.jsx | 1 - .../stats/stats-post-summary/index.jsx | 28 ++++++++++--------- 3 files changed, 27 insertions(+), 16 deletions(-) diff --git a/client/my-sites/stats/stats-period-navigation/index.jsx b/client/my-sites/stats/stats-period-navigation/index.jsx index 5c5318737a060..c70dc1a695049 100644 --- a/client/my-sites/stats/stats-period-navigation/index.jsx +++ b/client/my-sites/stats/stats-period-navigation/index.jsx @@ -112,7 +112,12 @@ class StatsPeriodNavigation extends PureComponent { const previousDayQuery = qs.stringify( Object.assign( {}, queryParams, newQueryParams ), { addQueryPrefix: true, } ); - const href = `${ url }${ previousDayQuery }`; + + let href = null; + if ( url ) { + href = `${ url }${ previousDayQuery }`; + } + this.handleArrowEvent( 'previous', href ); }; @@ -125,7 +130,12 @@ class StatsPeriodNavigation extends PureComponent { const nextDayQuery = qs.stringify( Object.assign( {}, queryParams, newQueryParams ), { addQueryPrefix: true, } ); - const href = `${ url }${ nextDayQuery }`; + + let href = null; + if ( url ) { + href = `${ url }${ nextDayQuery }`; + } + this.handleArrowEvent( 'next', href ); }; diff --git a/client/my-sites/stats/stats-post-detail/index.jsx b/client/my-sites/stats/stats-post-detail/index.jsx index 83354c33f0b5d..6edc9a0137844 100644 --- a/client/my-sites/stats/stats-post-detail/index.jsx +++ b/client/my-sites/stats/stats-post-detail/index.jsx @@ -213,7 +213,6 @@ class StatsPostDetail extends Component { siteId={ siteId } postId={ postId } supportsUTMStats={ supportsUTMStats } - siteSlug={ siteSlug } /> diff --git a/client/my-sites/stats/stats-post-summary/index.jsx b/client/my-sites/stats/stats-post-summary/index.jsx index a3806b9c1f0c4..e393f8b535d23 100644 --- a/client/my-sites/stats/stats-post-summary/index.jsx +++ b/client/my-sites/stats/stats-post-summary/index.jsx @@ -35,7 +35,6 @@ class StatsPostSummary extends Component { siteId: PropTypes.number, translate: PropTypes.func, supportsUTMStats: PropTypes.bool, - siteSlug: PropTypes.string, }; static MAX_RECORDS_PER_DAY = 10; @@ -69,9 +68,7 @@ class StatsPostSummary extends Component { selectedRecord = chartData[ chartData.length - 1 ]; } - const recordIndex = chartData.findIndex( - ( item ) => item.startDate === selectedRecord.startDate - ); + const recordIndex = chartData.findIndex( ( item ) => item.period === selectedRecord.period ); if ( 'previous' === direction ) { if ( recordIndex > 0 ) { @@ -221,7 +218,7 @@ class StatsPostSummary extends Component { } render() { - const { isRequesting, postId, siteId, translate, siteSlug, stats } = this.props; + const { isRequesting, postId, siteId, translate, stats } = this.props; const periods = [ { id: 'day', label: translate( 'Days' ) }, { id: 'week', label: translate( 'Weeks' ) }, @@ -234,13 +231,18 @@ class StatsPostSummary extends Component { selectedRecord = chartData[ chartData.length - 1 ]; } - const maxPages = Math.ceil( stats.data.length / StatsPostSummary.MAX_RECORDS_PER_DAY ); let disablePreviousArrow = false; - if ( this.state.page >= maxPages ) { - const selectedRecordIndex = chartData.findIndex( - ( item ) => item.startDate === selectedRecord.startDate - ); + let disableNextArrow = false; + const selectedRecordIndex = chartData.findIndex( + ( item ) => item.period === selectedRecord.period + ); + if ( 'day' === this.state.period ) { + const maxPages = Math.ceil( stats.data.length / StatsPostSummary.MAX_RECORDS_PER_DAY ); + disablePreviousArrow = this.state.page >= maxPages && selectedRecordIndex === 0; + disableNextArrow = 1 === this.state.page && selectedRecordIndex === chartData.length - 1; + } else { disablePreviousArrow = selectedRecordIndex === 0; + disableNextArrow = selectedRecordIndex === chartData.length - 1; } const summaryWrapperClass = clsx( 'stats-post-summary', 'is-chart-tabs', { @@ -256,10 +258,10 @@ class StatsPostSummary extends Component { From fc1f064037d0ee22facf4ab70a2fcf3864317b6b Mon Sep 17 00:00:00 2001 From: Marcelo Vega Date: Mon, 9 Dec 2024 21:19:39 -0300 Subject: [PATCH 5/5] removing unused propertie --- client/my-sites/stats/stats-post-summary/index.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/client/my-sites/stats/stats-post-summary/index.jsx b/client/my-sites/stats/stats-post-summary/index.jsx index e393f8b535d23..797fdb7005e63 100644 --- a/client/my-sites/stats/stats-post-summary/index.jsx +++ b/client/my-sites/stats/stats-post-summary/index.jsx @@ -261,7 +261,6 @@ class StatsPostSummary extends Component { disablePreviousArrow={ disablePreviousArrow } disableNextArrow={ disableNextArrow } date={ null } - period={ this.state.period } >