diff options
author | Starfall <us@starfall.systems> | 2023-04-14 19:22:47 -0500 |
---|---|---|
committer | Starfall <us@starfall.systems> | 2023-04-14 19:22:47 -0500 |
commit | 4fe1689de43f4404eb9530fcfbcbfb26d6c1c13a (patch) | |
tree | 6811b845bb7f4966b10dcefa3dea404246f161c7 /app/javascript/mastodon/components/admin/Retention.js | |
parent | 65c1e53a32cabcdbb7bca57002bb0f6acdebe07e (diff) | |
parent | bed63f6dae0879ac840066b031229e0d139089cd (diff) |
Diffstat (limited to 'app/javascript/mastodon/components/admin/Retention.js')
-rw-r--r-- | app/javascript/mastodon/components/admin/Retention.js | 151 |
1 files changed, 0 insertions, 151 deletions
diff --git a/app/javascript/mastodon/components/admin/Retention.js b/app/javascript/mastodon/components/admin/Retention.js deleted file mode 100644 index f312a45eb..000000000 --- a/app/javascript/mastodon/components/admin/Retention.js +++ /dev/null @@ -1,151 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import api from 'mastodon/api'; -import { FormattedMessage, FormattedNumber, FormattedDate } from 'react-intl'; -import classNames from 'classnames'; -import { roundTo10 } from 'mastodon/utils/numbers'; - -const dateForCohort = cohort => { - switch(cohort.frequency) { - case 'day': - return <FormattedDate value={cohort.period} month='long' day='2-digit' />; - default: - return <FormattedDate value={cohort.period} month='long' year='numeric' />; - } -}; - -export default class Retention extends React.PureComponent { - - static propTypes = { - start_at: PropTypes.string, - end_at: PropTypes.string, - frequency: PropTypes.string, - }; - - state = { - loading: true, - data: null, - }; - - componentDidMount () { - const { start_at, end_at, frequency } = this.props; - - api().post('/api/v1/admin/retention', { start_at, end_at, frequency }).then(res => { - this.setState({ - loading: false, - data: res.data, - }); - }).catch(err => { - console.error(err); - }); - } - - render () { - const { loading, data } = this.state; - const { frequency } = this.props; - - let content; - - if (loading) { - content = <FormattedMessage id='loading_indicator.label' defaultMessage='Loading...' />; - } else { - content = ( - <table className='retention__table'> - <thead> - <tr> - <th> - <div className='retention__table__date retention__table__label'> - <FormattedMessage id='admin.dashboard.retention.cohort' defaultMessage='Sign-up month' /> - </div> - </th> - - <th> - <div className='retention__table__number retention__table__label'> - <FormattedMessage id='admin.dashboard.retention.cohort_size' defaultMessage='New users' /> - </div> - </th> - - {data[0].data.slice(1).map((retention, i) => ( - <th key={retention.date}> - <div className='retention__table__number retention__table__label'> - {i + 1} - </div> - </th> - ))} - </tr> - - <tr> - <td> - <div className='retention__table__date retention__table__average'> - <FormattedMessage id='admin.dashboard.retention.average' defaultMessage='Average' /> - </div> - </td> - - <td> - <div className='retention__table__size'> - <FormattedNumber value={data.reduce((sum, cohort, i) => sum + ((cohort.data[0].value * 1) - sum) / (i + 1), 0)} maximumFractionDigits={0} /> - </div> - </td> - - {data[0].data.slice(1).map((retention, i) => { - const average = data.reduce((sum, cohort, k) => cohort.data[i + 1] ? sum + (cohort.data[i + 1].rate - sum)/(k + 1) : sum, 0); - - return ( - <td key={retention.date}> - <div className={classNames('retention__table__box', 'retention__table__average', `retention__table__box--${roundTo10(average * 100)}`)}> - <FormattedNumber value={average} style='percent' /> - </div> - </td> - ); - })} - </tr> - </thead> - - <tbody> - {data.slice(0, -1).map(cohort => ( - <tr key={cohort.period}> - <td> - <div className='retention__table__date'> - {dateForCohort(cohort)} - </div> - </td> - - <td> - <div className='retention__table__size'> - <FormattedNumber value={cohort.data[0].value} /> - </div> - </td> - - {cohort.data.slice(1).map(retention => ( - <td key={retention.date}> - <div className={classNames('retention__table__box', `retention__table__box--${roundTo10(retention.rate * 100)}`)}> - <FormattedNumber value={retention.rate} style='percent' /> - </div> - </td> - ))} - </tr> - ))} - </tbody> - </table> - ); - } - - let title = null; - switch(frequency) { - case 'day': - title = <FormattedMessage id='admin.dashboard.daily_retention' defaultMessage='User retention rate by day after sign-up' />; - break; - default: - title = <FormattedMessage id='admin.dashboard.monthly_retention' defaultMessage='User retention rate by month after sign-up' />; - } - - return ( - <div className='retention'> - <h4>{title}</h4> - - {content} - </div> - ); - } - -} |