Untitled
unknown
plain_text
2 years ago
29 kB
5
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