upgrade render (pending)

src/screens/Stats/extra/ConnectInfo.tsx

@@ -0,0 +1,35 @@
+import { Text } from '@components'
+import { unix2time } from '@helpers'
+import { useTickSocket } from '@hooks'
+import React from 'react'
+import { StyleSheet } from 'react-native'
+
+export default function ConnectInfo() {
+  const { status, loading, updatedAt } = useTickSocket()
+
+  return (
+    <>
+      <Text style={styles.infoText}>
+        Статус - {status ? 'включен' : 'выключен'}
+      </Text>
+      {updatedAt && (
+        <Text style={styles.infoText}>
+          Посл. обновление - {unix2time(updatedAt / 1e3, 'DD MMM HH:mm:ss')}
+        </Text>
+      )}
+      {status && (
+        <Text style={styles.infoText}>
+          Состояние - {loading ? 'соединение' : 'вещание'}
+        </Text>
+      )}
+    </>
+  )
+}
+
+const styles = StyleSheet.create({
+  infoText: {
+    marginTop: 5,
+    fontSize: 12,
+    color: '#6d6d6d',
+  },
+})

src/screens/Stats/extra/Content.tsx

@@ -0,0 +1,23 @@
+import { useTractionForce } from '@hooks'
+import React from 'react'
+
+import ConnectInfo from './ConnectInfo'
+import PairsTable from './PairTable'
+import TrendTable from './TrendTable'
+
+export default function InfoTable() {
+  const res = useTractionForce({
+    interval: '4h',
+    first: 7,
+    second: 25,
+  })
+
+  if (!res.length) return null
+  return (
+    <>
+      <TrendTable res={res} />
+      <PairsTable res={res} />
+      <ConnectInfo />
+    </>
+  )
+}

src/screens/Stats/extra/PairTable.tsx

@@ -0,0 +1,128 @@
+import { ActivityIndicator, Card, DataTable, Text, Title } from '@components'
+import { useTheme, useTickSocket } from '@hooks'
+import { IPair } from '@interfaces'
+import React, { useState, useCallback, useMemo } from 'react'
+import { View, StyleSheet } from 'react-native'
+
+enum SortTypes {
+  ASC = 'asc',
+  DESC = 'desc',
+  MODE_ASC = 'm-asc',
+  MODE_DESC = 'm-desc',
+}
+
+const forceColor = (force: number | null) => {
+  if (force === null) return undefined
+  if (force > 0) return 'green'
+  if (force < 0) return 'red'
+  return 'orange'
+}
+
+const PairLine = ({
+  info,
+}: {
+  info: { pair: IPair; force: number | null }
+}) => {
+  return (
+    <DataTable.Row>
+      <DataTable.Cell>{info.pair.symbol}</DataTable.Cell>
+      <DataTable.Cell numeric>
+        <Text
+          style={{
+            color: forceColor(info.force),
+            fontWeight: 'bold',
+          }}
+        >
+          {info.force !== null ? `${info.force.toFixed(5)}` : '-'}
+        </Text>
+      </DataTable.Cell>
+    </DataTable.Row>
+  )
+}
+
+export default function PairsTable({
+  res,
+}: {
+  res: { pair: IPair; force: number | null }[]
+}) {
+  const { colors } = useTheme()
+  const { loading } = useTickSocket()
+  const [sort, setSort] = useState<SortTypes>(SortTypes.MODE_ASC)
+
+  const sortedResult = useMemo(() => {
+    return res.sort((a, b) => {
+      switch (sort) {
+        case SortTypes.ASC:
+          return (a.force || 0) - (b.force || 0)
+        case SortTypes.DESC:
+          return (b.force || 0) - (a.force || 0)
+        case SortTypes.MODE_ASC:
+          return Math.abs(a.force || 0) - Math.abs(b.force || 0)
+        case SortTypes.MODE_DESC:
+          return Math.abs(b.force || 0) - Math.abs(a.force || 0)
+      }
+    })
+  }, [res, sort])
+
+  const sortChangeHandler = useCallback(() => {
+    const values = Object.values(SortTypes)
+    const index = values.indexOf(sort)
+    const value = index === values.length - 1 ? values[0] : values[index + 1]
+    setSort(value as SortTypes)
+  }, [sort])
+
+  return (
+    <>
+      <Title style={styles.title} numberOfLines={1}>
+        Тренды по парам (4 ч.)
+      </Title>
+      <Card style={styles.table}>
+        <DataTable>
+          <DataTable.Header>
+            <DataTable.Title>Валютная пара</DataTable.Title>
+            <DataTable.Title
+              numeric
+              onPress={sortChangeHandler}
+              sortDirection={
+                sort === SortTypes.ASC || sort === SortTypes.MODE_ASC
+                  ? 'ascending'
+                  : 'descending'
+              }
+            >
+              Сила тяги ({sort})
+            </DataTable.Title>
+          </DataTable.Header>
+          {sortedResult.map((v) => {
+            return <PairLine info={v} key={v.pair.symbol} />
+          })}
+        </DataTable>
+        {loading && (
+          <View
+            style={[
+              StyleSheet.absoluteFill,
+              {
+                justifyContent: 'center',
+                alignItems: 'center',
+                backgroundColor: `${colors.background}75`,
+              },
+            ]}
+          >
+            <ActivityIndicator />
+          </View>
+        )}
+      </Card>
+    </>
+  )
+}
+
+const styles = StyleSheet.create({
+  title: {
+    fontWeight: '200',
+    marginTop: 10,
+    marginBottom: 5,
+  },
+  table: {
+    position: 'relative',
+    marginBottom: 5,
+  },
+})