Untitled
unknown
plain_text
2 years ago
3.9 kB
3
Indexable
import React from 'react'; import { Text, View } from 'react-native-ui-lib'; import { FlatList, StyleSheet, useWindowDimensions } from 'react-native'; import { useTranslation } from 'react-i18next'; import { useColors } from '../../../hooks/useColors'; export function StackedChart() { const { colors }: any = useColors(); const { t } = useTranslation(); const data: any = [ { price: 243.0, buy: 12.229, sell: 8.229 }, { price: 243.01, buy: 7.229, sell: 14.873 }, { price: 243.02, buy: 43.223, sell: 10.229 }, { price: 243.03, buy: 32.119, sell: 25.701 }, { price: 243.04, buy: 19.228, sell: 18.228 }, { price: 243.05, buy: 25.882, sell: 24.916 }, { price: 243.06, buy: 42.971, sell: 45.229 }, { price: 243.07, buy: 14.287, sell: 20.997 }, { price: 243.08, buy: 15.882, sell: 7.972 }, { price: 243.09, buy: 9.907, sell: 5.927 }, ]; let { width } = useWindowDimensions(); width = width - 250 - 32; const sumData = data.reduce((acc: any, item: any) => acc + item.buy, 0); const sumData2 = data.reduce((acc: any, item: any) => acc + item.sell, 0); const maxBuy = Math.max(...data.map((item: any) => item.buy)); const maxSell = Math.max(...data.map((item: any) => item.sell)); const x = width / maxBuy; const y = width / maxSell; return ( <> <View center> <View row marginH-20 marginT-20 width={280}> <Text body2 secondaryText flex-1 center> {t('buyQuantity')} </Text> <Text body2 secondaryText flex-1 center> {t('price')} </Text> <Text body2 secondaryText flex-1 center> {t('sellQuantity')} </Text> </View> <FlatList data={data} renderItem={({ item, index }: any) => ( <View row width={320} center marginT-12 marginB-12> <View style={styles(colors).greenColorView} width={x * item.buy}> <View style={styles(colors).greenColorTextView}> <Text style={styles(colors).greenColor} key={index} body2> {item.buy.toFixed(3)} </Text> </View> </View> <View> <Text key={index} body2 primaryText center> {item.price.toFixed(2)} </Text> </View> <View style={styles(colors).redColorView} width={y * item.sell}> <Text style={styles(colors).redColor} key={index} body2> {item.sell.toFixed(3)} </Text> </View> </View> )} /> <View center style={styles(colors).topBorder} width={320}> <View marginT-10 marginB-10 row> <Text body2 style={{ color: colors.greenPrice }} flex-1 center> {sumData.toFixed(3)} </Text> <Text body2 style={{ color: colors.redPrice }} flex-1 center> {sumData2.toFixed(3)} </Text> </View> </View> </View> </> ); } const styles = (colors: any) => StyleSheet.create({ redColor: { color: colors.redPrice, paddingLeft: 4, width: 100, }, greenColor: { color: colors.greenPrice, paddingRight: 4, width: 100, textAlign: 'right', }, greenColorTextView: { position: 'absolute', right: 0, }, redColorView: { backgroundColor: colors.darkRedBg, backgroundOpacity: 0.6, position: 'absolute', left: 0, marginLeft: 220, height: 24, justifyContent: 'center', }, greenColorView: { backgroundColor: colors.darkGreenBg, backgroundOpacity: 0.6, position: 'absolute', right: 0, marginRight: 220, height: 24, justifyContent: 'center', }, topBorder: { borderTopWidth: 1, borderColor: colors.white20, }, });
Editor is loading...