123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293 |
- import React from 'react';
- import PropTypes from 'prop-types';
- import api from 'mastodon/api';
- import { FormattedNumber } from 'react-intl';
- import { roundTo10 } from 'mastodon/utils/numbers';
- import Skeleton from 'mastodon/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,
- params: PropTypes.object,
- };
- state = {
- loading: true,
- data: null,
- };
- componentDidMount () {
- const { start_at, end_at, dimension, limit, params } = this.props;
- api().post('/api/v1/admin/dimensions', { keys: [dimension], start_at, end_at, limit, [dimension]: params }).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>
- );
- }
- }
|