Untitled
unknown
plain_text
2 years ago
5.3 kB
6
Indexable
/* eslint-disable react-hooks/rules-of-hooks */ /* eslint-disable @typescript-eslint/no-unused-vars */ import React, { useState } from 'react'; import Swiper from 'react-native-swiper'; import { View, Carousel } from 'react-native-ui-lib'; import { GetLatestReport } from '../../../api/mobile'; import { InfoBoxDevice } from '../InfoBoxDevice'; import { StyleSheet } from 'react-native'; type Props = { report: any; company?: any; }; const Device = ({ report, company }: Props) => { const { data: rapor, isLoading: reportIsLoading } = GetLatestReport( company?.id, ); const findWordValue = (list: string | any[], keyword: any) => { let value = 0; for (let i = 0; i < list.length; i += 1) { if (list[i].name === keyword) { value = list[i].sessions; break; } } return value; }; const devices = report?.data && report?.data?.analytics && report?.data?.analytics?.devices; const analytics = report?.data && report?.data?.analytics; const newUsersByDevices = report?.data && report?.data?.analytics && report?.data?.analytics?.newUsersByDevices; const transactionsByDevices = report?.data && report?.data?.analytics && report?.data?.analytics?.transactionsByDevices; const revenueByDevices = report?.data && report?.data?.analytics && report?.data?.analytics?.revenueByDevices; const mobile = 'mobile'; const desktop = 'desktop'; const tablet = 'tablet'; const mobileChange = 'mobileChange'; const desktopChange = 'desktopChange'; const tabletChange = 'tabletChange'; const sessions = []; let totalSessions = 0; let isAnalyticsError = false; let errorMessageType = ''; if (!analytics) { isAnalyticsError = true; errorMessageType = 'googleErrorMessage'; } if (!isAnalyticsError) { if (devices) { sessions.push(findWordValue(devices, mobile)); sessions.push(findWordValue(devices, desktop)); sessions.push(findWordValue(devices, tablet)); sessions.forEach(item => { if (item) { totalSessions += item; } }); sessions.push(findWordValue(devices, mobileChange)); sessions.push(findWordValue(devices, desktopChange)); sessions.push(findWordValue(devices, tabletChange)); } const newUsers = []; if (newUsersByDevices) { newUsers.push(findWordValue(newUsersByDevices, mobile)); newUsers.push(findWordValue(newUsersByDevices, desktop)); newUsers.push(findWordValue(newUsersByDevices, tablet)); } const transactions = []; if (transactionsByDevices) { transactions.push(findWordValue(transactionsByDevices, mobile)); transactions.push(findWordValue(transactionsByDevices, desktop)); transactions.push(findWordValue(transactionsByDevices, tablet)); } const revenue = []; if (revenueByDevices) { revenue.push(findWordValue(revenueByDevices, mobile)); revenue.push(findWordValue(revenueByDevices, desktop)); revenue.push(findWordValue(revenueByDevices, tablet)); } const sessionsRate = []; if (totalSessions !== 0) { sessionsRate.push( (sessions[0] / totalSessions) * 100, (sessions[1] / totalSessions) * 100, (sessions[2] / totalSessions) * 100, ); } else { sessionsRate.push(0, 0, 0); } const listItems = [ { name: 'MOBILE', sessions: sessions[0], sessionsChange: sessions[3], sessionsRate: sessionsRate[0], newUsers: newUsers[0], transactions: transactions[0], revenue: revenue[0], }, { name: 'DESKTOP', sessions: sessions[1], sessionsChange: sessions[4], sessionsRate: sessionsRate[1], newUsers: newUsers[1], transactions: transactions[1], revenue: revenue[1], }, { name: 'TABLET', sessions: sessions[2], sessionsChange: sessions[5], sessionsRate: sessionsRate[2], newUsers: newUsers[2], transactions: transactions[2], revenue: revenue[2], }, ]; const [activeSlide, setActiveSlide] = useState(0); return ( <View flex marginV-5 paddingB-0> <Carousel onChangePage={index => setActiveSlide(index)} pageControlPosition="under" pageControlProps={{ numOfPages: listItems.length, currentPage: activeSlide, color: 'orange', inactiveColor: 'grey', containerStyle: styles.pageControlContainer, dotStyle: styles.pageControlDot, }}> {listItems.map((item, index) => { return <InfoBoxDevice item={item} />; })} </Carousel> </View> ); } return null; }; export default Device; const styles = StyleSheet.create({ container: { alignItems: 'center', padding: 25, }, pageControlContainer: { flexDirection: 'row', justifyContent: 'center', alignItems: 'center', marginBottom: 10, }, pageControlDot: { width: 10, // Adjust the width to make the dots square-shaped aspectRatio: 1, // Set aspectRatio to 1 to maintain square shape marginHorizontal: 4, backgroundColor: 'black', }, });
Editor is loading...