[Glitch] Add graphs and retention metrics to admin dashboard (#16829)
Port 07341e7aa6 to glitch-soc
Signed-off-by: Claire <claire.github-309c@sitedethib.com>
master
Eugen Rochko
3 years ago
committed by
Claire
parent
694c073d1f
commit
7aec1bc308
@ -0,0 +1,115 @@ |
||||
import React from 'react'; |
||||
import PropTypes from 'prop-types'; |
||||
import api from 'flavours/glitch/util/api'; |
||||
import { FormattedNumber } from 'react-intl'; |
||||
import { Sparklines, SparklinesCurve } from 'react-sparklines'; |
||||
import classNames from 'classnames'; |
||||
import Skeleton from 'flavours/glitch/components/skeleton'; |
||||
|
||||
const percIncrease = (a, b) => { |
||||
let percent; |
||||
|
||||
if (b !== 0) { |
||||
if (a !== 0) { |
||||
percent = (b - a) / a; |
||||
} else { |
||||
percent = 1; |
||||
} |
||||
} else if (b === 0 && a === 0) { |
||||
percent = 0; |
||||
} else { |
||||
percent = - 1; |
||||
} |
||||
|
||||
return percent; |
||||
}; |
||||
|
||||
export default class Counter extends React.PureComponent { |
||||
|
||||
static propTypes = { |
||||
measure: PropTypes.string.isRequired, |
||||
start_at: PropTypes.string.isRequired, |
||||
end_at: PropTypes.string.isRequired, |
||||
label: PropTypes.string.isRequired, |
||||
href: PropTypes.string, |
||||
}; |
||||
|
||||
state = { |
||||
loading: true, |
||||
data: null, |
||||
}; |
||||
|
||||
componentDidMount () { |
||||
const { measure, start_at, end_at } = this.props; |
||||
|
||||
api().post('/api/v1/admin/measures', { keys: [measure], start_at, end_at }).then(res => { |
||||
this.setState({ |
||||
loading: false, |
||||
data: res.data, |
||||
}); |
||||
}).catch(err => { |
||||
console.error(err); |
||||
}); |
||||
} |
||||
|
||||
render () { |
||||
const { label, href } = this.props; |
||||
const { loading, data } = this.state; |
||||
|
||||
let content; |
||||
|
||||
if (loading) { |
||||
content = ( |
||||
<React.Fragment> |
||||
<span className='sparkline__value__total'><Skeleton width={43} /></span> |
||||
<span className='sparkline__value__change'><Skeleton width={43} /></span> |
||||
</React.Fragment> |
||||
); |
||||
} else { |
||||
const measure = data[0]; |
||||
const percentChange = percIncrease(measure.previous_total * 1, measure.total * 1); |
||||
|
||||
content = ( |
||||
<React.Fragment> |
||||
<span className='sparkline__value__total'><FormattedNumber value={measure.total} /></span> |
||||
<span className={classNames('sparkline__value__change', { positive: percentChange > 0, negative: percentChange < 0 })}>{percentChange > 0 && '+'}<FormattedNumber value={percentChange} style='percent' /></span> |
||||
</React.Fragment> |
||||
); |
||||
} |
||||
|
||||
const inner = ( |
||||
<React.Fragment> |
||||
<div className='sparkline__value'> |
||||
{content} |
||||
</div> |
||||
|
||||
<div className='sparkline__label'> |
||||
{label} |
||||
</div> |
||||
|
||||
<div className='sparkline__graph'> |
||||
{!loading && ( |
||||
<Sparklines width={259} height={55} data={data[0].data.map(x => x.value * 1)}> |
||||
<SparklinesCurve /> |
||||
</Sparklines> |
||||
)} |
||||
</div> |
||||
</React.Fragment> |
||||
); |
||||
|
||||
if (href) { |
||||
return ( |
||||
<a href={href} className='sparkline'> |
||||
{inner} |
||||
</a> |
||||
); |
||||
} else { |
||||
return ( |
||||
<div className='sparkline'> |
||||
{inner} |
||||
</div> |
||||
); |
||||
} |
||||
} |
||||
|
||||
} |
||||
@ -0,0 +1,92 @@ |
||||
import React from 'react'; |
||||
import PropTypes from 'prop-types'; |
||||
import api from 'flavours/glitch/util/api'; |
||||
import { FormattedNumber } from 'react-intl'; |
||||
import { roundTo10 } from 'flavours/glitch/util/numbers'; |
||||
import Skeleton from 'flavours/glitch/components/skeleton'; |
||||
|
||||
export default class Dimension extends React.PureComponent { |
||||
|
||||
static propTypes = { |
||||
dimension: PropTypes.string.isRequired, |
||||
start_at: PropTypes.string.isRequired, |
||||
end_at: PropTypes.string.isRequired, |
||||
limit: PropTypes.number.isRequired, |
||||
label: PropTypes.string.isRequired, |
||||
}; |
||||
|
||||
state = { |
||||
loading: true, |
||||
data: null, |
||||
}; |
||||
|
||||
componentDidMount () { |
||||
const { start_at, end_at, dimension, limit } = this.props; |
||||
|
||||
api().post('/api/v1/admin/dimensions', { keys: [dimension], start_at, end_at, limit }).then(res => { |
||||
this.setState({ |
||||
loading: false, |
||||
data: res.data, |
||||
}); |
||||
}).catch(err => { |
||||
console.error(err); |
||||
}); |
||||
} |
||||
|
||||
render () { |
||||
const { label, limit } = this.props; |
||||
const { loading, data } = this.state; |
||||
|
||||
let content; |
||||
|
||||
if (loading) { |
||||
content = ( |
||||
<table> |
||||
<tbody> |
||||
{Array.from(Array(limit)).map((_, i) => ( |
||||
<tr className='dimension__item' key={i}> |
||||
<td className='dimension__item__key'> |
||||
<Skeleton width={100} /> |
||||
</td> |
||||
|
||||
<td className='dimension__item__value'> |
||||
<Skeleton width={60} /> |
||||
</td> |
||||
</tr> |
||||
))} |
||||
</tbody> |
||||
</table> |
||||
); |
||||
} else { |
||||
const sum = data[0].data.reduce((sum, cur) => sum + (cur.value * 1), 0); |
||||
|
||||
content = ( |
||||
<table> |
||||
<tbody> |
||||
{data[0].data.map(item => ( |
||||
<tr className='dimension__item' key={item.key}> |
||||
<td className='dimension__item__key'> |
||||
<span className={`dimension__item__indicator dimension__item__indicator--${roundTo10(((item.value * 1) / sum) * 100)}`} /> |
||||
<span title={item.key}>{item.human_key}</span> |
||||
</td> |
||||
|
||||
<td className='dimension__item__value'> |
||||
{typeof item.human_value !== 'undefined' ? item.human_value : <FormattedNumber value={item.value} />} |
||||
</td> |
||||
</tr> |
||||
))} |
||||
</tbody> |
||||
</table> |
||||
); |
||||
} |
||||
|
||||
return ( |
||||
<div className='dimension'> |
||||
<h4>{label}</h4> |
||||
|
||||
{content} |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
} |
||||
@ -0,0 +1,141 @@ |
||||
import React from 'react'; |
||||
import PropTypes from 'prop-types'; |
||||
import api from 'flavours/glitch/util/api'; |
||||
import { FormattedMessage, FormattedNumber, FormattedDate } from 'react-intl'; |
||||
import classNames from 'classnames'; |
||||
import { roundTo10 } from 'flavours/glitch/util/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; |
||||
|
||||
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].percent - 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.percent * 100)}`)}> |
||||
<FormattedNumber value={retention.percent} style='percent' /> |
||||
</div> |
||||
</td> |
||||
))} |
||||
</tr> |
||||
))} |
||||
</tbody> |
||||
</table> |
||||
); |
||||
} |
||||
|
||||
return ( |
||||
<div className='retention'> |
||||
<h4><FormattedMessage id='admin.dashboard.retention' defaultMessage='Retention' /></h4> |
||||
|
||||
{content} |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
} |
||||
@ -0,0 +1,73 @@ |
||||
import React from 'react'; |
||||
import PropTypes from 'prop-types'; |
||||
import api from 'flavours/glitch/util/api'; |
||||
import { FormattedMessage } from 'react-intl'; |
||||
import classNames from 'classnames'; |
||||
import Hashtag from 'flavours/glitch/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> |
||||
); |
||||
} |
||||
|
||||
} |
||||
@ -0,0 +1,11 @@ |
||||
import React from 'react'; |
||||
import PropTypes from 'prop-types'; |
||||
|
||||
const Skeleton = ({ width, height }) => <span className='skeleton' style={{ width, height }}>‌</span>; |
||||
|
||||
Skeleton.propTypes = { |
||||
width: PropTypes.number, |
||||
height: PropTypes.number, |
||||
}; |
||||
|
||||
export default Skeleton; |
||||
@ -0,0 +1,26 @@ |
||||
import React from 'react'; |
||||
import PropTypes from 'prop-types'; |
||||
import { IntlProvider, addLocaleData } from 'react-intl'; |
||||
import { getLocale } from 'mastodon/locales'; |
||||
|
||||
const { localeData, messages } = getLocale(); |
||||
addLocaleData(localeData); |
||||
|
||||
export default class AdminComponent extends React.PureComponent { |
||||
|
||||
static propTypes = { |
||||
locale: PropTypes.string.isRequired, |
||||
children: PropTypes.node.isRequired, |
||||
}; |
||||
|
||||
render () { |
||||
const { locale, children } = this.props; |
||||
|
||||
return ( |
||||
<IntlProvider locale={locale} messages={messages}> |
||||
{children} |
||||
</IntlProvider> |
||||
); |
||||
} |
||||
|
||||
} |
||||
@ -0,0 +1,24 @@ |
||||
import 'packs/public-path'; |
||||
import ready from 'flavours/glitch/util/ready'; |
||||
|
||||
ready(() => { |
||||
const React = require('react'); |
||||
const ReactDOM = require('react-dom'); |
||||
|
||||
[].forEach.call(document.querySelectorAll('[data-admin-component]'), element => { |
||||
const componentName = element.getAttribute('data-admin-component'); |
||||
const { locale, ...componentProps } = JSON.parse(element.getAttribute('data-props')); |
||||
|
||||
import('flavours/glitch/containers/admin_component').then(({ default: AdminComponent }) => { |
||||
return import('flavours/glitch/components/admin/' + componentName).then(({ default: Component }) => { |
||||
ReactDOM.render(( |
||||
<AdminComponent locale={locale}> |
||||
<Component {...componentProps} /> |
||||
</AdminComponent> |
||||
), element); |
||||
}); |
||||
}).catch(error => { |
||||
console.error(error); |
||||
}); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,24 @@ |
||||
import './public-path'; |
||||
import ready from '../mastodon/ready'; |
||||
|
||||
ready(() => { |
||||
const React = require('react'); |
||||
const ReactDOM = require('react-dom'); |
||||
|
||||
[].forEach.call(document.querySelectorAll('[data-admin-component]'), element => { |
||||
const componentName = element.getAttribute('data-admin-component'); |
||||
const { locale, ...componentProps } = JSON.parse(element.getAttribute('data-props')); |
||||
|
||||
import('../mastodon/containers/admin_component').then(({ default: AdminComponent }) => { |
||||
return import('../mastodon/components/admin/' + componentName).then(({ default: Component }) => { |
||||
ReactDOM.render(( |
||||
<AdminComponent locale={locale}> |
||||
<Component {...componentProps} /> |
||||
</AdminComponent> |
||||
), element); |
||||
}); |
||||
}).catch(error => { |
||||
console.error(error); |
||||
}); |
||||
}); |
||||
}); |
||||
Loading…
Reference in new issue