diff options
author | Eugen Rochko <eugen@zeonfederated.com> | 2021-10-14 20:44:59 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-10-14 20:44:59 +0200 |
commit | 07341e7aa60fe7c7d4f298136af99276820940e7 (patch) | |
tree | 0244c21262573d6a94868f8ce7dfa934fabccf1e /app/javascript/mastodon/components/admin/Trends.js | |
parent | 959f7fc580050b37741c92b645b842e45017a010 (diff) |
Add graphs and retention metrics to admin dashboard (#16829)
Diffstat (limited to 'app/javascript/mastodon/components/admin/Trends.js')
-rw-r--r-- | app/javascript/mastodon/components/admin/Trends.js | 73 |
1 files changed, 73 insertions, 0 deletions
diff --git a/app/javascript/mastodon/components/admin/Trends.js b/app/javascript/mastodon/components/admin/Trends.js new file mode 100644 index 000000000..46307a28a --- /dev/null +++ b/app/javascript/mastodon/components/admin/Trends.js @@ -0,0 +1,73 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import api from 'mastodon/api'; +import { FormattedMessage } from 'react-intl'; +import classNames from 'classnames'; +import Hashtag from 'mastodon/components/hashtag'; + +export default class Trends extends React.PureComponent { + + static propTypes = { + limit: PropTypes.number.isRequired, + }; + + state = { + loading: true, + data: null, + }; + + componentDidMount () { + const { limit } = this.props; + + api().get('/api/v1/admin/trends', { params: { limit } }).then(res => { + this.setState({ + loading: false, + data: res.data, + }); + }).catch(err => { + console.error(err); + }); + } + + render () { + const { limit } = this.props; + const { loading, data } = this.state; + + let content; + + if (loading) { + content = ( + <div> + {Array.from(Array(limit)).map((_, i) => ( + <Hashtag key={i} /> + ))} + </div> + ); + } else { + content = ( + <div> + {data.map(hashtag => ( + <Hashtag + key={hashtag.name} + name={hashtag.name} + href={`/admin/tags/${hashtag.id}`} + people={hashtag.history[0].accounts * 1 + hashtag.history[1].accounts * 1} + uses={hashtag.history[0].uses * 1 + hashtag.history[1].uses * 1} + history={hashtag.history.reverse().map(day => day.uses)} + className={classNames(hashtag.requires_review && 'trends__item--requires-review', !hashtag.trendable && !hashtag.requires_review && 'trends__item--disabled')} + /> + ))} + </div> + ); + } + + return ( + <div className='trends trends--compact'> + <h4><FormattedMessage id='trends.trending_now' defaultMessage='Trending now' /></h4> + + {content} + </div> + ); + } + +} |