Add hashtag sparkline

src/components/Hashtag.tsx

@@ -3,38 +3,61 @@ import { StackNavigationProp } from '@react-navigation/stack'
 import { TabLocalStackParamList } from '@utils/navigation/navigators'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
-import React, { useCallback } from 'react'
-import { Pressable } from 'react-native'
+import { sumBy } from 'lodash'
+import React, { useCallback, useState } from 'react'
+import { Dimensions, Pressable, View } from 'react-native'
+import Sparkline from './Sparkline'
 import CustomText from './Text'
 
 export interface Props {
   hashtag: Mastodon.Tag
   onPress?: () => void
-  origin?: string
 }
 
-const ComponentHashtag: React.FC<Props> = ({
-  hashtag,
-  onPress: customOnPress,
-  origin
-}) => {
+const ComponentHashtag: React.FC<Props> = ({ hashtag, onPress: customOnPress }) => {
   const { colors } = useTheme()
-  const navigation =
-    useNavigation<StackNavigationProp<TabLocalStackParamList>>()
+  const navigation = useNavigation<StackNavigationProp<TabLocalStackParamList>>()
 
   const onPress = useCallback(() => {
     navigation.push('Tab-Shared-Hashtag', { hashtag: hashtag.name })
   }, [])
 
+  const padding = StyleConstants.Spacing.S * 1.5
+  const width = Dimensions.get('window').width / 4
+  const [height, setHeight] = useState<number>(0)
+
   return (
     <Pressable
       accessibilityRole='button'
-      style={{ padding: StyleConstants.Spacing.S * 1.5 }}
+      style={{
+        flex: 1,
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        padding
+      }}
       onPress={customOnPress || onPress}
+      onLayout={({
+        nativeEvent: {
+          layout: { height }
+        }
+      }) => setHeight(height - padding * 2 - 1)}
     >
-      <CustomText fontStyle='M' style={{ color: colors.primaryDefault }}>
+      <CustomText
+        fontStyle='M'
+        style={{
+          flexShrink: 1,
+          color: colors.primaryDefault,
+          paddingRight: StyleConstants.Spacing.M
+        }}
+        numberOfLines={1}
+      >
         #{hashtag.name}
       </CustomText>
+      <Sparkline
+        data={hashtag.history.map(h => parseInt(h.uses)).reverse()}
+        width={width}
+        height={height}
+      />
     </Pressable>
   )
 }

src/components/Sparkline.tsx

@@ -0,0 +1,86 @@
+import { useTheme } from '@utils/styles/ThemeManager'
+import { maxBy, minBy } from 'lodash'
+import React from 'react'
+import Svg, { G, Path } from 'react-native-svg'
+
+export interface Props {
+  data: number[]
+  width: number
+  height: number
+  margin?: number
+}
+
+const Sparkline: React.FC<Props> = ({ data, width, height, margin = 0 }) => {
+  const { colors } = useTheme()
+
+  const dataToPoints = ({
+    data,
+    width,
+    height
+  }: {
+    data: number[]
+    width: number
+    height: number
+  }): { x: number; y: number }[] => {
+    const max = maxBy(data) || 0
+    const min = minBy(data) || 0
+    const len = data.length
+
+    const vfactor = (height - margin * 2) / (max - min || 2)
+    const hfactor = (width - margin * 2) / (len - (len > 1 ? 1 : 0))
+
+    return data.map((d, i) => ({
+      x: i * hfactor + margin,
+      y: (max === min ? 1 : max - d) * vfactor + margin
+    }))
+  }
+  const points = dataToPoints({ data, width, height })
+  const divisor = 0.25
+  let prev: { x: number; y: number }
+  const curve = (p: { x: number; y: number }) => {
+    let res
+    if (!prev) {
+      res = [p.x, p.y]
+    } else {
+      const len = (p.x - prev.x) * divisor
+      res = [
+        'C',
+        prev.x + len, // x1
+        prev.y, // y1
+        p.x - len, // x2
+        p.y, // y2
+        p.x, // x
+        p.y // y
+      ]
+    }
+    prev = p
+    return res
+  }
+  const linePoints = points.map(p => curve(p)).reduce((a, b) => a.concat(b))
+  const closePolyPoints = [
+    'L' + points[points.length - 1].x,
+    height - margin,
+    margin,
+    height - margin,
+    margin,
+    points[0].y
+  ]
+  const fillPoints = linePoints.concat(closePolyPoints)
+
+  return (
+    <Svg height='auto' width={width}>
+      <G>
+        <Path d={'M' + fillPoints.join(' ')} fill={colors.blue} fillOpacity={0.1} />
+        <Path
+          d={'M' + linePoints.join(' ')}
+          stroke={colors.blue}
+          strokeWidth={1}
+          strokeLinejoin='round'
+          strokeLinecap='round'
+        />
+      </G>
+    </Svg>
+  )
+}
+
+export default Sparkline

src/screens/Compose/Root/Suggestion.tsx

@@ -46,7 +46,7 @@ const ComposeRootSuggestion: React.FC<Props> = ({ item }) => {
   return item.acct ? (
     <ComponentAccount account={item} props={{ onPress }} />
   ) : (
-    <ComponentHashtag hashtag={item} onPress={onPress} origin='suggestion' />
+    <ComponentHashtag hashtag={item} onPress={onPress} />
   )
 }
 

src/screens/Tabs/Shared/Search.tsx

@@ -81,7 +81,7 @@ const TabSharedSearch: React.FC<TabSharedStackScreenProps<'Tab-Shared-Search'>>
         )
       }
     })
-  }, [])
+  }, [mode])
 
   const mapKeyToTranslations = {
     accounts: t('shared.search.sections.accounts'),
@@ -183,7 +183,7 @@ const TabSharedSearch: React.FC<TabSharedStackScreenProps<'Tab-Shared-Search'>>
       case 'accounts':
         return <ComponentAccount account={item} />
       case 'hashtags':
-        return <ComponentHashtag hashtag={item} origin='search' />
+        return <ComponentHashtag hashtag={item} />
       case 'statuses':
         return <TimelineDefault item={item} disableDetails />
       default: