mastodon/app/javascript/mastodon/components/hashtag.js

// @ts-check
import React from 'react';
import { Sparklines, SparklinesCurve } from 'react-sparklines';
import { FormattedMessage } from 'react-intl';
import ImmutablePropTypes from 'react-immutable-proptypes';
import Permalink from './permalink';
import ShortNumber from 'mastodon/components/short_number';

/**
 * Used to render counter of how much people are talking about hashtag
 *
 * @type {(displayNumber: JSX.Element, pluralReady: number) => JSX.Element}
 */
const accountsCountRenderer = (displayNumber, pluralReady) => (
  <FormattedMessage
    id='trends.counter_by_accounts'
    defaultMessage='{count, plural, one {{counter} person} other {{counter} people}} talking'
    values={{
      count: pluralReady,
      counter: <strong>{displayNumber}</strong>,
    }}
  />
);

const Hashtag = ({ hashtag }) => (
  <div className='trends__item'>
    <div className='trends__item__name'>
      <Permalink
        href={hashtag.get('url')}
        to={`/timelines/tag/${hashtag.get('name')}`}
      >
        #<span>{hashtag.get('name')}</span>
      </Permalink>

      <ShortNumber
        value={
          hashtag.getIn(['history', 0, 'accounts']) * 1 +
          hashtag.getIn(['history', 1, 'accounts']) * 1
        }
        renderer={accountsCountRenderer}
      />
    </div>

    <div className='trends__item__current'>
      <ShortNumber
        value={
          hashtag.getIn(['history', 0, 'uses']) * 1 +
          hashtag.getIn(['history', 1, 'uses']) * 1
        }
      />
    </div>

    <div className='trends__item__sparkline'>
      <Sparklines
        width={50}
        height={28}
        data={hashtag
          .get('history')
          .reverse()
          .map((day) => day.get('uses'))
          .toArray()}
      >
        <SparklinesCurve style={{ fill: 'none' }} />
      </Sparklines>
    </div>
  </div>
);

Hashtag.propTypes = {
  hashtag: ImmutablePropTypes.map.isRequired,
};

export default Hashtag;