Untitled
plain_text
a month ago
6.8 kB
0
Indexable
Never
import React from 'react'; import { useTranslation } from 'react-i18next'; import { StyleSheet, TouchableOpacity } from 'react-native'; import { View, Text } from 'react-native-ui-lib'; import { ScrollView } from 'react-native-gesture-handler'; import RealizedTransactions from '../../../components/business/RealizedTransactions'; import { Button, Icon, PopUpMessageGradient } from '../../../components/ui'; import { useColors } from '../../../hooks/useColors'; import DepthStats from '../../../components/business/DepthStats'; import { CompanyRatingInfo } from '../../../components/business'; import { CurrencyChart, FinancialsChart, SpiderChart } from '../../../components/business/Chart'; import { GradientCardList } from '../../../components/ui/Market'; export const FundamentalScreen = () => { const { t } = useTranslation(); const { colors }: any = useColors(); const ratingData = [ { name: 'Efficiency', score: 1.5 }, { name: 'Liquidity', score: 2 }, { name: 'Leverage', score: 2.3 }, { name: 'Profitability', score: 4.4 }, { name: 'Growth', score: 3.5 }, ]; const multipleData = [ { name: 'P/E', value: 36.78 }, { name: 'M/B', value: 24.89 }, { name: 'PEG', value: 'n/a' }, { name: 'P/S', value: 27.58 }, { name: 'EV/EBITDA', value: -37.78 }, { name: 'EV/NOP', value: 'n/a' }, ]; const dataFinancial = [ { date: 'June 2021', sales: 10000000, profit: -11000000, netProfit: 4000000 }, { date: 'Sep 2021', sales: 14000000, profit: 9000000, netProfit: -4000000 }, { date: 'Dec 2021', sales: -10000000, profit: 12000000, netProfit: 6000000 }, { date: 'Mar 2022', sales: 9000000, profit: -13000000, netProfit: 5000000 }, ]; return ( <> <ScrollView height={100}> <PopUpMessageGradient key={'fundamentals'} text={t( 'Fundamental analysis focuses on getting to know a company and understanding some of the factors that may affect its stock price, such as financial health, management teams competency, industry trends, competitive positioning, and macroeconomic influences.', )} icon={<Icon name="warningGr" width={24} height={24} />} enableHiding={true} /> <View margin-20> <SpiderChart /> <CompanyRatingInfo data={ratingData} /> </View> <View style={styles(colors).topBorder}> <View row center> <Icon name="warningGr" width={24} height={24} /> <Text style={styles(colors).textColor}>{t('allPriceLevels')}</Text> </View> </View> <View padding-20> <Text>Multiples</Text> <View marginT-20> <GradientCardList data={multipleData} renderItem={({ item, index }) => ( <View style={{ height: 70 }} key={index} center> <Text center>{item.name}</Text> <Text center marginT-10> {item.value} </Text> </View> )} onItemPress={index => console.log(index)} numColumns={3} /> </View> </View> <View margin-20> <Text>{t('Foreign currency information')}</Text> <View marginT-10 style={{ backgroundColor: 'rgba(255, 255, 255, 0.04)', borderRadius: 8 }}> <CurrencyChart /> </View> </View> <View margin-20> <Text>{t('Company financials')}</Text> <View marginT-10 style={{ backgroundColor: 'rgba(255, 255, 255, 0.04)', borderRadius: 8 }}> <View margin-20> <FinancialsChart data={dataFinancial} barColors={[colors.elektricBlueDk, colors.brightNavyDk, colors.darkBlueGreyDk]} financialLabels={['Sales Revenue', 'Core Profit', 'Net Profit']} /> </View> <TouchableOpacity marginL-10> <View marginL-10 row> <Text style={styles(colors).textColor}>{t('viewMoreDetails')}</Text> <Icon style={styles(colors).arrowStyle} name="arrowRight" width={6} height={10} fill={colors.action} /> </View> </TouchableOpacity> </View> <View marginT-10 style={{ backgroundColor: 'rgba(255, 255, 255, 0.04)', borderRadius: 8 }}> <View margin-20> <FinancialsChart data={dataFinancial} barColors={['rgba(175, 239, 189, 1)', 'rgba(38, 185, 176, 1)', 'rgba(162, 124, 242, 1)']} financialLabels={['Equities', 'Net Debth', 'Total Assets']} /> </View> <TouchableOpacity marginL-10> <View marginL-10 row> <Text style={styles(colors).textColor}>{t('viewMoreDetails')}</Text> <Icon style={styles(colors).arrowStyle} name="arrowRight" width={6} height={10} fill={colors.action} /> </View> </TouchableOpacity> </View> <View marginT-10 style={{ backgroundColor: 'rgba(255, 255, 255, 0.04)', borderRadius: 8 }}> <View margin-20> <FinancialsChart data={dataFinancial} barColors={['rgba(162, 124, 242, 1)', 'rgba(112, 39, 185, 1)', 'rgba(48, 48, 135, 1)']} financialLabels={[ 'Cash and Cash Equivalents at the Beginning od the Period', 'Cash and Cash Equivalents at the end of the Period', 'Cash Flows from Operating Activities', ]} /> </View> <TouchableOpacity marginL-10> <View marginL-10 row> <Text style={styles(colors).textColor}>{t('viewMoreDetails')}</Text> <Icon style={styles(colors).arrowStyle} name="arrowRight" width={6} height={10} fill={colors.action} /> </View> </TouchableOpacity> </View> </View> <View row center marginT-20> <Button style={styles(colors).buttonSuccess} success label={t('BUY')} onPress={() => {}} /> <Button style={styles(colors).buttonDanger} danger label={t('SELL')} onPress={() => {}} /> </View> </ScrollView> </> ); }; const styles = (colors: any) => StyleSheet.create({ buttonSuccess: { width: 148, height: 48, }, buttonDanger: { width: 148, height: 48, marginLeft: 16, }, textColor: { color: colors.action, fontSize: 12, marginBottom: 20, marginLeft: 20, }, arrowStyle: { marginLeft: 10, marginTop: 3, }, topBorder: { borderTopWidth: 1, borderColor: colors.white20, opacity: 0.4, }, });