Untitled
unknown
plain_text
2 years ago
8.8 kB
6
Indexable
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,
},
});
Editor is loading...