Untitled
unknown
plain_text
a year ago
29 kB
4
Indexable
import Navbar from "@/components/Navbar"; import TooltipCustom from "@/components/tooltipCustom/tooltipCustom"; import AppLayout from "@/layout/AppLayout"; import { SearchIcon } from "@chakra-ui/icons"; import DoughnutChart from "../../components/chart/Doughnut"; import { Box, Button, Flex, Grid, GridItem, HStack, Heading, Input, InputGroup, InputLeftElement, Link, Select, Table, Tbody, Td, Text, Th, Thead, Tr, VStack, useToast, } from "@chakra-ui/react"; import Image from "next/image"; import React, { useEffect, useState } from "react"; import { AiFillCaretDown, AiOutlineQuestionCircle } from "react-icons/ai"; import PieChart from "../../components/chart/Pie"; import BarChart from "../../components/chart/Bar"; import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, } from "recharts"; import { IconButton } from "@chakra-ui/react"; import { IoIosArrowDown, IoIosHelpCircleOutline, IoIosMore, } from "react-icons/io"; import { Axios } from "@/helpers/axios"; import SiteAnalyserGridItem from "@/components/site-analyser/site-analyserGridItem"; import { AnchorText, RefDomain, SiteAnalyser, SiteAnalyserResponse, } from "../../interface/SiteAnalyserInterface"; import SiteANalyserTable from "@/components/site-analyser/site-analyserTable"; import SiteAnalyserLineChart from "../../components/site-analyser/site-analyserLineChart"; import { BsFilter } from "react-icons/bs"; import { FaCaretDown } from "react-icons/fa"; import { boolean } from "yup"; import SiteAnalyserPositiveAndNegativeBarChart from "@/components/site-analyser/site-analyserPositiveAndNegativeBarchart"; const dummyData: SiteAnalyser = { CitationFlow: 0, TrustFlow: 0, RefIPs: 0, RefSubNets: 0, ExtBackLinks: 0, RefDomains: 0, CrawledURLs: 0, RefDomainTypeLive: "0", RefDomainTypeFollow: "0", NonUniqueLinkTypeNoFollow: "0", TotalNonUniqueLinks: "0", }; const SiteAnalyser = () => { const [domain, setdomain] = useState<string>(""); const [siteAnalyser, setsiteAnalyser] = useState<any>({}); const [anchorText, setanchorText] = useState<AnchorText[]>([]); const [refDomain, setrefDomain] = useState<RefDomain[]>([]); const [filter, setfilter] = useState<string>(""); const [backlinkHistory, setbacklinkHistory] = useState<any[]>([]); const [refDomainHistory, setrefDomainHistory] = useState<any[]>([]); const [selectOptions, setselectOptions] = useState({ backlinksOptions: [], refdomainsOptions: [], }); const [isSearched, setIsSearched] = useState(false); const [totalActiveAndLostBacklinks, settotalActiveAndLostBacklinks] = useState<any[]>([]); const toast = useToast(); const handleDomain = async (url: string) => { try { const data: SiteAnalyserResponse = await Axios.get( `/site-analyser?url=${url}` ); setsiteAnalyser(data?.data?.siteAnalyser); setanchorText(data?.data?.anchorText); setrefDomain(data?.data?.refDomain); setbacklinkHistory(data?.data?.backlinksHistory); setrefDomainHistory(data?.data?.refDomainHistory); setselectOptions((prev: any) => ({ ...prev, backlinksOptions: [ ...prev.backlinksOptions, ...data.data.selectOptionsForBacklinks, ], refdomainsOptions: [ ...prev.refdomainsOptions, ...data.data.selectOptionsForRefDomains, ], })); setIsSearched(true); settotalActiveAndLostBacklinks( data?.data?.totalActiveAndLostBacklinksResponse ); } catch (error: any) { toast({ status: "error", description: error?.response?.data?.message, isClosable: true, duration: 4000, }); } }; const handleOrderChange = (value: string) => { let copiedrefDomain = [...refDomain]; let copiedAnchorText = [...anchorText]; switch (value) { case "refDomain CF Asc": { const data = copiedrefDomain.sort((a: RefDomain, b: RefDomain) => { const volumeA = Number(a.CitationFlow || "0"); const volumeB = Number(b.CitationFlow || "0"); return volumeA - volumeB; }); setrefDomain(data); break; } case "refDomain CF Desc": { const data = copiedrefDomain.sort((a: RefDomain, b: RefDomain) => { const volumeA = Number(a.CitationFlow || "0"); const volumeB = Number(b.CitationFlow || "0"); return volumeB - volumeA; }); setrefDomain(data); break; } case "refDomain TF Desc": { const data = copiedrefDomain.sort((a: RefDomain, b: RefDomain) => { const volumeA = Number(a.TrustFlow || "0"); const volumeB = Number(b.TrustFlow || "0"); return volumeB - volumeA; }); setrefDomain(data); break; } case "refDomain TF Asc": { const data = copiedrefDomain.sort((a: RefDomain, b: RefDomain) => { const volumeA = Number(a.TrustFlow || "0"); const volumeB = Number(b.TrustFlow || "0"); return volumeA - volumeB; }); setrefDomain(data); break; } case "refDomain Links Asc": { const data = copiedrefDomain.sort((a: RefDomain, b: RefDomain) => { const volumeA = Number(a.RefDomains || "0"); const volumeB = Number(b.RefDomains || "0"); return volumeA - volumeB; }); setrefDomain(data); break; } case "refDomain Links Desc": { const data = copiedrefDomain.sort((a: RefDomain, b: RefDomain) => { const volumeA = Number(a.RefDomains || "0"); const volumeB = Number(b.RefDomains || "0"); return volumeB - volumeA; }); setrefDomain(data); break; } case "anchorText refDomain Asc": { const data = copiedAnchorText.sort((a: AnchorText, b: AnchorText) => { const volumeA = Number(a.RefDomains || "0"); const volumeB = Number(b.RefDomains || "0"); return volumeA - volumeB; }); setanchorText(data); break; } case "anchorText refDomain Desc": { const data = copiedAnchorText.sort((a: AnchorText, b: AnchorText) => { const volumeA = Number(a.RefDomains || "0"); const volumeB = Number(b.RefDomains || "0"); return volumeB - volumeA; }); setanchorText(data); break; } case "anchorText TotalLinks Asc": { const data = copiedAnchorText.sort((a: AnchorText, b: AnchorText) => { const volumeA = Number(a.TotalLinks || "0"); const volumeB = Number(b.TotalLinks || "0"); return volumeA - volumeB; }); setanchorText(data); break; } case "anchorText TotalLinks Desc": { const data = copiedAnchorText.sort((a: AnchorText, b: AnchorText) => { const volumeA = Number(a.TotalLinks || "0"); const volumeB = Number(b.TotalLinks || "0"); return volumeB - volumeA; }); setanchorText(data); break; } case "anchorText DeletedLinks Asc": { const data = copiedAnchorText.sort((a: AnchorText, b: AnchorText) => { const volumeA = Number(a.DeletedLinks || "0"); const volumeB = Number(b.DeletedLinks || "0"); return volumeA - volumeB; }); setanchorText(data); break; } case "anchorText DeletedLinks Desc": { const data = copiedAnchorText.sort((a: AnchorText, b: AnchorText) => { const volumeA = Number(a.DeletedLinks || "0"); const volumeB = Number(b.DeletedLinks || "0"); return volumeB - volumeA; }); setanchorText(data); break; } case "anchorText NofollowLinks Asc": { const data = copiedAnchorText.sort((a: AnchorText, b: AnchorText) => { const volumeA = Number(a.NoFollowLinks || "0"); const volumeB = Number(b.NoFollowLinks || "0"); return volumeA - volumeB; }); setanchorText(data); break; } case "anchorText NofollowLinks Desc": { const data = copiedAnchorText.sort((a: AnchorText, b: AnchorText) => { const volumeA = Number(a.NoFollowLinks || "0"); const volumeB = Number(b.NoFollowLinks || "0"); return volumeB - volumeA; }); setanchorText(data); break; } default: { return; } } }; useEffect(() => { handleOrderChange(filter); //eslint-disable-next-line react-hooks/exhaustive-deps }, [filter]); const handleMonthChangeForbacklinksHistory = async (year: string) => { const data: SiteAnalyserResponse = await Axios.get( `/site-analyser/year?url=${domain}&year=${year}` ); setbacklinkHistory(data?.data?.backlinksHistory); }; const handleMonthChangeForrefDomainHistory = async (year: string) => { const data: SiteAnalyserResponse = await Axios.get( `/site-analyser/year?url=${domain}&year=${year}` ); setrefDomainHistory(data?.data?.refDomainHistory); }; return ( <AppLayout> <Box> <Navbar subheading="Get website metrics & insights" searchText={""} handleChange={undefined} /> </Box> <HStack mt={"12px"} bg={"#fff"} w={"61vw"} borderRadius={"20px"} padding={"12px 16px"} boxShadow={"14px 17px 40px 4px #7090B014;"} > <Text pr={"12px"} pl={"14px"} fontWeight={"700"} letterSpacing={"-.5px"} fontSize={"18px"} color={"#022B3A"} fontFamily={"DM Sans, sans-serif"} > Enter a domain or url to search </Text> <InputGroup w={"30vw"}> <InputLeftElement h={"58px"} pointerEvents="none"> <SearchIcon color="gray.300" /> </InputLeftElement> <Input h={"58px"} paddingY={"18px"} borderRadius={"48px"} fontSize={"14px"} bgColor={"#F4F7FE"} placeholder="Enter domain ex. byldd.com" value={domain} onChange={(e) => setdomain(e.target.value)} /> </InputGroup> <Button ml={"8px"} bg={"button.100"} color={"#fff"} borderRadius={"18px"} border={"1px solid #022B3A"} padding={"18px 32px"} onClick={() => handleDomain(domain)} > Search </Button> </HStack> {isSearched && ( <VStack align={"start"} gap={"12px"}> <HStack pl={"6px"} mt={"16px"}> <Link href="#"> <Image src={"/assets/icons/link-icon.svg"} alt="link icon" height={15} width={15} /> </Link> <Text color={"#022B3A"} fontSize={"18px"} fontWeight={"600"}> www.byldd.com </Text> </HStack> <HStack h={"104px"} gap={"13px"} justify={"space-between"}> {siteAnalyser.CitationFlow ? Object.keys(siteAnalyser).map((key, index) => { const value = siteAnalyser[key]; if (index == 0) { return ( <DoughnutChart key={index} label={"Citation Flow"} outOf={100} dataNumber={value} color={"#89C9D8C7"} index={index} /> ); } else if (index == 1) { return ( <DoughnutChart key={index} index={index} label={"Trust Flow"} outOf={100} dataNumber={value} color={"#FC85007D"} /> ); } else { return ( <> {console.log(value, key)} {key === "RefIPs" && ( <SiteAnalyserGridItem heading={key} data={value} key={index} /> )} {key === "RefSubNets" && ( <SiteAnalyserGridItem heading={key} data={value} key={index} /> )} {key === "ExtBackLinks" && ( <SiteAnalyserGridItem heading={key} data={value} key={index} /> )} </> ); } }) : Object.keys(dummyData).map((key, index) => { // const value = dummyData[key]; // if (index == 0) { // return ( // <DoughnutChart // index={index} // label={"Trust Flow"} // outOf={100} // dataNumber={value} // color={"#89C9D8C7"} // key={index} // /> // ); // } else if (index == 1) { // return ( // <DoughnutChart // index={index} // label={"Citation Flow"} // outOf={100} // dataNumber={value} // key={index} // color={"#FC85007D"} // /> // ); // } else { // return ( // <SiteAnalyserGridItem // heading={key} // data={value} // key={index} // /> // ); // } return null; })} </HStack> <Text mt={"14px"} lineHeight={"24px"} fontFamily={"DM Sans, sans-serif"} fontWeight={"700"} fontSize={"22px"} color={"#022B3A"} > Backlink Profile : </Text> <HStack w={"100%"} bg={"#fff"} p={"20px 24px"} borderRadius={"30px"}> <VStack mr={"14px"} w={"100%"} h={"100%"}> <HStack justify={"space-between"} w={"100%"}> <HStack gap={"6px"} alignItems={"baseline"}> <Text color={"#000"} fontWeight={"600"} fontSize={"24px"} fontFamily={"DM Sans, sans-serif"} > Total Backlinks </Text> <Text color={"#000"} fontWeight={"600"} fontSize={"14px"} fontFamily={"DM Sans, sans-serif"} > (All Time) </Text> </HStack>{" "} <Select w={"140px"} borderRadius={"18px"} icon={<FaCaretDown />} iconColor="#A3AED0" color={"#A3AED0"} onChange={(e) => handleMonthChangeForbacklinksHistory(e.target.value) } > {selectOptions?.backlinksOptions.map( (item: any, index: number) => { return ( <option value={item} key={index}> {item} </option> ); } )} </Select> </HStack> <HStack align={"flex-start"} justify={"flex-start"} h={"370px"} w={"100%"} > <SiteAnalyserLineChart data={backlinkHistory} /> </HStack> </VStack> </HStack> <HStack h={"100px"} gap={"14px"} w={"100%"} mt={"16px"} mb={"6px"}> <VStack paddingLeft={"24px"} align={"flex-start"} justify={"center"} borderRadius={"29px"} w={"25%"} h={"100%"} bg={"#478F963D"} > <HStack gap={"4px"}> <Text fontSize="16px" fontFamily={"DM Sans, sans-serif"} color={"#478F96"} fontWeight={"400"} > Referring IPs </Text> <IoIosHelpCircleOutline color="#5F7F9E" fontSize={"14px"} /> </HStack> <Text lineHeight={"30px"} fontSize="32px" fontFamily={"DM Sans, sans-serif"} color={"#2B3674"} > 30,331,233 </Text> </VStack> <VStack paddingLeft={"24px"} align={"flex-start"} justify={"center"} borderRadius={"29px"} w={"25%"} h={"100%"} bg={"#478F963D"} > <HStack gap={"4px"}> <Text fontSize="16px" fontFamily={"DM Sans, sans-serif"} color={"#478F96"} fontWeight={"400"} > Referring Sub Nets </Text> <IoIosHelpCircleOutline color="#5F7F9E" fontSize={"14px"} /> </HStack> <Text lineHeight={"30px"} fontSize="32px" fontFamily={"DM Sans, sans-serif"} color={"#2B3674"} > 30,331,233 </Text> </VStack> <HStack paddingY={"14px"} w={"50%"} borderRadius={"29px"} h={"100%"} bg={"#478F963D"} pr={"16px"} > <VStack paddingLeft={"24px"} align={"flex-start"} justify={"center"} w={"40%"} h={"100%"} borderRightWidth={"1px"} borderRightColor={"#229EBC82"} > <HStack gap={"4px"}> <Text fontSize="16px" fontFamily={"DM Sans, sans-serif"} color={"#478F96"} fontWeight={"400"} > Referring Domains </Text> <IoIosHelpCircleOutline color="#5F7F9E" fontSize={"14px"} /> </HStack> <Text lineHeight={"30px"} fontSize="32px" fontFamily={"DM Sans, sans-serif"} color={"#2B3674"} > 40,331,233 </Text> </VStack> <VStack w={"60%"}> <HStack w={"100%"} justifyContent={"space-between"}> <HStack gap={"4px"}> <Text fontSize="16px" fontFamily={"DM Sans, sans-serif"} color={"#478F96"} fontWeight={"400"} > Referring Sub Nets </Text> <IoIosHelpCircleOutline color="#5F7F9E" fontSize={"14px"} /> </HStack> <Text lineHeight={"30px"} fontSize="24px" fontFamily={"DM Sans, sans-serif"} color={"#2B3674"} > 30,331,233 </Text> </HStack> <HStack w={"100%"} justifyContent={"space-between"}> <HStack gap={"4px"}> <Text fontSize="16px" fontFamily={"DM Sans, sans-serif"} color={"#478F96"} fontWeight={"400"} > Referring Sub Nets </Text> <IoIosHelpCircleOutline color="#5F7F9E" fontSize={"14px"} /> </HStack> <Text lineHeight={"30px"} fontSize="24px" fontFamily={"DM Sans, sans-serif"} color={"#2B3674"} > 30,331,233 </Text> </HStack> </VStack> </HStack> </HStack> <Box w={"100%"} bg={"#fff"} p={"20px 18px"} padding={"20px 8px 20px 14px"} borderRadius={"30px"} h={"400px"} > <Text fontSize={"20px"} fontWeight={"700"} color={"#2B3674"}> Top Referring Domain </Text> <HStack pt={"10px"} pb={"10px"} h={"100%"}> <Box pt={"12px"} h={"100%"} overflow={"scroll"} w={"55%"}> <SiteANalyserTable data={refDomain} boolean={"refDomain"} setfilter={setfilter} /> </Box> <VStack height={"100%"} bg={"#478F96"} p={"20px"} w={"45%"} borderRadius={"16px"} mb={"14px"} > <HStack w={"100%"} justifyContent={"space-between"}> <HStack gap={"6px"} alignItems={"baseline"}> <Text color={"#FFFBFB"} fontWeight={"600"} fontSize={"24px"} fontFamily={"DM Sans, sans-serif"} > Total Referring Domain </Text> <Text color={"#FFFBFB"} fontWeight={"600"} fontSize={"14px"} fontFamily={"DM Sans, sans-serif"} > (All Time) </Text> </HStack>{" "} <Select w={"110px"} borderRadius={"14px"} icon={<IoIosArrowDown />} iconColor="#fff" color={"#fff"} onChange={(e) => handleMonthChangeForrefDomainHistory(e.target.value) } > {selectOptions?.refdomainsOptions.map( (item: any, index: number) => { return ( <option value={item} key={index}> {item} </option> ); } )} </Select> </HStack> <HStack color={"#fff"} w={"100%"} h={"100%"}> <SiteAnalyserLineChart bgTeal={true} data={refDomainHistory} /> </HStack> </VStack> </HStack> </Box> {/* <VStack gap={"17.5px"} borderRadius={"28px"} bg={"#fff"} p={"24px 18px"} > <HStack w={"100%"} justify={"space-between"}> <Text fontWeight={"700"} color={"#2B3674"}> Backlink profile </Text> <Select w={"100px"} border={"none"} color={"#A3AED0"} fontSize={"12px"} icon={<AiFillCaretDown />} > <option>Monthly</option> </Select> </HStack> <PieChart /> <HStack> <VStack align={"start"} gap={"0"} p={"8px"} borderRight={"2px solid #F4F7FE"} > <HStack> <Box bg={"#BABABA"} borderRadius={"50%"} h={"8px"} w={"8px"} ></Box> <Text w={"max-content"} color={"#A3AED0"} fontSize={"12px"}> Total Backlinks </Text> </HStack> <Text ml={"16px"} color={"#2B3674"} fontSize={"18px"} fontWeight={"700"} > {siteAnalyser?.TotalNonUniqueLinks || 0} </Text> </VStack> <VStack align={"start"} gap={"0"} p={"8px"} borderRight={"2px solid #F4F7FE"} > <HStack> <Box bg={"#478F96"} borderRadius={"50%"} h={"8px"} w={"8px"} ></Box> <Text w={"max-content"} color={"#A3AED0"} fontSize={"12px"}> Active Backlinks </Text> </HStack> <Text ml={"16px"} color={"#2B3674"} fontSize={"18px"} fontWeight={"700"} > 223 </Text> </VStack> <VStack gap={"0"} p={"8px"} align={"start"}> <HStack> <Box bg={"#7BE8F2"} borderRadius={"50%"} h={"8px"} w={"8px"} ></Box> <Text w={"max-content"} color={"#A3AED0"} fontSize={"12px"}> Lost Backlinks </Text> </HStack> <Text ml={"16px"} color={"#2B3674"} fontSize={"18px"} fontWeight={"700"} > 33 </Text> </VStack> </HStack> </VStack> */} <VStack p={"14px 24px"} mb={"24px"} borderRadius={"20px"} w={"100%"} bg={"#fff"} > <HStack w={"100%"} justify={"space-between"}> <Text fontSize={"20px"} fontWeight={"700"} color={"#2B3674"}> Anchor Text </Text> <IconButton bg={"#F4F7FE"} color={"#478F96"} fontSize={"22px"} borderRadius={"12px"} h={"28px"} w={"28px"} aria-label="" icon={<IoIosMore />} /> </HStack> <Box w={"100%"} h={"60vh"} overflow={"scroll"}> <SiteANalyserTable data={anchorText} boolean={"anchorText"} setfilter={setfilter} /> </Box> </VStack> </VStack> )} </AppLayout> ); }; export default SiteAnalyser;
Editor is loading...
Leave a Comment