about summary refs log tree commit diff
path: root/app/javascript/flavours/glitch/components
diff options
context:
space:
mode:
authorThibaut Girka <thib@sitedethib.com>2018-08-20 11:29:42 +0200
committerThibG <thib@sitedethib.com>2018-08-22 19:27:06 +0200
commit801919fc9b7ab12ca6652b03cce027224df59718 (patch)
tree79b9dd4e50faa8efd4d974dd559049b73337d1f1 /app/javascript/flavours/glitch/components
parent360fbf1bd430ae43f28444b41e01d305c85c4935 (diff)
Add hashtag trendline support to glitch-soc flavour
Port Mastodon's hashtag stats thing to glitch-soc.
This doesn't change how hashtags are ordered, and doesn't add a trending
hashtags section, but it does change how hashtag searches are rendered,
displaying a trend line alongside each hashtag.
Diffstat (limited to 'app/javascript/flavours/glitch/components')
-rw-r--r--app/javascript/flavours/glitch/components/hashtag.js34
1 files changed, 34 insertions, 0 deletions
diff --git a/app/javascript/flavours/glitch/components/hashtag.js b/app/javascript/flavours/glitch/components/hashtag.js
new file mode 100644
index 000000000..88689cc6c
--- /dev/null
+++ b/app/javascript/flavours/glitch/components/hashtag.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import { Sparklines, SparklinesCurve } from 'react-sparklines';
+import { Link } from 'react-router-dom';
+import { FormattedMessage } from 'react-intl';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import { shortNumberFormat } from 'flavours/glitch/util/numbers';
+
+const Hashtag = ({ hashtag }) => (
+  <div className='trends__item'>
+    <div className='trends__item__name'>
+      <Link to={`/timelines/tag/${hashtag.get('name')}`}>
+        #<span>{hashtag.get('name')}</span>
+      </Link>
+
+      <FormattedMessage id='trends.count_by_accounts' defaultMessage='{count} {rawCount, plural, one {person} other {people}} talking' values={{ rawCount: hashtag.getIn(['history', 0, 'accounts']), count: <strong>{shortNumberFormat(hashtag.getIn(['history', 0, 'accounts']))}</strong> }} />
+    </div>
+
+    <div className='trends__item__current'>
+      {shortNumberFormat(hashtag.getIn(['history', 0, 'uses']))}
+    </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;