Untitled
unknown
plain_text
6 months ago
7.0 kB
2
Indexable
Never
/* eslint-disable @typescript-eslint/no-shadow */ /* eslint-disable @typescript-eslint/no-unused-vars */ /* eslint-disable react-native/no-inline-styles */ import React, { useState } from 'react'; import { View, Text } from 'react-native-ui-lib'; import { TouchableOpacity } from 'react-native-gesture-handler'; import colors from '../../rb-constants/colors'; import { GridView } from '../../rb-components/Grid'; import DateFormat from '../../rb-components/DateFormat'; import { VictoryBar, VictoryChart, VictoryLabel, VictoryTheme, } from 'victory-native'; import { GetLatestReport } from '../../../api/mobile'; type Props = { report: any; company?: any; }; function Demographics({ report, company }: Props) { let isMale: any; let isFemale: any; const dataOperation = (list: string | any[]) => { const result = [['', '']]; let total = 0; for (let i = 0; i < list.length; i++) { if (list[i].name.search('Change') === -1) { total += list[i].sessions; } } if (total === 0) { return null; } for (let i = 0; i < list.length; i++) { if (list[i].name.search('Change') === -1) { const temp = []; temp.push(list[i].name); temp.push((list[i].sessions * 100) / total); result.push(temp); } } return result; }; const splitData = (list: string | any[], keyword: string) => { const result = [['', '']]; let total = 0; for (let i = 0; i < list.length; i++) { if (list[i].name.search('Change') === -1) { const splitData = list[i].name.split('|'); if (splitData[0] === keyword) { total += list[i].sessions; } } } if (total === 0) { return null; } for (let i = 0; i < list.length; i++) { if (list[i].name.search('Change') === -1) { const splitData = list[i].name.split('|'); if (splitData[0] === keyword) { const temp = []; temp.push(splitData[1]); temp.push((list[i].sessions * 100) / total); result.push(temp); } } } return result; }; const renderChart = () => { const data = report?.data; // const { gaData } = data && data?.analytics; // const connectList = data && data?.connectList; const genderData = [['', '']]; let ageData: string[][] | null = []; const ageErrorData = [ ['', ''], ['25-34', 47.3882945248584], ['35-44', 29.72519404237466], ['45-54', 6.083490664988462], ]; const genderErrorData = [ ['', ''], ['male', 45], ['female', 65], ]; let male; let female; let isErrorGender = false; let isErrorAge = false; const gender = data?.analytics && data?.analytics.gender; const age = data?.analytics && data?.analytics.age; const genderAndAge = data?.analytics && data?.analytics.genderAndAge; if (!gender || gender.length === 0) { isErrorGender = true; } if (!isErrorGender) { male = gender.find((item: { name: string }) => item.name === 'male'); female = gender.find((item: { name: string }) => item.name === 'female'); if (male) { genderData?.push([male.name, male.sessions]); } if (female) { genderData?.push([female.name, female.sessions]); } } if ( !age || age.length === 0 || !genderAndAge || genderAndAge.length === 0 ) { isErrorAge = true; } if (!isErrorAge) { if (isMale) { ageData = splitData(genderAndAge, 'male'); } else if (isFemale) { ageData = splitData(genderAndAge, 'female'); } else { ageData = dataOperation(age); } ageData?.sort(); } const chartData = ageData?.map(item => ({ x: item[0], y: item[1] })) || []; return chartData; }; return ( <> <GridView noScroll={true} style={{ marginHorizontal: 5 }}> <View row centerH> <View row center backgroundColor={colors.White} marginT-30> <TouchableOpacity style={{ borderWidth: 2, borderRadius: 40, width: 100, padding: 10, marginRight: 10, }} onPress={() => {}}> <View center spread> <Text>ALL</Text> </View> </TouchableOpacity> </View> <View row center backgroundColor={colors.White} marginT-30> <TouchableOpacity style={{ borderWidth: 2, borderRadius: 40, width: 100, padding: 10, marginRight: 10, }} onPress={() => {}}> <View center> <Text>MALE</Text> </View> </TouchableOpacity> </View> <View row center backgroundColor={colors.White} marginT-30> <TouchableOpacity style={{ borderWidth: 2, borderRadius: 40, width: 100, padding: 10, marginRight: 10, }} onPress={() => {}}> <View center> <Text>FEMALE</Text> </View> </TouchableOpacity> </View> </View> <View center> <VictoryChart theme={VictoryTheme.material} style={{ background: { fill: colors.white }, }} domainPadding={{ x: 20 }}> <VictoryLabel x={40} y={10} style={{ fontSize: 20, fill: colors.grayLight }} /> <VictoryBar barRatio={1.2} labels={({ datum }) => `# ${datum.y}`} labelComponent={<VictoryLabel dy={15} />} animate={{ animationWhitelist: ['style', 'data', 'size'], // Try removing "size" onExit: { duration: 500, before: () => ({ opacity: 0.3, _y: 0 }), }, onEnter: { duration: 500, before: () => ({ opacity: 0.3, _y: 0 }), after: datum => ({ opacity: 1, _y: datum._y }), }, }} data={renderChart()} style={{ data: { fill: colors.primary, width: 25, }, }} /> </VictoryChart> </View> <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}> {renderChart()?.map((item, index) => ( <View key={index}> <Text style={{ fontSize: 10, color: colors.grayLight }}> {item.x} </Text> </View> ))} </View> </GridView> </> ); } export default Demographics;