pie charts
Yash
javascript
2 months ago
6.8 kB
3
Indexable
export const LeadSourceBreakdown = ({ dashBoardData, heading, dataKey }) => { const pieColors = generateColors(size(dashBoardData?.[dataKey])) const filteredData = useMemo(() => { const withoutZero = filter(dashBoardData?.[dataKey], (d) => d.leadCount !== 0) const withZero = filter(dashBoardData?.[dataKey], (d) => d.leadCount === 0) return ( { withoutZero: withoutZero, withZero: withZero } ) }, [dashBoardData, dataKey]) return <Box w={'50%'}> <Box p={4} bg="white" shadow="md" borderRadius="lg" flex="1" minW="550px" maxH="450px" > <Text fontSize="md" fontWeight="semibold" mb={4} color="#333"> {heading} </Text> <ResponsiveContainer width="100%" height={300}> <PieChart mb={4}> <Pie data={filteredData?.withoutZero || []} dataKey="leadCount" nameKey="name" cx="50%" cy="50%" outerRadius={80} label={({ name, leadCount, convertedLeadCount }) => { const conversionRate = ((convertedLeadCount / leadCount) * 100).toFixed(1); return `${name} (${convertedLeadCount}/${leadCount}) ${conversionRate}%`; }} > {filteredData?.withoutZero?.map((entry, index) => ( <Cell key={`cell-${index}`} fill={pieColors[index]} /> ))} </Pie> <Tooltip /> </PieChart> </ResponsiveContainer> </Box> </Box> } export const EnquiryDashboardBreakdowns = ({ dashboardData }) => { const finalData = useMemo(() => { if (!dashboardData?.allEnquirySourceWithCount) return []; const { merged, grouped } = reduce(dashboardData.allEnquirySourceWithCount, (acc, item) => { if (item._id === null || item._id === "") { if (!acc.merged) { acc.merged = { _id: "N/A", totalCount: 0, convertedCount: 0 }; } acc.merged.totalCount += item.totalCount; acc.merged.convertedCount += item.convertedCount; } else { acc.grouped.push(item); } return acc; }, { merged: null, grouped: [] }); const formattedData = [ ...(merged ? [{ ...merged, name: merged._id }] : []), ...grouped.map(item => ({ ...item, name: item._id })), ]; return formattedData; }, [dashboardData]); const filteredDataStage = useMemo(() => { if (!dashboardData?.allEnquiryStgaeWithCount) return []; const { merged, grouped } = reduce(dashboardData.allEnquiryStgaeWithCount, (acc, item) => { if (item._id !== null && item._id !== "registered" && item._id !== "") { acc.grouped.push(item); } return acc; }, { merged: null, grouped: [] }); const formattedDataStage = [ ...(merged ? [{ ...merged, name: merged._id }] : []), ...grouped.map(item => ({ ...item, name: item._id })), ]; return formattedDataStage; }, [dashboardData]); const finalDataStage = filteredDataStage; const colors = ['#8884d8', '#82ca9d', '#ffc658', '#ff7f50', '#0088fe', '#d0ed57']; return <Flex gap={4}> <Flex align={'stretch'} w={'50%'}> <Box p={4} bg="white" shadow="md" borderRadius="lg" flex="1" minW="700px" maxH="450px" > <Text fontSize="md" fontWeight="semibold" mb={4} color="#333"> Enquiry Source Breakdown </Text> <ResponsiveContainer width="100%" height={300}> <PieChart> <Pie data={finalData} dataKey="totalCount" nameKey="name" cx="50%" cy="50%" outerRadius={120} label={({ name, totalCount, convertedCount }) => { const conversionRate = ((convertedCount / totalCount) * 100).toFixed(1); return `${name} (${convertedCount}/${totalCount}) ${conversionRate}%`; }} > {finalData.map((entry, index) => ( <Cell key={`cell-${index}`} fill={colors[index % colors.length]} /> ))} </Pie> <Tooltip /> </PieChart> </ResponsiveContainer> </Box> </Flex> <Flex align={'stretch'} w={'50%'}> <Box p={4} bg="white" shadow="md" borderRadius="lg" flex="1" minW="700px" maxH="450px" > <Text fontSize="md" fontWeight="semibold" mb={4} color="#333"> Active Enquiry Stage Breakdown </Text> <ResponsiveContainer width="100%" height={300}> <PieChart mb={4}> <Pie data={finalDataStage || []} dataKey="totalCount" nameKey="_id" cx="50%" cy="50%" outerRadius={120} fill="#8884d8" label={({ _id: name, totalCount, convertedCount }) => { return `${name} (${totalCount})`; }} > {map(finalDataStage, (entry, index) => ( <Cell key={`cell-${index}`} fill={colors[index % colors.length]} /> ))} </Pie> <Tooltip /> </PieChart> </ResponsiveContainer> </Box> </Flex> </Flex> }
Editor is loading...
Leave a Comment