force trends integration

src/hooks/index.ts

@@ -18,5 +18,6 @@ export { default as useAppState } from './useAppState'
 export { default as useTickSocket } from './useTickSocket'
 export { default as useIntervalTicks } from './useIntervalTicks'
 export { default as useTractionForce } from './useTractionForce'
+export { default as useForceTrends } from './useForceTrends'
 
 export const useDispatch = () => useDefaultDispatch<AppDispatch>()

src/hooks/useForceTrends.ts

@@ -0,0 +1,41 @@
+import { IPair } from '@interfaces'
+import { useMemo } from 'react'
+
+const TRENDS = ['USDT', 'BTC']
+
+export default function useForceTrends(
+  data: {
+    pair: IPair
+    force: number | null
+  }[]
+) {
+  const results = useMemo(() => {
+    return TRENDS.map((v) => {
+      const forces = data
+        .filter((k) => {
+          const { pair, force } = k
+          const { symbol } = pair
+          const mainCurrency = symbol.substr(
+            symbol.length - v.length,
+            symbol.length - 1
+          )
+
+          return mainCurrency === v && !!force
+        })
+        .map((v) => v.force as number)
+
+      const force = forces.length
+        ? forces.reduce((prev, curr) => {
+            return prev + curr
+          }, 0) / forces.length
+        : null
+
+      return {
+        currency: v,
+        force,
+      }
+    })
+  }, [data])
+
+  return results
+}

src/screens/Stats/extra/InfoTable.tsx

@@ -1,6 +1,11 @@
-import { ActivityIndicator, Card, DataTable, Text } from '@components'
+import { ActivityIndicator, Card, DataTable, Text, Title } from '@components'
 import { unix2time } from '@helpers'
-import { useTheme, useTickSocket, useTractionForce } from '@hooks'
+import {
+  useForceTrends,
+  useTheme,
+  useTickSocket,
+  useTractionForce,
+} from '@hooks'
 import React from 'react'
 import { View, StyleSheet } from 'react-native'
 
@@ -15,31 +20,66 @@ export default function InfoTable() {
     return Math.abs(a.force || 0) - Math.abs(b.force || 0)
   })
 
+  const trends = useForceTrends(res)
+
+  const forceColor = (force: number | null) => {
+    if (force === null) return colors.text
+    if (force > 0) return 'green'
+    if (force < 0) return 'red'
+    return 'orange'
+  }
+
   if (!res.length) return null
 
   return (
     <>
+      <Title style={styles.title} numberOfLines={1}>
+        Тренд MA (4 ч.)
+      </Title>
+      <Card style={styles.table}>
+        <DataTable>
+          <DataTable.Header>
+            <DataTable.Title>Валюта</DataTable.Title>
+            <DataTable.Title numeric>Сила тяги</DataTable.Title>
+          </DataTable.Header>
+
+          {trends.map((v) => {
+            return (
+              <DataTable.Row key={v.currency}>
+                <DataTable.Cell>{v.currency}</DataTable.Cell>
+                <DataTable.Cell numeric>
+                  <Text
+                    style={{
+                      color: forceColor(v.force),
+                      fontWeight: 'bold',
+                    }}
+                  >
+                    {v.force !== null ? `${v.force.toFixed(3)}` : '-'}
+                  </Text>
+                </DataTable.Cell>
+              </DataTable.Row>
+            )
+          })}
+        </DataTable>
+      </Card>
+      <Title style={styles.title} numberOfLines={1}>
+        Тренды по парам (4 ч.)
+      </Title>
       <Card style={styles.table}>
         <DataTable>
           <DataTable.Header>
             <DataTable.Title>Валютная пара</DataTable.Title>
-            <DataTable.Title numeric>Сила тяги (4h)</DataTable.Title>
+            <DataTable.Title numeric>Сила тяги</DataTable.Title>
           </DataTable.Header>
 
           {res.map((v) => {
-            const color = () => {
-              if (v.force === null) return colors.text
-              if (v.force > 0) return 'green'
-              if (v.force < 0) return 'red'
-              return 'orange'
-            }
             return (
               <DataTable.Row key={v.pair.symbol}>
                 <DataTable.Cell>{v.pair.symbol}</DataTable.Cell>
                 <DataTable.Cell numeric>
                   <Text
                     style={{
-                      color: color(),
+                      color: forceColor(v.force),
                       fontWeight: 'bold',
                     }}
                   >
@@ -83,6 +123,11 @@ export default function InfoTable() {
 }
 
 const styles = StyleSheet.create({
+  title: {
+    fontWeight: '200',
+    marginTop: 10,
+    marginBottom: 5,
+  },
   table: {
     position: 'relative',
     marginBottom: 5,