Untitled
unknown
plain_text
2 years ago
5.9 kB
5
Indexable
import React from 'react'; import Swiper from 'react-native-swiper'; import { StyleSheet } from 'react-native'; import { View } from 'react-native-ui-lib'; import AnalyticsCard from '../../rb-components/AnalyticsCard'; import { Col, Row, GridView } from '../../rb-components/Grid'; import colors from '../../rb-constants/colors'; import { Dimensions } from 'react-native'; import TextCard from './TextCard'; import { heightPercentageToDP as hp } from 'react-native-responsive-screen'; import { TouchableOpacity } from 'react-native-gesture-handler'; import DateFormat from '../../rb-components/DateFormat'; const { width } = Dimensions.get('window'); type Props = { report: any; company?: any; }; function Traffic(this: any, { report, company }: Props) { return ( <> <View flex-1 spread marginV-5 row> <Swiper loop={false} paginationStyle={styles.paginationStyle} dotStyle={styles.dot} activeDotStyle={styles.activeDot} showsPagination={true}> <View flex-1 margin-4 marginV-8> <Row> <Col style={styles.col} numRows={4}> <AnalyticsCard value={ <TextCard value={'13.0K'} description={'Users'} change={13.5} /> } /> </Col> <Col style={styles.col} numRows={4}> <AnalyticsCard value={ <TextCard value={'11.0K'} description={'New Users'} change={'10.20'} /> } /> </Col> </Row> <Row> <Col style={styles.col} numRows={4}> <AnalyticsCard value={ <TextCard description={'Sessions'} value={'4.3.K'} change={'780.00'} /> } /> </Col> <Col style={styles.col} numRows={4}> <AnalyticsCard value={ <TextCard description={'Sessions Per'} value={1.19} change={'0.02'} /> } /> </Col> </Row> <Row> <Col style={styles.col} numRows={4}> <AnalyticsCard value={ <TextCard description={'Page Views'} value={'2.58'} change={'903'} /> } /> </Col> <Col style={styles.col} numRows={4}> <AnalyticsCard value={ <TextCard description={'Page Per'} value={'32.3K'} change={32.3} /> } /> </Col> </Row> </View> <GridView style={{ justifyContent: 'center' }}> <Row> <Col style={styles.col} numRows={4}> <AnalyticsCard value={ <TextCard description={'Revenue'} value={'32.3K'} change={32.3} /> } /> </Col> <Col style={styles.col} numRows={4}> <AnalyticsCard value={ <TextCard description={'Conversion Rate'} value={'597.7s'} change={'-'} /> } /> </Col> </Row> <Row> <Col style={styles.col} numRows={4}> <AnalyticsCard value={ <TextCard description={'ASD'} value={'578.0K'} change={'-'} /> } /> </Col> <Col style={styles.col} numRows={4}> <AnalyticsCard value={ <TextCard description={'Bounce Rate'} value={'0.31%'} change={'-'} /> } /> </Col> </Row> </GridView> </Swiper> </View> <View marginT-20> <TouchableOpacity style={{ backgroundColor: colors.white, width: width / 2.4 }}> {/* {((formattedTime)) ?? "not found date"} */} <DateFormat /> </TouchableOpacity> </View> </> ); } export default Traffic; const styles = StyleSheet.create({ col: { borderWidth: 1.5, // height: height / 5.3, height: hp(20), flex: 1, borderRadius: 24, margin: 4, borderColor: colors.grey, justifyContent: 'flex-start', alignItems: 'center', }, paginationStyle: { position: 'relative', top: 5, height: 100, backgroundColor: 'gray', justifyContent: 'center', alignItems: 'center', flexDirection: 'row', }, dot: { width: 20, height: 5, borderRadius: 0, marginHorizontal: 5, backgroundColor: colors.white, borderWidth: 1, }, activeDot: { width: 20, height: 5, borderWidth: 1, borderRadius: 5, marginHorizontal: 5, backgroundColor: colors.Orange, }, });
Editor is loading...