Untitled
plain_text
a month ago
8.8 kB
2
Indexable
Never
import React, { useState } 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 { Button, Icon, PopUpMessageGradient } from '../../../components/ui'; import { useColors } from '../../../hooks/useColors'; 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 }, ]; const [isExpanded, setIsExpanded] = useState(false); const handleToggleExpansion = () => { setIsExpanded(!isExpanded); }; 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 margin-20> <View row height={30}> <Icon name="checked" width={16} height={16} /> <Text marginL-10>{t('Equity ratio: Strong')}</Text> </View> <View row height={30}> <Icon name="checked" width={16} height={16} /> <Text marginL-10>{t('Equity ratio: Strong')}</Text> </View> <View row height={30}> <Icon name="warning64" width={16} height={16} /> <Text marginL-10>{t('Equity ratio: Strong')}</Text> </View> <View row height={30}> <Icon name="checked" width={16} height={16} /> <Text marginL-10>{t('Equity ratio: Strong')}</Text> </View> <View row height={30}> <Icon name="checked" width={16} height={16} /> <Text marginL-10>{t('Equity ratio: Strong')}</Text> </View> <View row height={30}> <Icon name="checked" width={16} height={16} /> <Text marginL-10>{t('Equity ratio: Strong')}</Text> </View> </View> <View marginL-20 marginB-16> <TouchableOpacity onPress={handleToggleExpansion}> <View row centerV style={styles(colors).toggleButton}> <Text style={styles(colors).viewAllText}> {isExpanded ? t('viewLess') : t('View all financial evaluation')} </Text> <Icon name={isExpanded ? 'upArrow' : 'arrowRight'} width={6} height={10} fill={colors.action} style={[styles(colors).iconStyle]} /> </View> </TouchableOpacity> </View> <View style={styles(colors).bottomBorder} /> <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-20 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-20 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-20 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, }, bottomBorder: { borderBottomWidth: 1, borderColor: colors.white20, opacity: 0.4, }, topBorderNone: { borderTopWidth: 0, }, textFontSize: { fontSize: 12, }, toggleButton: { marginVertical: 10, fill: colors.action, }, iconStyle: { marginHorizontal: 10, marginVertical: 8, }, viewAllText: { color: colors.action, }, });