= observer(({isFullWidth=false, className=''}) => {\n const {keywordResearcherV2: {keywordDetails: {getKeywordDetailsData, loadingKeywordMainDetails}}} = useStore('');\n const chartData = getKeywordDetailsData?.metrics?.trendData ? getKeywordDetailsData?.metrics?.trendData : [];\n const currentDomain = getDomain(window.location.hostname);\n const isWhiteLabelDomain = !linkgraphDomains.includes(currentDomain);\n const tooltipFormatter = function(series: any) {\n const element = (\n \n
\n {moment(series[0].axisValue).format('MMM DD, YYYY')}\n \n {series?.reverse()?.map((item, index: number) => {\n return (\n
\n
\n \n {/* {moment(item.axisValue).format('MMM DD, YYYY')} */}\n \n \n \n
\n
\n );\n })}\n
\n HISTORICAL SEARCH VOLUME \n {loadingKeywordMainDetails ?\n \n
:\n ((!loadingKeywordMainDetails && chartData?.length) ? \n {(isPublicKeywordResearcherV2() && isWhiteLabelDomain ) ? ' ' : isPublicKeywordResearcherV2() && {\n return moment(value).format('MMM');\n },\n },\n axisTick: {\n alignWithLabel: true,\n },\n vaxix: 0,\n min: 0,\n data: chartData?.map(item=>item?.date),\n },\n grid: {\n left: 45,\n right: 12,\n bottom: 20,\n top: 15,\n },\n yAxis: {\n type: 'value',\n show: true,\n axisTick: {\n show: true,\n }, splitLine: {\n lineStyle: {\n color: '#bcbcbf',\n type: 'dashed',\n },\n },\n axisLabel: {\n formatter: value => numeral(value).format('0.[0][a]').toUpperCase(),\n },\n },\n series: [\n {\n name: 'Search volume',\n type: 'line',\n color: '#FF8536',\n symbol: 'none',\n areaStyle: {\n color: new graphic.LinearGradient(0, 0, 0, 1, [{\n offset: 0,\n color: '#FF85361A',\n }, {\n offset: 0.8,\n color: '#ffffff',\n }]),\n\n },\n data: chartData?.map(item=>item?.volume),\n },\n ],\n tooltip: {\n trigger: 'axis',\n formatter: tooltipFormatter,\n confine: true,\n },\n }}/>\n :\n \n );\n});\n\nconst ChartContainer = styled.div`\n height: calc(100% - 25px);\n width: 100%;\n position: relative;\n`;\n\nconst Container = styled.div<{isFullWidth: boolean}>`\n background: #FFFFFF;\n border: 1px solid #E8E8E8;\n box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.02);\n border-radius: 10px;\n width: ${p => p.isFullWidth ? '100%' : '70%'};\n padding: 22px 25px 15px 25px;\n`;\n\nconst Heading = styled.div`\n font-weight: 600;\n font-size: 12px;\n line-height: 20px;\n text-transform: uppercase;\n color: #121212;\n`;\n","import styled from 'styled-components';\nimport ReactEcharts from 'echarts-for-react';\nimport {observer} from 'mobx-react-lite';\nimport {SkeletonHorizontalLoaderGray} from '@/components/common-components/components';\nimport {ColumnsType} from 'antd/lib/table';\nimport {getProgressColor} from '@/utils/colors';\nimport {formatNumber, formatLargeNumber} from '@/utils/number';\nimport {Collapse, Tooltip} from 'antd';\nimport {graphic} from 'echarts';\nimport {Badge} from 'antd';\nimport numeral from 'numeral';\nimport {renderToString} from 'react-dom/server';\nimport moment from 'moment';\nimport {EChartOption} from 'echarts';\nimport {useStore} from '@/store/root-store';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faCaretDown, faCaretRight} from '@fortawesome/pro-solid-svg-icons';\nimport {useState, useEffect} from 'react';\n// import {SkeletonRingLoader} from '@/components/common-components';\nimport {truncate} from '@/utils/string';\nimport {faCircleInfo} from '@fortawesome/pro-regular-svg-icons';\nimport {EmptyStateKeDetail} from './emptyStateKe';\nimport {getDomain, isPublicKeywordResearcherV2, removeProtocolAndPrefix} from '@/utils/url';\nimport {getSingleUrlParam} from '@/utils/url';\nimport {UrlDropdown} from './commonUrlDropdown';\nimport {ChartOverlayBanner} from '../../ke-common-components/chartOverlayBanner';\nimport {useRouter} from 'next/router';\nimport {TableStyled} from '../../../home-page-main/components/table-styled';\nimport {Button} from '@/components/common-components';\nimport {linkgraphDomains} from '@/utils/router';\nimport {NextImg} from '@/utils/nextImg';\n\nexport const KeywordCompetition = observer(() => {\n const router = useRouter();\n const keywordSerp = router.query?.keyword;\n const {\n keywordResearcherV2: {\n keywordDetails: {\n exportSerpTable,\n exportingSerpOverview,\n getSerpOverviewDetails,\n getKeywordDetailsData,\n getOrganicPaidHistoryData,\n loadingOrganicPaidHistoryDetails,\n loadingSerpOverviewDetails,\n // getKeywordDetailList,\n // keSelectedKeyword,\n },\n },\n } = useStore('');\n const {settings: {customer: {setAuthModal}}} = useStore('');\n const cardsData = getOrganicPaidHistoryData?.organicRankings?.serpAnalysis;\n const [selectedDuration, setSelectedDuration] = useState('All time');\n const [loadAllRecord, setLoadAllRecord] = useState(false);\n const [checkedList, setCheckedList] = useState([]);\n const [screenWidth, setScreenWidth] = useState(typeof window !== 'undefined' ? window.innerWidth : 0);\n const countryCode = getSingleUrlParam('countryCode') || getKeywordDetailsData?.countryCode;\n const currentDomain = getDomain(window.location.hostname);\n const isWhiteLabelDomain = !linkgraphDomains.includes(currentDomain);\n const getDataByDate = (diff, dataList) => {\n const startDate = new Date(moment().startOf('month').subtract(diff, 'months').format('YYYY-MM-DD'));\n const endDate = new Date(moment().startOf('month').format('YYYY-MM-DD'));\n const resultProductData = dataList?.filter(a => {\n const date = new Date(a?.date);\n return (date >= startDate && date <= endDate);\n });\n return resultProductData;\n };\n const getChartData = data => {\n switch (selectedDuration) {\n case '3m':\n return getDataByDate(3, data);\n case '6m':\n return getDataByDate(6, data);\n case '1y':\n return getDataByDate(12, data);\n case 'All time':\n return data?.slice();\n default:\n return [];\n }\n };\n const chartData = getChartData(getOrganicPaidHistoryData?.organicRankings?.graph);\n const getArrangedData = (key, data) => {\n switch (key) {\n case 'answer_box':\n return data?.answers?.map(item => item?.answer);\n case 'people_also_ask':\n return data?.map((item, idx) => {\n return {\n id: idx + 1,\n title: item?.question,\n subTitle: item?.answer,\n DisplayLink: item?.source?.displayedLink,\n link: item?.source?.link,\n };\n });\n case 'knowledge_graph':\n return data?.images?.map(item => {\n return {\n DisplayLink: item?.slice(0, 50)+'...',\n link: item,\n };\n });\n case 'videos':\n return data?.map(item => {\n return {\n title: item?.title,\n subTitle: item?.source,\n DisplayLink: item?.link,\n link: item?.link,\n };\n });\n case 'ads':\n return data?.map((item, idx) => {\n return {\n id: idx + 1,\n title: item?.title,\n subTitle: item?.description,\n DisplayLink: item?.displayedLink,\n link: item?.link,\n };\n });\n case 'images':\n return data?.map((item, idx) => {\n return {\n id: idx + 1,\n title: item?.title,\n subTitle: item?.description,\n DisplayLink: item?.link,\n image: item?.image,\n link: item?.link,\n blockPosition: item?.blockPosition,\n };\n });\n case 'local_results':\n return data?.map((item, idx) => {\n return {\n id: idx + 1,\n title: item?.title,\n subTitle: item?.description,\n DisplayLink: item?.link,\n link: item?.link,\n };\n });\n case 'shopping':\n return data?.map((item, idx) => {\n return {\n id: idx + 1,\n title: item?.title,\n subTitle: item?.merchant,\n DisplayLink: item?.link,\n link: item?.link,\n };\n });\n default:\n return [];\n }\n };\n\n const getColors = val => {\n switch (val) {\n case 0:\n return '#7F4EAD';\n case 1:\n return '#F1AA3E';\n case 2:\n return '#34AEF3';\n case 3:\n return '#2D6CCA';\n case 4:\n return '#FF8536';\n case 5:\n return '#BFE15E';\n case 6:\n return '#4EBBAB';\n case 7:\n return '#F58069';\n case 8:\n return '#B61945';\n case 9:\n return '#617C14';\n default:\n return '#474747';\n }\n };\n\n const getSitesList = () => {\n const sitesArr = [];\n const sitesColorList = [];\n if (chartData?.length) {\n for (let index = 0; index < chartData.length; index++) {\n const element = chartData[index];\n for (let index = 0; index < element?.rankings?.length; index++) {\n const ranking = element?.rankings[index];\n const findSite = sitesArr?.findIndex(z => z == ranking?.site) !== -1;\n if (!findSite) {\n sitesArr.push(ranking?.site);\n sitesColorList.push({\n url: ranking?.site,\n color: getColors(index),\n checked: checkedList?.find(x => x?.url == ranking?.site)?.checked,\n });\n }\n }\n }\n }\n return sitesColorList;\n };\n\n useEffect(() => {\n if (chartData?.length) {\n setCheckedList(getSitesList()?.map(item => {\n return {\n ...item,\n checked: true,\n };\n }));\n }\n }, [chartData?.length]);\n\n useEffect(() => {\n const handleResize = () => {\n setScreenWidth(window.innerWidth);\n };\n\n window.addEventListener('resize', handleResize);\n\n return () => {\n window.removeEventListener('resize', handleResize);\n };\n }, []);\n\n const columns: ColumnsType = [\n // {\n // title: '',\n // key: 'position',\n // dataIndex: 'position',\n // width: 45,\n // render: (_, data: any) => {\n // const sitesList = checkedList?.map(z => z?.url);\n // const sitesColors = checkedList;\n // const site = sitesColors?.find(item => data?.data?.link == item?.url);\n // return \n // {sitesList?.includes(data?.data?.link) ? \n // {\n // const getList = [...checkedList];\n // const siteIndex = getList?.findIndex(x => x?.url == data?.data?.link);\n // if (siteIndex != -1) {\n // getList[siteIndex].checked = e.target?.checked;\n // setCheckedList(getList);\n // }\n // }}/>\n // : ''}\n //
;\n // },\n // },\n {\n title: POS ,\n key: 'position',\n dataIndex: 'position',\n width: 50,\n align: 'left',\n fixed: screenWidth >= 920 ? 'left' as 'left' : false,\n render: (_, data: any) => {\n return {data?.data?.position ?? ''}
;\n },\n },\n {\n title: () => PAGE / URL ,\n key: 'columnName',\n dataIndex: 'columnName',\n fixed: screenWidth >= 920 ? 'left' as 'left' : false,\n width: '90%',\n render: (_, data: any) => {\n return \n {data?.type == 'organic_result' ?
\n \n {data?.data?.link} \n
:
\n isActive ? {}} icon={faCaretDown}/> :\n {}} icon={faCaretRight}/>}>\n {data?.columnName}
}>\n
\n {data?.type == 'images' || data?.type == 'knowledge_graph' ?\n
\n { getArrangedData(data?.type, data?.data)?.map((item, index) => {\n return
\n
\n
\n
\n
{getDomain(item?.link)} \n
\n
;\n })}
:\n getArrangedData(data?.type, data?.data)?.map((item, index) => {\n return
\n {typeof item == 'string' ?
{item}
:\n
\n \n {item?.title || ''}
\n {item?.subTitle || ''}
\n {item?.link ? \n }\n
;\n })}
\n \n \n
\n {`The strength of your target's backlink profile compared to the other websites in our database on a 100-point logarithmic scale\n`} } placement={'bottomLeft'} color='#fff' overlayInnerStyle={{borderRadius: '6px', maxHeight: '200px', width: '300px'}}> \n domain rating \n
,\n key: 'dr',\n dataIndex: 'dr',\n align: 'left',\n width: 80,\n sorter: (a: any, b: any) => a?.data?.dr - b?.data?.dr,\n render: (_, data: any) => {\n return <>\n {data?.type == 'organic_result' ?\n \n • {data?.data?.dr}\n : ''}\n ;\n },\n },\n {\n title: \n domain authority \n
,\n key: 'authorityScore',\n dataIndex: 'authorityScore',\n align: 'left',\n width: 100,\n sorter: (a: any, b: any) => a?.data?.authorityScore - b?.data?.authorityScore,\n render: (_, data: any) => {\n return <>\n {data?.type == 'organic_result' ?\n \n • {data?.data?.authorityScore || '-'}\n : ''}\n ;\n },\n },\n {\n title: \n backlinks \n
,\n key: 'backlinksCount',\n dataIndex: 'backlinksCount',\n align: 'left',\n width: 100,\n sorter: (a: any, b: any) => a?.data?.backlinksCount - b?.data?.backlinksCount,\n render: (_, data: any) => {\n return <>\n {data?.type == 'organic_result' ? data?.data?.backlinksCount ? formatLargeNumber(data?.data?.backlinksCount, 1)?.toString()?.replace('.0', '') : '-' : ''}\n ;\n },\n },\n {\n title: \n {`Referring domains are websites from which the page has one or more backlinks.`}\n } placement={'bottomLeft'} color='#fff' overlayInnerStyle={{borderRadius: '6px', maxHeight: '200px', width: '300px'}}> \n page ref. domains \n
,\n key: 'domains',\n dataIndex: 'domains',\n align: 'left',\n width: 100,\n sorter: (a: any, b: any) => a?.data?.domainsCount - b?.data?.domainsCount,\n\n render: (_, data: any) => {\n return \n {data?.type == 'organic_result' ? data?.data?.domainsCount ? formatLargeNumber(data?.data?.domainsCount, 1)?.toString()?.replace('.0', '') : - : ''}\n
;\n },\n },\n // {\n // title: keywords ,\n // key: 'keywordsCount',\n // dataIndex: 'keywordsCount',\n // align: 'left',\n // width: 100,\n // sorter: (a: any, b: any) => a?.data?.keywordsCount - b?.data?.keywordsCount,\n\n // render: (_, data: any) => {\n // return \n // {data?.type == 'organic_result' ? data?.data?.keywordsCount ? formatLargeNumber(data?.data?.keywordsCount, 1)?.toString()?.replace('.0', '') : '-' : ''}\n //
;\n // },\n // },\n {\n title: \n {`We estimate the monthly organic search traffic a result gets from all the keywords it ranks for, based on the 12-month average of searches for those ranking keywords.`} } placement={'bottomLeft'} color='#fff' overlayInnerStyle={{borderRadius: '6px', maxHeight: '200px', width: '300px'}}> \n organic traffic \n
,\n key: 'ot',\n dataIndex: 'ot',\n align: 'left',\n width: 90,\n sorter: (a: any, b: any) => a?.data?.traffic - b?.data?.traffic,\n\n render: (_, data: any) => {\n return \n {data?.type == 'organic_result' ? data?.data?.traffic ? formatLargeNumber(data?.data?.traffic, 1)?.toString()?.replace('.0', '') : '-' : ''}\n
;\n },\n },\n // {\n // title: \n // {`We estimate the monthly organic search traffic a result gets from all the keywords it ranks for, based on the 12-month average of searches for those ranking keywords.`} } placement={'bottomLeft'} color='#fff' overlayInnerStyle={{borderRadius: '6px', maxHeight: '200px', width: '300px'}}> \n // total domain traffic \n //
,\n // key: 'traffic',\n // dataIndex: 'traffic',\n // align: 'left',\n // width: 100,\n // sorter: (a: any, b: any) => a?.data?.ot - b?.data?.ot,\n\n // render: (_, data: any) => {\n // return \n // {data?.type == 'organic_result' ? data?.data?.ot ? formatLargeNumber(data?.data?.ot, 1)?.toString()?.replace('.0', '') : '-' : ''}\n //
;\n // },\n // },\n // {\n // title: keywords ,\n // key: 'sv',\n // dataIndex: 'sv',\n // align: 'right',\n // width: 80,\n // render: (_, data: any) => {\n // return \n // {data?.data?.dr}\n //
;\n // },\n // },\n // {\n // title: \n // page backlinks \n //
,\n // key: 'cpc',\n // dataIndex: 'cpc',\n // align: 'right',\n // width: 100,\n // render: (_, data: any) => {\n // return \n // {data?.data?.dr}\n //
;\n // },\n // },\n ];\n\n const tooltipFormatter = function(series: any) {\n const element = (\n \n \n {moment(series[0].axisValue).format('MMM DD, YYYY')}\n \n \n \n URL \n POSITION \n \n {series?.filter(items=> items?.data)?.sort((a, b) => a?.data - b?.data)?.map((item, index: number) => {\n return (\n \n \n \n \n \n {numeral(item.data).format('0.[0][a]').toUpperCase()} \n \n );\n })}\n \n \n );\n return renderToString(element);\n };\n\n const makeSeries = (): EChartOption.Series[] => {\n if (chartData?.length && !loadingOrganicPaidHistoryDetails) {\n const sitesList = checkedList;\n const dataArr = sitesList?.slice(0, 10)?.map(item => {\n const siteData = chartData?.map(z => z?.rankings?.find(x => x?.site == item?.url)?.rank);\n return {\n name: item?.url,\n type: 'line',\n symbol: 'none',\n itemStyle: {\n color: item?.color,\n },\n lineStyle: {\n color: item?.color,\n },\n areaStyle: {\n color: 'transparent',\n },\n data: item?.checked ? siteData : [],\n };\n });\n return dataArr;\n } else {\n return [{\n name: 'loading',\n type: 'line',\n symbol: 'none',\n itemStyle: {\n color: '#A3A4A4',\n },\n lineStyle: {\n color: '#A3A4A4',\n },\n areaStyle: {\n color: new graphic.LinearGradient(0, 0, 0, 1, [{\n offset: 0,\n color: 'rgb(163, 164, 164)',\n }, {\n offset: 0.9,\n color: '#fff',\n }]),\n },\n data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],\n }];\n }\n };\n // const searchVolum = getKeywordDetailList?.keywords?.find(item => item?.keyword == keSelectedKeyword)?.sv;\n const getChartInterval = ()=>{\n if (chartData?.length > 500) return 35;\n else if (chartData?.length > 200) return 9;\n else if (chartData?.length > 100) return 7;\n else if (chartData?.length > 50) return 4;\n else if (chartData?.length > 35) return 2;\n else return 0;\n };\n const handelLoadMore = ()=> {\n if (isPublicKeywordResearcherV2()) {\n setAuthModal(true, false);\n } else {\n setLoadAllRecord(true);\n }\n };\n\n const exportSerpClickHandler = () => {\n keywordSerp && exportSerpTable(keywordSerp[0], keywordSerp[1]?.replaceAll('+', ' '));\n };\n const chartTabs = ['3m', '6m', '1y', 'All time'];\n const path =\n 'path://M6.75 0C28.7 0 0 28.7 0 64V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V160H256c-17.7 0-32-14.3-32-32V0H64zM256 0V128H384L256 0zM216 232V334.1l31-31c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-72 72c-9.4 9.4-24.6 9.4-33.9 0l-72-72c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l31 31V232c0-13.3 10.7-24 24-24s24 10.7 24 24z';\n const getData = () => {\n return getSerpOverviewDetails?.results?.filter(itm => {\n if (itm?.type === 'knowledge_graph') {\n const images = (itm.data as any)?.images;\n return Array.isArray(images) && images.length > 0;\n }\n if (itm?.type === 'people_also_ask') {\n const questionsAnswers = (itm.data as any[])?.length;\n return questionsAnswers > 0;\n }\n return true;\n });\n };\n return (\n \n \n {/* \n {'Keyword Difficulty'} \n An estimation of the competitive landscape of this keyword. Higher Keyword Difficulty means more competition.\n } placement={'bottomLeft'} color='#fff' overlayInnerStyle={{borderRadius: '6px', maxHeight: '200px', width: '300px'}}> \n {loadingOrganicPaidHistoryDetails ? \n {loadingOrganicPaidHistoryDetails ? Total volume: {searchVolum ? formatNumber(searchVolum) : '-'} }\n */}\n \n {'Homepages'} \n The number of homepages ranking for this keyword.\n } placement={'bottomLeft'} color='#fff' overlayInnerStyle={{borderRadius: '6px', maxHeight: '200px', width: '300px'}}> \n {loadingOrganicPaidHistoryDetails || cardsData?.homepages || cardsData?.govEduDomains ? <>\n {loadingOrganicPaidHistoryDetails ? \n {loadingOrganicPaidHistoryDetails ? .gov, .edu domains: {cardsData?.govEduDomains} } :\n \n \n Monthly Clicks \n {`The expected number of clicks for the top organic results & The value of all the clicks a domain gets from being in the top spot.`}\n } placement={'bottomLeft'} color='#fff' overlayInnerStyle={{borderRadius: '6px', maxHeight: '200px', width: '300px'}}> \n\n {loadingOrganicPaidHistoryDetails ? \n {cardsData?.monthlyClicks ? formatNumber(cardsData?.monthlyClicks) : 0} \n worth \n ${cardsData?.monthlyCost ? formatNumber(cardsData?.monthlyCost) : 0} \n
:\n {cardsData?.monthlyClicks || cardsData?.monthlyCost ? 'For Position 1' : ''} }\n \n \n Keywords in title \n {`This measures the number of results in the SERP where the exact keyword is in the page's title.`}\n } placement={'bottomLeft'} color='#fff' overlayInnerStyle={{borderRadius: '6px', maxHeight: '200px', width: '300px'}}> \n {loadingOrganicPaidHistoryDetails || cardsData?.keywordsInUrl || cardsData?.keywordsInUrl ? <>\n {loadingOrganicPaidHistoryDetails ? \n {loadingOrganicPaidHistoryDetails ? Keywords in URL: {formatNumber(cardsData?.keywordsInUrl)} } :\n \n \n Domain Diversity \n {`If one domain dominates the top 100 results for this keyword, the diversity is low. High domain diversity includes a variety of results. Either extreme should raise a flag.`}\n } placement={'bottomLeft'} color='#fff' overlayInnerStyle={{borderRadius: '6px', maxHeight: '200px', width: '300px'}}> \n {loadingOrganicPaidHistoryDetails || cardsData?.diversity ? <>\n {loadingOrganicPaidHistoryDetails ? \n {loadingOrganicPaidHistoryDetails ? Social: \n \n \n \n \n \n \n \n } :\n \n \n {loadingOrganicPaidHistoryDetails ? \n {\n if (selectedDuration == 'All time') {\n return `${moment(value)?.format('D MMM')}`;\n } else {\n return `${moment(value)?.format('D MMM YYYY')}`;\n }\n },\n },\n data: ['01-07-2020', '01-08-2020', '01-09-2020', '01-010-2020', '01-06-2020', '01-11-2020', '01-12-2020', '01-01-2021', '01-02-2021', '01-03-2021'],\n },\n yAxis: {\n type: 'value',\n position: 'right',\n inverse: chartData?.length ? true : false,\n },\n series: makeSeries(),\n } as EChartOption\n }\n />\n\n :\n (chartData?.length ? \n \n\n \n {!isPublicKeywordResearcherV2 && chartTabs.map(tab => {\n return setSelectedDuration(tab)}>{tab} ;\n })}\n \n
\n \n {(isPublicKeywordResearcherV2() && isWhiteLabelDomain) ? '' : isPublicKeywordResearcherV2() && Historical Organic Search Results \n = 730 ? 'plain' : 'scroll',\n },\n grid: {\n left: 10,\n right: 30,\n bottom: 40,\n top: 50,\n },\n xAxis: {\n type: 'category',\n boundaryGap: false,\n axisLabel: {\n hideOverlap: true,\n align: 'left',\n interval: screenWidth <= 768 ? 3 : getChartInterval(),\n formatter: value => {\n if (selectedDuration == 'All time') {\n return `${moment(value)?.format('MMM')}`;\n } else {\n return `${moment(value)?.format('D MMM YYYY')}`;\n }\n },\n },\n data: chartData?.length ? chartData?.map(item => item?.date) : ['01-07-2020', '01-08-2020', '01-09-2020', '01-010-2020', '01-06-2020', '01-11-2020', '01-12-2020', '01-01-2021', '01-02-2021', '01-03-2021'],\n },\n yAxis: {\n type: 'value',\n position: 'right',\n inverse: chartData?.length ? true : false,\n },\n series: makeSeries(),\n } as EChartOption\n }\n />\n \n : '')}\n {/* \n
*/}\n \n {loadingSerpOverviewDetails || getSerpOverviewDetails?.results ?\n <>\n \n \n SERP Overview for “{router?.query?.keyword?.length ? router?.query?.keyword[1]?.replaceAll('+', ' ') : 'keyword'}”\n {/* hide button from the gsc drawer page if query params have no keyword array */}\n {isPublicKeywordResearcherV2() && isWhiteLabelDomain ? ' ' : keywordSerp?.length >= 1 ? exportSerpClickHandler()}\n loading={exportingSerpOverview}\n style={{whiteSpace: 'nowrap'}}\n >Export SERP : <> }\n \n \n \n isPublicKeywordResearcherV2() && index > 9 ? 'bluredRowStyle' : ''}\n />\n {isPublicKeywordResearcherV2() && isWhiteLabelDomain ? ' ' : !loadAllRecord && getSerpOverviewDetails?.results?.length ? handelLoadMore()} style={{color: '#2D6CCA', cursor: 'pointer', textAlign: 'center'}}>Load more
: ''}\n :\n \n \n );\n});\n\nconst TooltipContainer = styled.div`\n width: 550px;\n @media screen and (max-width: 850px) {\n width: auto !important;\n min-width: 200px;\n max-width: 550px;\n }\n`;\n\nconst TableTitleContainer = styled.div`\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex-wrap: wrap;\n gap: 20px;\n`;\nconst ChartContainer = styled.div`\n height: 100%;\n width: 100%;\n position: relative;\n`;\nconst ImageLink = styled.a`\n font-weight: 400;\n font-size: 12px;\n line-height: 12px;\n white-space: nowrap;\n display: block;\n margin-top: 5px;\n color: #2D6CCA;\n max-width: 50px;\n overflow: hidden;\n text-overflow: ellipsis;\n`;\nconst MainContainer = styled.div`\n background: transparent;\n margin-top: 15px;\n`;\n\nconst CardsContainer = styled.div`\n display: flex;\n flex-wrap: wrap;\n gap: 20px;\n justify-content: space-between;\n`;\nconst LinkWrapper = styled.span`\n font-weight: 400;\n font-size: 12px;\n line-height: 15px;\n color: #075A1F;\n`;\nconst Box = styled.div`\n min-width: 220px;\n width: 23.64%;\n height: 120px;\n background: #F9F9FB;\n border: 1px solid #E8E8E8;\n box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.02);\n border-radius: 8px;\n padding: 22px 20px 20px 25px;\n @media screen and (max-width: 830px) {\n flex-grow: 1;\n }\n @media screen and (max-width: 768px) {\n display: flex;\n flex-direction: column;\n align-items: center;\n }\n`;\n\nconst StyledTable = styled.table`\n width: 100%;\n tr {\n display: flex;\n justify-content: space-between;\n border: 1px solid #dcdcde;\n border-collapse: collapse;\n }\n tr:first-child {\n background-color: #ececef;\n }\n`;\n\nconst SocialImgContainer = styled.span`\n display: flex;\n align-items: center;\n\n img {\n width: 20px;\n height: 18px;\n }\n`;\n\nconst BoxTitle = styled.div`\n font-weight: 600;\n font-size: 12px;\n line-height: 20px;\n text-transform: uppercase;\n color: #121212;\n`;\n\nconst BoxValue = styled.div`\n font-weight: 700;\n font-size: 24px;\n line-height: 29px;\n color: #121212;\n margin-top: 3px;\n min-height: 29px;\n`;\n\nconst BoxDescription = styled.div`\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n color: #4E5156;\n margin-top: 5px;\n display: flex;\n align-items: center;\n`;\n\nconst CompetitionChart = styled.div`\n height: 312px;\n margin-top: 16px;\n background: #FFFFFF;\n border: 1px solid #E8E8E8;\n box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.02);\n border-radius: 8px;\n padding: 25px;\n`;\n\n\nconst TableTitle = styled.div`\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n color: #121212;\n`;\n\nconst SerpTableContainer = styled.div`\n background: #FFFFFF;\n border: 1px solid #E8E8E8;\n box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.02);\n border-radius: 8px;\n padding: 10px;\n margin-top: 15px;\n margin-bottom: 30px;\n`;\n\nconst TableContainer = styled.div`\n padding-bottom: 0 !important;\n\n .bluredRowStyle {\n filter: blur(10px);\n pointer-events: none;\n }\n\ntable tr th {\n background-color: #fff;\n}\n\n.ant-table-body {\n &::-webkit-scrollbar {\n height: 5px;\n width: 5px;\n }\n \n &::-webkit-scrollbar-thumb {\n background: rgba(138,138,138,0.32);\n }\n \n &::-webkit-scrollbar-track {\n background: rgba(138,138,138,0.12);\n }\n}\n\n.ant-table-content {\n border-radius: 0 !important;\n}\n\n.ant-table-column-sorters-with-tooltip:not(:first-child) {\n text-align: center;\n}\n\ntable {\n padding-left: 10px;\n padding-right: 10px;\n padding-top: 10px;\n\n th::before {\n width: 0 !important;\n }\n\n .ant-table-column-sorter {\n display: flex;\n padding-left: 3px !important;\n }\n\n .ant-table-column-sorters {\n display: inline-flex !important;\n padding: 5px !important;\n }\n\n tr td {\n &:first-child {\n padding-bottom: 0 !important;\n padding-top: 0 !important;\n }\n }\n\n .ant-table-tbody {\n .ant-table-cell {\n vertical-align: top;\n padding-top: 10px !important;\n padding-bottom: 5px !important;\n }\n tr:nth-child(even) {\n td {\n background: #fff !important;\n border-bottom: 1px solid #f4f4f4 !important;\n box-shadow: none;\n font-weight: 400;\n white-space: nowrap;\n }\n\n &:hover {\n td {\n background: #eef4fe !important;\n }\n\n button {\n background: #eef4fe !important;\n border: 0 !important;\n color: #2d6cca;\n font-weight: 500;\n }\n }\n }\n\n tr:nth-child(odd) {\n td {\n background: #fff;\n border-bottom: 1px solid #f4f4f4 !important;\n box-shadow: none;\n font-weight: 400;\n white-space: nowrap;\n }\n\n &:hover {\n td {\n background: #eef4fe !important;\n }\n\n button {\n background: #eef4fe !important;\n border: 0 !important;\n color: #2d6cca;\n font-weight: 500;\n }\n }\n }\n }\n\n .ant-table-thead {\n background: #f7f7f7 !important;\n\n th {\n font-weight: 700;\n font-size: 12px;\n line-height: 14px;\n color: #121212;\n text-transform: uppercase;\n }\n\n .ant-table-cell-fix-left {\n text-align: left !important;\n\n &:first-child {\n border-bottom-left-radius: 8px !important;\n border-top-left-radius: 8px !important;\n }\n }\n\n th:first-child {\n border-bottom-left-radius: 8px !important;\n border-top-left-radius: 8px !important;\n }\n\n th:last-child {\n border-bottom-right-radius: 8px !important;\n border-top-right-radius: 8px !important;\n padding-left: 25px !important;\n }\n }\n\n .ant-table-cell-fix-left-last {\n text-align: left !important;\n }\n\n tr:first-child td {\n background: #fff !important;\n }\n\n tr:nth-child(even) td {\n background: #f9f9fb !important;\n }\n\n tr:nth-child(odd) td {\n background-color: #fff !important;\n }\n\n tr th {\n height: 50px !important;\n line-height: 22px;\n white-space: nowrap;\n }\n\n .ant-column-sorters {\n padding-left: 20px !important;\n padding-right: 20px !important;\n }\n\n tr td {\n padding-bottom: 15px;\n padding-top: 15px;\n text-align: center;\n }\n\n tr th:first-child,\n tr td:first-child {\n padding-left: 25px !important;\n padding-right: 25px !important;\n }\n\n tr th:last-child,\n tr td:last-child {\n padding-left: 25px !important;\n padding-right: 25px !important;\n text-align: center;\n }\n}\n`;\n\nconst CollapseStyled = styled(Collapse)`\n .ant-collapse-header {\n padding: 0 !important;\n }\n .ant-collapse-content-box {\n padding-left: 0 !important;\n padding-bottom: 0 !important;\n }\n`;\n\nconst Link = styled.a`\n font-weight: 400;\n font-size: 12px !important;\n line-height: 15px;\n color: #2D6CCA !important;\n text-decoration: none;\n text-overflow: ellipsis;\n display: block;\n overflow: hidden;\n max-width: 500px;\n`;\n\nconst DrContainer = styled.div<{background: string}>`\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 7px 12px 8px;\n position: absolute;\n height: 32px;\n background: ${p => p.background ? p.background : `rgba(244, 67, 67, 0.07)`};\n border-radius: 6px;\n`;\n\nconst CustomTabContainer = styled.div`\n display: flex;\n align-items: center;\n div:first-child {\n border-top-left-radius: 5px;\n border-bottom-left-radius: 5px;\n }\n div:last-child {\n border-top-right-radius: 5px;\n border-bottom-right-radius: 5px;\n }\n`;\n\nconst CustomTab = styled.div<{selected?: boolean}>`\n height: 28px;\n background: ${p => p.selected ? 'rgba(127, 78, 173, 0.15)' : '#F2F2F5'};\n border: 1px solid ${p => p.selected ? 'rgba(127, 78, 173, 0.3)' : '#E2E2E2'};\n cursor: pointer;\n display: flex;\n align-items: center;\n padding: 0 8px 0 6px;\n`;\n\n// const CheckBoxStyled = styled.div<{color: string}>`\n// .ant-checkbox-inner {\n// background-color: ${p => p.color} !important;\n// border-color: ${p => p.color == '#F2F2F5' ? `#D2D2D2` : p?.color} !important;\n// border-radius: 3px !important;\n// }\n// `;\nconst TooltipDescriptionWrapper = styled.div`\n font-weight: 400;\n font-size: 12px;\n line-height: 16px;\n color: #121212;\n padding: 5px;\n`;\n\n// SERP's position history chart is temporarily hidden and will be implemented soon\n","import {observer} from 'mobx-react-lite';\nimport {Table} from '@/components/common-components/components';\nimport {ColumnsType} from 'antd/lib/table';\nimport {isNil, isEmpty} from 'lodash';\nimport {formatNumber} from '@/utils/number';\nimport {Tooltip} from 'antd';\nimport {VerticalBar} from '@/components/common-components/components/vertical-bar/index';\nimport styled from 'styled-components';\nimport {Button} from '@/components/common-components/v2/Button';\nimport React from 'react';\nimport {EmptyStateKeDetail} from '../../emptyStateKe';\nimport {getDomain, getSingleUrlParam, isPublicKeywordResearcherV2} from '@/utils/url';\nimport {useRouter} from 'next/router';\nimport Link from 'next/link';\nimport {linkgraphDomains} from '@/utils/router';\nimport {useStore} from '@/store/root-store';\n\n\ninterface TableProps {\n tableData?: any[];\n loadingKeywordDetails?: boolean;\n totalValue?: any;\n redirectLink?: any;\n fromDrawer?: boolean;\n}\n\nexport const KeywordsMiniTable:React.FC = observer(({tableData, loadingKeywordDetails, totalValue, redirectLink, fromDrawer}) => {\n const countryCode = getSingleUrlParam('countryCode');\n const locationId = getSingleUrlParam('locationId');\n const {\n countries: {getSpecificCountryByCode}} = useStore('');\n const router = useRouter();\n const publicHash = router?.query?.public_hash;\n const currentDomain = getDomain(window.location.hostname);\n const isWhiteLabelDomain = !linkgraphDomains.includes(currentDomain);\n const getLocationParms = () => {\n return `locationId=${locationId || ''}&countryCode=${countryCode || ''}&countryName=${countryCode ? getSpecificCountryByCode(countryCode)?.name : ''}`;\n };\n const columns: ColumnsType = [{\n title: () => QUERY ,\n key: 'keyword',\n dataIndex: 'keyword',\n width: 250,\n align: 'left' as 'left',\n render: keyword => ,\n },\n {\n title: () => \n {`The average number of monthly searches for the analyzed keyword over the last 12 months. This is useful in determining whether or not a keyword is worth targeting from an SEO perspective.`}\n } placement={'bottomLeft'} color='#fff' overlayInnerStyle={{borderRadius: '6px', maxHeight: '200px', width: '300px'}}> SV ,\n key: 'sv',\n dataIndex: 'sv',\n align: 'right',\n width: 70,\n render: sv => {!isNil(sv) ? (sv < 1000 ? sv?.toFixed(0) : String(formatNumber(sv, 1))?.replace('.0', '')) : '-'}
,\n },\n {\n title: () => \n {`The price advertisers pay per click to target this keyword in Google Ads campaigns.`}\n } placement={'bottomLeft'} color='#fff' overlayInnerStyle={{borderRadius: '6px', maxHeight: '200px', width: '300px'}}> CPC ,\n key: 'cpc',\n dataIndex: 'cpc',\n align: 'right',\n width: 70,\n render: cpc => \n {!isNil(cpc) ? `$${cpc?.toFixed(2)}` : '-'}\n item.cpc))}\n />\n
,\n },\n ];\n return (\n <>\n {loadingKeywordDetails || tableData?.length ?<>\n \n {!loadingKeywordDetails && isWhiteLabelDomain && isPublicKeywordResearcherV2() ? '' :\n \n {!loadingKeywordDetails ? \n View all {totalValue} keywords\n : <>}\n \n }\n :\n = observer(({fromDrawer=false, termsMatchQuestionsTableData, termsMatchTableData}) => {\n const {\n keywordResearcherV2: {\n keywordDetails: {\n getKeywordDetailsData,\n getKeywordDetailList,\n loadingKeywordMainDetails,\n loadingTermsMatchDetails,\n loadingTermsMatchQuestionsDetails,\n },\n }} = useStore('');\n const {settings: {customer: {setAuthModal}}} = useStore('');\n const currentDomain = getDomain(window.location.hostname);\n const isWhiteLabelDomain = !linkgraphDomains.includes(currentDomain);\n\n\n const {contentOptimizer: {currentPage}} = useStore('');\n const router = useRouter();\n const listId = fromDrawer ? getKeywordDetailList?.id : router.query?.keyword?.length ? router.query.keyword[0] : '';\n const keyword = fromDrawer ? getKeywordDetailsData?.keyword : router.query?.keyword?.length ? router.query.keyword[1] : '';\n const publicShareHash = fromDrawer ? getKeywordDetailList?.publicShareHash : getSingleUrlParam('public_hash');\n const countryCode = fromDrawer ? getKeywordDetailsData?.countryCode : getSingleUrlParam('countryCode') ?? getKeywordDetailsData?.countryCode;\n const countryName = getSingleUrlParam('countryName') ?? getKeywordDetailsData?.location;\n const locationId = fromDrawer ? getKeywordDetailsData?.locationId : getSingleUrlParam('locationId') ?? getKeywordDetailsData?.locationId;\n\n const getLocation = `locationId=${locationId}&countryCode=${countryCode}&countryName=${countryName}`;\n\n const linkWithQuestion = isPublicKeywordResearcherV2() ? `/research/keyword-magic-tool-public/${listId}/${keyword}?public_hash=${publicShareHash}&${getLocation}&table=questions` :\n `/research/keyword-magic-tool/${listId}/${keyword}?${getLocation}&table=questions`;\n const linkWithRelatedKw = isPublicKeywordResearcherV2() ? `/research/keyword-magic-tool-public/${listId}/${keyword}?public_hash=${publicShareHash}&${getLocation}&table=related_keywords` :\n `/research/keyword-magic-tool/${listId}/${keyword}?${getLocation}&table=related_keywords`;\n const linkSimple = isPublicKeywordResearcherV2() ? `/research/keyword-magic-tool-public/${listId}/${keyword}?public_hash=${publicShareHash}&${getLocation}&table=keyword_variation` :\n `/research/keyword-magic-tool/${listId}/${keyword}?${getLocation}&table=keyword_variation`;\n\n return (\n \n {(isPublicKeywordResearcherV2() && isWhiteLabelDomain) ? ' ' : isPublicKeywordResearcherV2() && \n setAuthModal(true, false)}>Explore keywords }\n\n \n\n \n Keyword Variations \n Variations of the keyword that still represent the same search intent\n } placement={'bottom'} color='#fff' overlayInnerStyle={{borderRadius: '6px', maxHeight: '200px'}}> \n \n {loadingTermsMatchDetails ? :\n termsMatchTableData?.results?.length ?\n\n <>\n \n {termsMatchTableData?.count ? String(formatNumber(termsMatchTableData?.count, 1))?.replace('.0', '') : '0'} \n \n \n Total volume: {termsMatchTableData?.results?.length ? String(formatNumber(termsMatchTableData?.results?.reduce((a, b) => a + b?.sv, 0), 1))?.replace('.0', '') : ''} \n : ''}\n \n \n \n {currentPage?.isDrawerFromCa || !getKeywordDetailsData?.relatedKeywordsFirstArr?.length ? '' : \n \n RELATED KEYWORDS \n Keywords with topical releance to the primary keyword.\n } placement={'bottom'} color='#fff' overlayInnerStyle={{borderRadius: '6px', maxHeight: '200px'}}> \n \n {loadingKeywordMainDetails ? :\n getKeywordDetailsData?.relatedKeywordsFirstArr?.length ?\n <>\n \n {getKeywordDetailsData?.relatedKeywordsFirstArr?.length ? String(formatNumber(getKeywordDetailsData?.relatedKeywordsFirstArr?.length, 1))?.replace('.0', '') : '0'} \n \n \n Total volume: {getKeywordDetailsData?.relatedKeywordsFirstArr?.length ? formatNumber(getKeywordDetailsData?.relatedKeywordsFirstArr?.reduce((a, b) => a + b?.sv, 0)) : ''} \n :''}\n \n \n }\n \n \n QUESTIONS \n Questions users are asking in relationship to this keyword.\n } placement={'bottom'} color='#fff' overlayInnerStyle={{borderRadius: '6px', maxHeight: '200px'}}> \n \n {loadingTermsMatchQuestionsDetails ? :\n termsMatchQuestionsTableData?.results?.length?\n <>\n \n {termsMatchQuestionsTableData?.count ? String(formatNumber(termsMatchQuestionsTableData?.count, 1))?.replace('.0', '') : '0'} \n \n \n Total volume: {termsMatchQuestionsTableData?.results?.length ? formatNumber(termsMatchQuestionsTableData?.results?.reduce((a, b) => a + b?.sv, 0)) : ''} \n :''}\n \n \n \n {/* \n );\n});\n\nconst Container = styled.div`\n background: #FFFFFF;\n border: 1px solid #E8E8E8;\n box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.02);\n border-radius: 10px;\n padding: 28px 20px 20px 18px;\n display: flex;\n justify-content: space-between;\n flex-direction: column;\n`;\n\nconst TableContainer = styled.div<{isCaDrawer?: boolean}>`\n width: ${p => p.isCaDrawer ? '48%' : '32%'};\n @media screen and (max-width: 768px) {\n width: 100%;\n }\n`;\n\n// const BillionKeyword = styled.span`\n// color:#7F4EAD;\n// font-family: Inter;\n// font-size: 14px;\n// font-weight: 700;\n// line-height: 17px;\n// letter-spacing: 0em;\n// text-align: left;\n// `;\n\nconst KeywordBanner = styled.div`\n width: 100%;\n height:50px;\n background:#2D6CCA26;\n box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.02);\n border-radius: 8px;\n color:#121212 !important;\n font-family: Inter;\n font-size: 14px;\n font-weight: 500;\n line-height: 17px;\n letter-spacing: 0em;\n text-align: left;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 35px;\n\n`;\nconst InnerContainer = styled.div`\n display:flex;\n justify-content:space-between;\n @media screen and (max-width: 768px) {\n flex-direction: column;\n gap: 30px;\n }\n`;\n\nconst Info = styled.div`\n\n`;\n\nconst Heading = styled.div`\n font-weight: 600;\n font-size: 12px;\n line-height: 20px;\n text-transform: uppercase;\n color: #121212;\n`;\n\nconst MainValue = styled.div`\n font-weight: 700;\n font-size: 24px;\n line-height: 29px;\n color: #2D6CCA;\n cursor: pointer;\n`;\n\nconst ValuesWrapper = styled.div`\n display: flex;\n align-items: baseline;\n`;\n\nconst TotalVolume = styled.div`\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n color: #4E5156;\n margin-left: 8px;\n`;\nconst TooltipDescriptionWrapper = styled.div`\n font-weight: 400;\n font-size: 12px;\n line-height: 16px;\n color: #121212;\n padding: 5px;\n`;\n","import {Button} from '@/components/common-components/v2';\nimport {useStore} from '@/store/root-store';\nimport {faArrowRight, faBolt} from '@fortawesome/pro-solid-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {observer} from 'mobx-react-lite';\nimport styled from 'styled-components';\nimport React from 'react';\n\ninterface Props {\n isInTable?: boolean;\n isPublicPage?: boolean;\n}\n\nexport const PublicPageBanner:React.FC = observer(({isInTable=false, isPublicPage=false}) => {\n const {settings: {customer: {setAuthModal}}} = useStore('');\n return (\n \n
\n \n
\n Get a 7 Day trial for Free to see more \n Please upgrade your subscription to expand your possibilities. \n
\n
setAuthModal(true, false)}>7 Day Free Trial \n );\n});\n\n\nconst Container = styled.div<{isInTable: boolean; isPublicPage: boolean}>`\n width: ${p=> p?.isPublicPage ? '100%' : '100%'};\n height: 90px;\n margin-top: ${p => p.isInTable ? '0' : '10px'};\n background: ${p => p.isInTable ? '#fff' : '#FFB94E'};\n ${p => p?.isInTable && `border: 1px solid #E8E8E8;\n box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.25);`}\n margin-left: ${p=> p?.isPublicPage ? '0px' : '0px'};\n border-radius: 20px;\n padding: 20px 30px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n > div {\n display: flex;\n align-items: center;\n gap: 10px;\n }\n`;\n\nconst IconContainer = styled.div<{isInTable: boolean}>`\n width: 46px;\n height: 46px;\n background: ${p => p.isInTable ? '#1FAC4726' : '#12121226'};\n font-size: 24px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n`;\n\nconst Heading = styled.div`\n font-weight: 700;\n font-size: 18px;\n line-height: 22px;\n color: #121212;\n`;\n\nconst SubHeading = styled.div`\n font-weight: 400;\n font-size: 14px;\n line-height: 18px;\n color: #121212;\n margin-top: 4px;\n`;\n","/* eslint-disable max-len */\nimport {Button} from '@/components/common-components/v2';\nimport {useStore} from '@/store/root-store';\nimport {formatLargeNumber, formatNumber} from '@/utils/number';\nimport {faRotateRight} from '@fortawesome/pro-regular-svg-icons';\nimport {faArrowLeft, faCaretDown} from '@fortawesome/pro-solid-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {Divider, Dropdown, Tooltip} from 'antd';\nimport {observer} from 'mobx-react';\nimport {useRouter} from 'next/router';\nimport Flag from '@/components/common-components/components/flag';\nimport styled from 'styled-components';\nimport {SkeletonHorizontalLoaderGray, SkeletonRingLoader} from '@/components/common-components/components';\nimport {getFeatureIcons} from '@/utils/icons';\nimport {Globe} from 'react-feather';\nimport {faFileArrowDown} from '@fortawesome/pro-solid-svg-icons';\nimport React, {useState, useEffect, useMemo} from 'react';\nimport {getDomain, getSingleUrlParam, isPublicKeywordResearcherV2} from '@/utils/url';\nimport {titleCase, truncate} from '@/utils/string';\nimport {CreateList} from '../main-page/createlist';\nimport ReactEcharts from 'echarts-for-react';\nimport {graphic} from 'echarts';\nimport {EmptyStateKeDetail} from './components/emptyStateKe';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {faSquareQuestion} from '@fortawesome/pro-duotone-svg-icons';\nimport {KeDeleteModal} from '../main-page/component/keDeleteModal';\nimport {VerticalBar} from '@/components/common-components/components/vertical-bar';\nimport {AddKeywordDropdownV2} from '@/components/common-components/v2/addKeywordDropdown';\nimport {getBgAndColorTooltip} from '../magickeyword/collapse-table';\nimport {PublicPageBanner} from '../ke-common-components-v2/publicPageBanner';\nimport {notification} from '@/utils/notification-v2';\nimport {linkgraphDomains} from '@/utils/router';\nimport {apiError} from '@/utils/api';\nimport {getLastUpdated} from '@/utils/functions';\n\nexport const Header = observer(({fromDrawer=false, handleExportPdf=()=>{}}) => {\n const {\n countries: {getSpecificCountryByCode},\n keywordResearcherV2: {\n loadAddKeywordsList,\n getKeywordListDetail,\n keywordDetails: {\n keSelectedKeyword,\n keywordToShow,\n getKeywordDetailList,\n isExporting,\n getKeywordDetailsData,\n loadingKeywordMainDetails,\n getSerpOverviewDetails,\n getRefetchDataV2,\n loadingRefetchData,\n },\n keywordRankTracker: {\n getListWithoutRepoll,\n getRankTrackerList,\n },\n },\n } = useStore('');\n const {keywordResearcherV2: {deleteKeywordLoading, deletedKeywordListData, setModaValue, openKeywordDeleteModal, keywordDeleteId}} = useStore('');\n const {settings: {customer: {setAuthModal, profile: {quotaUtilization, isWhitelabel}}}} = useStore('');\n const {plans: {showSidebarPaymentDrawer}} = useStore('');\n const currentDomain = getDomain(window.location.hostname);\n const isWhiteLabelDomain = !linkgraphDomains.includes(currentDomain);\n\n const [loading, setLoading] = useState(true);\n const metricsData = getKeywordDetailsData?.metrics ? getKeywordDetailsData?.metrics : {} as any;\n const keywordDifficulty = getKeywordDetailsData?.metrics?.rankingDifficulty ? getKeywordDetailsData?.metrics?.rankingDifficulty : {} as any;\n const adsData = getKeywordDetailsData?.metrics?.ads ? getKeywordDetailsData?.metrics?.ads : [];\n const [titleModel] = useState('Create Keyword List');\n const [buttonName] = useState('Create List');\n const router = useRouter();\n const [listName, setListName] = useState('');\n const locationId = getSingleUrlParam('locationId');\n const countryCode = getSingleUrlParam('countryCode');\n const countryName = getSingleUrlParam('countryName');\n const fromKmt = getSingleUrlParam('fromKmt');\n const listNameParam = getSingleUrlParam('listName');\n\n const [newKeyword, setNewKeyword] = useState('');\n const [selectedCountry, setSelectedCountry] = useState({\n locationId: 2840,\n countryCode: 'US',\n });\n const closeModal= ()=>{\n setModaValue(false);\n };\n const lastUpdatedTime = useMemo(() => getLastUpdated(getKeywordDetailsData?.lastUpdatedAt), [getKeywordDetailsData?.lastUpdatedAt]);\n\n const onDeleteKeyword= async ()=>{\n try {\n await deletedKeywordListData(keywordDeleteId, false);\n closeModal();\n router.push(`/research/keyword-researcher`);\n } catch (error) {\n const errorMessage = apiError(error) as string;\n notification.error('', errorMessage);\n }\n };\n\n const diffucultyChartData = keywordDifficulty?.difficulty;\n const chartOption={\n series: [\n {\n min: 0,\n max: 10,\n startAngle: 200,\n endAngle: 170,\n type: 'gauge',\n axisLine: {\n roundCap: true,\n lineStyle: {\n width: 15,\n color: [[1, diffucultyChartData > 0? new graphic.LinearGradient(0, 1, 0, 0, [\n {\n offset: 0,\n color: '#1FAC47',\n },\n {\n offset: 1,\n color: '#d8e15e',\n }]) : !fromDrawer ? '#4E5156' : '#e8e8e8']],\n },\n },\n pointer: {\n icon: 'roundRect',\n width: 5,\n show: (diffucultyChartData > 0 && diffucultyChartData < 11) ? true : false,\n length: 23,\n offsetCenter: [0, '-35'],\n itemStyle: {\n color: fromDrawer ? '#4E5156' : '#fff',\n },\n },\n axisTick: {\n show: false,\n },\n axisLabel: {\n show: false,\n },\n splitLine: {\n show: false,\n distance: -15,\n length: 15,\n lineStyle: {\n color: '#2D2F34',\n width: 5,\n },\n },\n splitNumber: 0,\n detail: {\n show: true,\n offsetCenter: [0, '0%'],\n valueAnimation: true,\n formatter: value => value || value==0 ? `${value}` : 'N/A',\n color: diffucultyChartData && !fromDrawer ? '#fff' : '#4E5156',\n fontSize: 24,\n },\n data: [diffucultyChartData],\n },\n {\n min: 10,\n max: 30,\n startAngle: 170,\n endAngle: 130,\n type: 'gauge',\n axisLine: {\n lineStyle: {\n width: 15,\n color: [[1, diffucultyChartData > 10 ? new graphic.LinearGradient(0, 1, 0, 0, [\n {\n offset: 0,\n color: '#d8e15e',\n },\n {\n offset: 1,\n color: '#F1AA3E',\n }]) : !fromDrawer ? '#4E5156' : '#e8e8e8']],\n },\n },\n pointer: {\n icon: 'roundRect',\n width: 5,\n show: (diffucultyChartData > 10 && diffucultyChartData < 31) ? true : false,\n length: 23,\n offsetCenter: [0, '-35'],\n itemStyle: {\n color: fromDrawer ? '#4E5156' : '#fff',\n },\n },\n axisTick: {\n show: false,\n },\n axisLabel: {\n show: false,\n },\n splitLine: {\n show: true,\n distance: -15,\n length: 15,\n lineStyle: {\n color: '#2D2F34',\n width: 5,\n },\n },\n splitNumber: 0,\n detail: {\n show: false,\n },\n data: [diffucultyChartData],\n },\n {\n min: 30,\n max: 70,\n startAngle: 130,\n endAngle: 40,\n type: 'gauge',\n axisLine: {\n lineStyle: {\n width: 15,\n color: [[1, diffucultyChartData >30 ? new graphic.LinearGradient(1, 0, 0, 0, [\n {\n offset: 0,\n color: '#F65140',\n },\n {\n offset: 1,\n color: '#F1AA3E',\n }]) : !fromDrawer ? '#4E5156' : '#e8e8e8']],\n },\n },\n pointer: {\n icon: 'roundRect',\n width: 5,\n show: (diffucultyChartData > 30 && diffucultyChartData < 71) ? true : false,\n length: 23,\n offsetCenter: [0, '-35'],\n itemStyle: {\n color: fromDrawer ? '#4E5156' : '#fff',\n },\n },\n axisTick: {\n show: false,\n },\n axisLabel: {\n show: false,\n },\n splitLine: {\n show: true,\n distance: -15,\n length: 15,\n lineStyle: {\n color: '#2D2F34',\n width: 5,\n },\n },\n splitNumber: 0,\n detail: {\n show: false,\n },\n data: [diffucultyChartData],\n },\n {\n min: 70,\n max: 95,\n startAngle: 40,\n endAngle: -10,\n type: 'gauge',\n axisLine: {\n lineStyle: {\n width: 15,\n color: [[1, diffucultyChartData > 70 ? new graphic.LinearGradient(0, 0, 0, 1, [\n {\n offset: 0,\n color: '#ff6536',\n },\n {\n offset: 1,\n color: '#F44343',\n }]): !fromDrawer ? '#4E5156' : '#e8e8e8']],\n },\n },\n pointer: {\n icon: 'roundRect',\n width: 5,\n show: (diffucultyChartData > 70 && diffucultyChartData < 90) ? true : false,\n length: 23,\n offsetCenter: [0, '-35'],\n itemStyle: {\n color: fromDrawer ? '#4E5156' : '#fff',\n },\n },\n axisTick: {\n show: false,\n },\n axisLabel: {\n show: false,\n },\n splitLine: {\n show: true,\n distance: -15,\n length: 15,\n lineStyle: {\n color: '#2D2F34',\n width: 5,\n },\n },\n splitNumber: 0,\n detail: {\n show: false,\n },\n data: [diffucultyChartData],\n },\n {\n min: 95,\n max: 100,\n startAngle: -10,\n endAngle: -20,\n type: 'gauge',\n axisLine: {\n roundCap: true,\n lineStyle: {\n width: 15,\n color: [[1, diffucultyChartData > 70 ? new graphic.LinearGradient(0, 0, 0, 1, [\n {\n offset: 0,\n color: '#F44343',\n },\n {\n offset: 1,\n color: '#F44343',\n }]): !fromDrawer ? '#4E5156' : '#e8e8e8']],\n },\n },\n pointer: {\n icon: 'roundRect',\n width: 5,\n show: (diffucultyChartData > 89 && diffucultyChartData < 101) ? true : false,\n length: 23,\n offsetCenter: [0, '-35'],\n itemStyle: {\n color: fromDrawer ? '#4E5156' : '#fff',\n },\n },\n axisTick: {\n show: false,\n },\n axisLabel: {\n show: false,\n },\n splitLine: {\n show: false,\n distance: -15,\n length: 15,\n lineStyle: {\n color: '#2D2F34',\n width: 5,\n },\n },\n splitNumber: 0,\n detail: {\n show: false,\n },\n data: [diffucultyChartData],\n },\n ],\n };\n const listId = router.query?.keyword?.length ? router.query.keyword[0] : '';\n\n useEffect(() => {\n if (listId !== 'new') {\n setLoading(false);\n }\n }, [listId]);\n\n const dummyArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];\n const isQuotaremaining = quotaUtilization?.ke?.maxKeywordLookups?.consumed >= quotaUtilization?.ke?.maxKeywordLookups?.total;\n useEffect(() => {\n if (isQuotaremaining) {\n if (isWhitelabel) {\n notification.error('Quota is exceeded', 'You’ve exceeded the usage limit for this tool.');\n } else {\n showSidebarPaymentDrawer();\n }\n } else {\n if (!isPublicKeywordResearcherV2() && !fromDrawer) {\n loadAddKeywordsList(false);\n getListWithoutRepoll();\n // getList();\n }\n }\n }, []);\n const handleRefetch = ()=>{\n if (!isPublicKeywordResearcherV2()) {\n getRefetchDataV2(router.query.keyword[0], router?.query?.keyword[1]?.replaceAll('+', ' '), countryCode);\n }\n };\n\n const getKetwordList = ()=>{\n return (\n {getKeywordDetailList?.keywords?.map((item, idx)=>{\n const lastid = idx==getKeywordDetailList?.keywords?.length-1;\n return (\n router.push(`/research/keyword-researcher/${listId}/${getKeywordDetailList?.keywords[idx]?.keyword}?${locationId ? `locationId=${locationId}` : `countryCode=${countryCode ? countryCode : ''}`}`)} key={idx}>{item?.keyword} \n );\n })}\n\n );\n };\n const getBgAndColor =searchIntent=>{\n switch (searchIntent) {\n case 'commercial':\n return {\n background: '#F1AA3E33',\n color: '#F1AA3E',\n };\n case 'navigational':\n return {\n background: '#B98CE433',\n color: '#B98CE4',\n };\n case 'informational':\n return {\n background: '#34AEF333',\n color: '#34AEF3',\n };\n case 'transactional':\n return {\n background: '#1FAC4733',\n color: '#1FAC47',\n };\n default:\n break;\n }\n };\n const handleBackRedirect = () => {\n if (isPublicKeywordResearcherV2()) {\n router?.push('/research/keyword-researcher-public');\n } else if (fromKmt) {\n router.push(`/research/keyword-magic-tool`);\n } else {\n if (getKeywordDetailList?.keywords?.length == 1) {\n router.push(`/research/keyword-researcher`);\n } else {\n router.push(`/research/keyword-researcher-magic/${listId}/${router?.query?.keyword[1]?.replaceAll(' ', '+')}?locationId=${locationId}&countryCode=${countryCode}&countryName=${countryName}${listNameParam ? `&listName=${listNameParam}` : ''}`);\n }\n }\n };\n const antIcon = \n {fromDrawer ? '' : \n \n {isWhiteLabelDomain && isPublicKeywordResearcherV2() ? null : }\n \n {isWhiteLabelDomain && isPublicKeywordResearcherV2() ?
Keyword: {keywordToShow ? keywordToShow : router?.query?.keyword?.length ? router?.query?.keyword[1]?.replaceAll('+', ' ') : 'keyword'}\n
:
\n Keyword: {keywordToShow ? keywordToShow : router?.query?.keyword?.length ? router?.query?.keyword[1]?.replaceAll('+', ' ') : 'keyword'}\n }\n
\n \n \n Last Updated: {lastUpdatedTime} {isWhiteLabelDomain && isPublicKeywordResearcherV2() ? null : loadingRefetchData || loadingKeywordMainDetails ? handleRefetch()} style={{cursor: 'pointer'}} icon={faRotateRight}/>} \n \n {isWhiteLabelDomain && isPublicKeywordResearcherV2() ? null :\n {\n if (isPublicKeywordResearcherV2()) {\n setAuthModal(true, false);\n } else {\n handleExportPdf();\n }\n }}> }\n {isWhiteLabelDomain && isPublicKeywordResearcherV2() ? null : }\n \n }\n {getKeywordDetailsData?.searchIntent ?\n \n Search intent: \n {getKeywordDetailsData?.searchIntentList?.map((items, idx)=>\n {items} : ''}\n {isPublicKeywordResearcherV2() && isWhiteLabelDomain ? null : isPublicKeywordResearcherV2() && \n \n {loading && loadingKeywordMainDetails ?<>\n Keyword Difficulty \n \n Keyword Difficulty (KD) in Search Atlas looks at the lower 20th percentile of Domain Rating across the top 20 SERPs. Keywords with lower KDs will have sites ranking in the first two pages of Google that have low Authority, making it possible to rank for these keywords with the right holistic onpage SEO strategy.\n } placement={'bottom'} color='#fff' overlayInnerStyle={{borderRadius: '6px', maxHeight: '200px'}}> \n {loading && loadingKeywordMainDetails ? antIcon : ''} \n {loadingKeywordMainDetails ? \n \n \n \n \n {(keywordDifficulty?.difficulty || keywordDifficulty?.difficulty ==0) &&keywordDifficulty?.label ? keywordDifficulty?.label : ''} \n {keywordDifficulty?.description || ''}\n
\n \n \n }\n }\n \n\n \n {loading && loadingKeywordMainDetails ?<>\n AVERAGE MONTHLY SEARCHES \n The average number of times people search for a keyword and similar terms based on the month range, the location and your Search Network settings. This information shows how popular your keywords are during different times of the year. This range is averaged over a 12-month period.\n } placement={'bottomLeft'} color='#fff' overlayInnerStyle={{borderRadius: '6px', maxHeight: '200px', width: '300px'}}> \n \n {loadingKeywordMainDetails ? \n {getKeywordDetailsData?.locationFlag ? : (\n getKeywordDetailsData?.countryCode ? : )}\n {metricsData?.sv ? formatLargeNumber(metricsData?.sv, 1)?.toString()?.replace('.0', '') : '0'} \n \n Location: {getKeywordDetailsData?.location ? getKeywordDetailsData?.location : getKeywordDetailsData?.countryCode ? getSpecificCountryByCode(getKeywordDetailsData?.countryCode?.toUpperCase())?.name : 'worldwide'} \n \n { metricsData?.desktopSearches ? Desktop: {formatLargeNumber(metricsData?.desktopSearches, 1)?.toString()?.replace('.0', '') } : ''}\n {metricsData?.mobileSearches ? Mobile: { formatLargeNumber(metricsData?.mobileSearches, 1)?.toString()?.replace('.0', '')} : ''}\n
\n {getSerpOverviewDetails?.serpFeatures?.length ? \n SERP features are any results on a Google Search Engine Results Page (SERP) that is not a traditional organic result. These can include, but are not limited to: direct answers, sitelinks, carousels, images/videos etc. Hover on an icon to view the SERP feature.\n } placement={'bottomLeft'} color='#fff' overlayInnerStyle={{borderRadius: '6px', maxHeight: '200px', width: '300px'}}> SERP Features: : ''}\n \n SERP FEATURES \n {getSerpOverviewDetails?.serpFeatures?.map((item, idx) => {\n return \n {item ? getFeatureIcons(item) : ''} \n {item && item != 'organic' ? titleCase(item) : ''} \n
;\n })} \n \n } placement={'bottomLeft'} color='#fff' overlayStyle={{minWidth: '171px'}} overlayInnerStyle={{borderRadius: '6px'}}>\n {getSerpOverviewDetails?.serpFeatures?.map(item => {\n return {item ? getFeatureIcons(item) : ''} ;\n })} :\n \n \n {loading && loadingKeywordMainDetails ?<>\n Topical Search Volume \n {`Topical search volume refers to the number of searches conducted for a specific topic or theme over a given period. Unlike keyword search volume, which focuses on the frequency of searches for a particular keyword or phrase, topical search volume encompasses all related searches within a broader topic area.`} \n {loadingKeywordMainDetails ? \n {metricsData?.topicalSearchVolume ? formatLargeNumber(metricsData?.topicalSearchVolume, 1)?.toString()?.replace('.0', '') : '0'} \n }\n {!loadingKeywordMainDetails && <>\n Traffic Potential \n {`Traffic Potential represents the total estimated search volume (SV) accumulated from all Keyword Variations, Related Keywords, and Questions associated with the primary keyword. This metric reflects the combined organic traffic potential for a website if it ranks in the top position for all ${getKeywordDetailList?.keywords?.length} potential keywords.`}\n } placement={'bottom'} color='#fff' overlayInnerStyle={{borderRadius: '6px', maxHeight: '200px'}}> \n <>\n \n {metricsData?.trafficPotential ? formatLargeNumber(metricsData?.trafficPotential, 1)?.toString()?.replace('.0', '') : '0'} \n \n {getSerpOverviewDetails?.topResult?.displayedLink && getSerpOverviewDetails?.topResult?.link ? <>Top ranking result: \n {`The web page URL currently ranking in position 1 for this keyword.`}\n } placement={'bottom'} color='#fff' overlayInnerStyle={{borderRadius: '6px', maxHeight: '200px'}}> \n {truncate(getSerpOverviewDetails?.topResult?.displayedLink, 30)} : ''}\n \n }\n }\n \n \n {loading && loadingKeywordMainDetails ?<>\n \n
\n
CPC \n The price advertisers pay per click to target this keyword in Google Ads campaigns.\n } placement={'bottom'} color='#fff' overlayInnerStyle={{borderRadius: '6px', maxHeight: '200px'}}> \n {loading && loadingKeywordMainDetails ? antIcon : ''} \n {loadingKeywordMainDetails ?
:\n metricsData?.cpc|| metricsData?.cmp || metricsData?.paidClicksPercentage? <>\n
\n \n ${metricsData?.cpc?.toFixed(0)} \n
\n \n {/* {metricsData?.adsCount ?
\n The price advertisers pay per click to target this keyword in Google Ads campaigns.\n } placement={'bottomLeft'} color='#fff' overlayInnerStyle={{borderRadius: '6px', maxHeight: '200px', width: '300px'}}> Total ads: 0 ? \n {adsData?.map(item=>{\n return (\n <>\n \n {item?.title} \n \n ad \n {item?.url} \n \n \n \n );\n })}\n : ''} placement={'bottomRight'} color='#fff' overlayStyle={{minWidth: '500px'}} overlayInnerStyle={{borderRadius: '6px', maxHeight: '300px'}}>\n {metricsData?.adsCount} : ''} */}\n {/*
Product listing ads: 5 */}\n\n {metricsData?.cmp?
\n {`The level of competition between advertisers bidding on the analyzed keyword within their PPC campaigns is what we call Competitive Density. It's shown on a scale from 0 to 1.00, with 1.00 being the most difficult to rank for.`}\n } placement={'bottom'} color='#fff' overlayInnerStyle={{borderRadius: '6px', maxHeight: '200px'}}>Competitive density: • {formatNumber(metricsData?.cmp, 2)?.toString()?.replace('.00', '') } : ''}\n {metricsData?.paidClicksPercentage ? <>
\n {`Ads that get more than 30% of total clicks would rate as a \"High\" paid click rate`}\n } placement={'bottom'} color='#fff' overlayInnerStyle={{borderRadius: '6px', maxHeight: '200px'}}>Paid clicks: • {metricsData?.paidClicksPercentage?.toFixed(2)}%\n
\n \n {dummyArray.map((item, idx)=> {\n if ( idx+1<= metricsData?.paidClicksPercentage *2) {\n return
\n \n \n\n \n } placement={'bottom'} color='#fff' overlayStyle={{minWidth: '300px'}} overlayInnerStyle={{borderRadius: '6px', maxHeight: '300px'}}>\n \n {dummyArray.map((item, idx)=> {\n if ( idx+1<= metricsData?.paidClicksPercentage *2) {\n return
\n :''} :\n
\n }\n
\n
\n
PLA \n The top product listing ads that appear for the analyzed keyword.\n } placement={'bottom'} color='#fff' overlayInnerStyle={{borderRadius: '6px', maxHeight: '200px'}}> \n {loading && loadingKeywordMainDetails ? antIcon : ''} \n {loadingKeywordMainDetails ?
:\n adsData?.length || metricsData?.advetisers?\n <>\n
{adsData?.length || 0} \n
\n Total ads: {adsData?.length} \n {adsData?.map(item=>{\n return (\n <>\n \n {item?.title} \n \n ad \n {item?.url} \n \n \n );\n })}\n } placement={'bottomLeft'} color='#fff' overlayClassName='adsTooltipResponsive' overlayInnerStyle={{borderRadius: '6px', maxHeight: '300px'}}>\n {adsData?.length ? 'view' : ''} \n \n \n {metricsData?.advetisers ?
\n {`This is the total number of advertisers we've seen over the last 6 months for this keyword.`}\n } placement={'bottomLeft'} color='#fff' overlayInnerStyle={{borderRadius: '6px', maxHeight: '200px'}}>Advertisers: {metricsData?.advetisers} :'' }\n :
\n }\n
\n
\n {/* \n {loadingKeywordMainDetails ?<>\n Product listing Ads \n The top product listing ads that appear for the analyzed keyword.\n } placement={'bottomLeft'} color='#fff' overlayInnerStyle={{borderRadius: '6px', maxHeight: '200px', width: '300px'}}> \n {loadingKeywordMainDetails ? antIcon : ''} \n {adsData?.length || metricsData?.advetisers? <>\n {adsData?.length || 0} \n \n Total ads: {adsData?.length} \n {adsData?.map(item=>{\n return (\n <>\n \n {item?.title} \n \n ad \n {item?.url} \n \n \n \n );\n })}\n } placement={'bottomRight'} color='#fff' overlayStyle={{minWidth: '500px'}} overlayInnerStyle={{borderRadius: '6px', maxHeight: '300px'}}>\n {adsData?.length ? 'view' : ''} \n \n \n {metricsData?.advetisers ? \n {`This is the total number of advertisers we've seen over the last 6 months for this keyword.`}\n } placement={'bottomLeft'} color='#fff' overlayInnerStyle={{borderRadius: '6px', maxHeight: '200px', width: '300px'}}>Advertisers: {metricsData?.advetisers} :'' }\n : */}\n \n \n \n\n ;\n});\n\n// const TopSectionWrapper = styled.div`\n// padding: 0 10px;\n// height: 26px;\n// background: #4E5156;\n// border-radius: 11px;\n// display: flex;\n// color: #E8E8E8;\n// font-weight: 400;\n// font-size: 14px;\n// line-height: 17px;\n// justify-content: center;\n// align-items: center;\n// margin-right: 9px;\n// width: fit-content;\n// `;\nconst SerpToolTipWrapper = styled.div`\npadding: 10px;\n`;\nconst SerpHeading = styled.div`\n font-weight: 700;\n font-size: 12px;\n line-height: 14px;\n color: #121212;\n`;\n\n\nconst ToolWrapper = styled.div`\npadding-left: 20px;\npadding-right: 20px;\n`;\n// const SearchEngineWrapper = styled.div`\n// font-weight: 400;\n// font-size: 12px;\n// line-height: 15px;\n// letter-spacing: -0.01em;\n// color: #34AEF3;\n// `;\nconst WrapperForLink = styled.a`\n font-weight: 400;\n font-size: 12px;\n line-height: 12px !important;\n color: #34AEF3;\n`;\nconst Container = styled.div<{fromDrawer?: boolean}>`\n background-color: ${p => p.fromDrawer ? 'transparent' : '#1F2125'};\n padding: ${p => p.fromDrawer ? '0 0 40px 0' : '40px 40px 120px 40px'};\n @media screen and (max-width: 768px) {\n ${p => p.fromDrawer ? '': 'padding: 16px 16px 120px'}\n }\n`;\nconst Wrapper = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-wrap: wrap;\n row-gap: 8px;\n\n`;\nconst LinkWrapper = styled.a`\n padding-left: 5px;\n font-family: 'Inter';\n font-style: normal;\n font-weight: 400;\n font-size: 13px;\n line-height: 16px;\n color: #16611A;\n`;\n\nconst HeadingContainer = styled.div`\n font-weight: 500;\n font-size: 14px;\n line-height: 17px;\n color: #FFFFFF;\n display: flex;\n align-items: center;\n`;\nconst FontAwesomeIconStyled = styled(FontAwesomeIcon)`\n\n animation: spin infinite 1s linear;\n@keyframes spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n`;\n\nconst SerpContainer = styled.div<{fromDrawer?: boolean}>`\n span {\n color: ${p => p.fromDrawer ? '#121212' : '#E8E8E8'};\n }\n svg {\n margin-right: 8px;\n }\n`;\nconst SerpToolTipContainer = styled.div`\n span {\n color: #121212;\n }\n svg {\n margin-right: 8px;\n }\n`;\nconst Heading = styled.div`\n font-weight: 500;\n font-size: 20px;\n line-height: 24px;\n margin-left: 15px;\n margin-right: 12px;\n cursor: pointer;\n @media screen and (max-width: 768px) {\n margin-left: 0;\n margin-right: 5px;\n font-size: 18px;\n }\n`;\n\nconst ButtonsContainer = styled.div`\n display: flex;\n align-items: center;\n gap: 10px;\n flex-wrap: wrap;\n`;\nconst AddWrapper = styled.div`\npadding: 1px 2px;\n font-weight: 400;\n font-size: 11px;\n line-height: 13px;\n border: 1px solid #16611A;\n border-radius: 5px;\n color: #16611A;\n`;\nconst ButtonStyled = styled(Button)`\n border: 1px solid #4E5156;\n margin: 0 !important;\n height: 32px;\n`;\nconst Square = styled.div`\n min-width: 4px;\n margin-top: 10px;\n height: 15px;\n border-radius: 20px;\n cursor: pointer;\n margin-right: 4px;\n\n`;\nconst SubWrapper = styled.div`\n display: flex;\n align-items: center;\n justify-content: flex-end;\n padding: 8px 0;\n`;\nconst FlexWrapper = styled.div`\n display: flex;\n padding-top: 4px;\n align-items: center;\n`;\nconst DescriptionTooltip = styled.div`\n padding-top: 5px;\n font-weight: 400;\n font-size: 12px;\n line-height: 15px;\n color: #4D5156;\n -webkit-line-clamp: 3;\n text-overflow: ellipsis;\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n word-wrap: break-word;\n margin-top: 9px;\n `;\nconst LastUpdate = styled.div`\nmargin-right: 10px;\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n text-align: right;\n color: #A3A4A4;\n white-space: nowrap;\n`;\n\nconst CardsContainer = styled.div`\n display: flex;\n flex-wrap: wrap;\n gap: 10px;\n /* justify-content: space-between; */\n margin-top: 16px;\n\n`;\n\nconst Box = styled.div<{difficulty?: any; width?: any; fromDrawer?: boolean}> `\n min-width: 225px;\n width: ${p=>p?.width};\n background:${p=>p?.fromDrawer ? '#fff' : p?.difficulty >= 0 && p?.difficulty <= 10 ? 'linear-gradient(110.83deg, rgba(31, 172, 71, 0.07) 14.41%, rgba(40, 43, 47, 0) 35.4%, rgba(0, 0, 0, 0) 35.4%), #282B2F' : p=>p?.difficulty <= 30 && p?.difficulty > 10 ? 'linear-gradient(110.83deg, rgba(191, 225, 94, 0.07) 14.41%, rgba(40, 43, 47, 0) 35.4%, rgba(0, 0, 0, 0) 35.4%), #282B2F' : p=>p?.difficulty <= 70 && p?.difficulty > 30? 'linear-gradient(110.83deg, rgba(255, 133, 54, 0.07) 14.41%, rgba(40, 43, 47, 0) 35.4%, rgba(0, 0, 0, 0) 35.4%), #282B2F' : p=>p?.difficulty <= 100 && p?.difficulty > 70? 'linear-gradient(110.83deg, rgba(244, 67, 67, 0.07) 14.41%, rgba(40, 43, 47, 0) 35.4%, rgba(0, 0, 0, 0) 35.4%), #282B2F' :'#282B2F'};\n border-radius: 8px;\n padding: 20px 25px;\n @media screen and (max-width: 560px) {\n padding: 10px 12px !important;\n }\n @media screen and (max-width: 640px) {\n height: fit-content !important;\n min-height: auto !important;\n }\n height: 200px;\n &.box{\n min-height: 200px;\n\n &:nth-child(1){\n flex-grow: 1;\n flex: 28%;\n @media (max-width: 1100px) {\n flex:40%;\n }\n @media (max-width: 710px) {\n flex-grow: 1;\n flex: 100%;\n }\n }\n &:nth-child(2){\n flex-grow: 1;\n flex: 25%;\n @media (max-width: 1707px) {\n flex:20%;\n }\n @media (max-width: 1100px) {\n flex:35%;\n }\n @media (max-width: 710px) {\n flex-grow: 1;\n flex: 100%;\n }\n }\n &:nth-child(3){\n flex-grow: 1;\n flex: 15%;\n @media (max-width: 1100px) {\n max-width: 15%;\n }\n @media (max-width: 710px) {\n flex-grow: 1;\n flex: 100%;\n max-width: 100%;\n }\n }\n &:nth-child(4){\n flex-grow: 1;\n /* flex:30%; */\n @media (min-width: 1810px) {\n flex:30%;\n max-width: 30%;\n }\n @media (max-width: 1695px) {\n flex:25%;\n max-width: 25%;\n }\n @media (max-width: 1590px) {\n flex:28%;\n max-width: 33%;\n }\n @media (max-width: 1220px) {\n flex:28%;\n max-width: 33%;\n }\n @media (max-width: 1100px) {\n max-width: 100%;\n }\n @media (max-width: 710px) {\n flex-grow: 1;\n flex: 100%;\n }\n }\n}\n`;\n\nconst BoxTitle = styled.div<{fromDrawer?: boolean}>`\n font-weight: 600;\n font-size: 12px;\n line-height: 20px;\n text-transform: uppercase;\n color: ${p => p.fromDrawer ? '#121212' : '#E8E8E8'};\n`;\n\nconst BoldValue = styled.div<{fromDrawer?: boolean}>`\n font-weight: 600;\nfont-size: 24px;\nline-height: 30px;\ncolor: ${p => p.fromDrawer ? '#121212' : '#FFFFFF'};\n`;\n\nconst BoxDescription = styled.div<{fromDrawer?: boolean}>`\n font-weight: 400;\n font-size: 14px;\n line-height: 15px;\n letter-spacing: -0.01em;\n color: ${p => p.fromDrawer ? '#121212' : '#A3A4A4'};\n margin-bottom: 8px;\n @media screen and (max-width: 768px) {\n font-size: 12px;\n line-height: 16px;\n margin-bottom: 0 !important;\n }\n`;\n\nconst BoxMainContent = styled.div`\n display: flex;\n align-items: center;\n gap: 12px;\n margin-bottom: 8px;\n`;\n\nconst DescSpan = styled.span`\ncolor: #34AEF3;\ntext-decoration: underline;\ncursor: pointer;\n`;\n\nconst WrapperTooltip = styled.div `\n max-height: 280px;\n overflow: auto;\n width: 486px;\n &::-webkit-scrollbar {\n height: 5px;\n width: 5px;\n }\n \n &::-webkit-scrollbar-thumb {\n background: rgba(138,138,138,0.32);\n }\n \n &::-webkit-scrollbar-track {\n background: rgba(138,138,138,0.12);\n }\n @media screen and (max-width: 800px) {\n width: auto !important;\n }\n`;\n\nconst TitleWrapper = styled.div`\nfont-weight: 400;\nfont-size: 15px;\nline-height: 18px;\ncolor: #200EA9;\npadding-top: 14px;\n`;\nconst TooltipDescriptionWrapper = styled.div`\n font-weight: 400;\n font-size: 12px;\n line-height: 16px;\n color: #121212;\n padding: 5px;\n`;\nconst KeywordLabelHeading = styled.div<{fromDrawer?: boolean}>`\n font-weight: 600;\n font-size: 18px;\n padding-bottom: 11px;\n line-height: 22px;\n color: ${p => p.fromDrawer ? '#121212' : '#FFFFFF'};\n @media screen and (max-width: 768px) {\n font-size: 16px;\n padding-bottom: 6px;\n }\n`;\n\nconst DropDownWrapper = styled.div`\n overflow-y: auto !important;\n max-height: 196px !important;\n min-height: fit-content;\n cursor: pointer;\n div:first-child{\n &:hover{\n border-radius: 8px 8px 0px 0px;\n}\n\n}\ndiv:hover{\n background: #2D6CCA25;\n}\ndiv:last-child{\n &:hover{\n /* background: #2D6CCA25; */\n border-radius: 0px 0px 8px 8px;\n}\n}\n&::-webkit-scrollbar {\n height: 5px;\n width: 5px;\n }\n \n &::-webkit-scrollbar-thumb {\n background: rgba(138,138,138,0.32);\n }\n \n &::-webkit-scrollbar-track {\n background: rgba(138,138,138,0.12);\n }\n\n\n\n`;\n\nconst WrapperDropDown = styled.div<{last?: boolean}>`\nfont-weight: 400;\nfont-size: 14px;\nline-height: 22px;\ncolor: #121212;\nborder-bottom: ${p=>p?.last ? 'unset' : '1px solid #f6f6f6'};\npadding: 5px 15px;\n`;\nconst IntnetWrapper = styled.div`\ndisplay: flex;\nmargin-top: 9px;\nalign-items: center;\nflex-wrap: wrap;\ngap: 8px;\n`;\nconst IntentText = styled.div<{fromDrawer?: boolean}>`\nwidth: 86px;\nheight: 16px;\nfont-weight: 400;\nfont-size: 13px;\nline-height: 16px;\ncolor: ${p => p.fromDrawer ? '#121212' : '#A3A4A4'};\nmargin-left: ${p => p.fromDrawer ? '2px' : '40px'};\n@media screen and (max-width: 640px) {\n margin-left: 0 !important;\n white-space: nowrap;\n}\n`;\nconst Intent = styled.div<{intent: any}>`\ndisplay: flex;\njustify-content: center;\nalign-items: center;\nwidth: fit-content;\npadding: 4px 10px;\nheight: 23px;\nborder-radius: 24px;\ntext-transform: capitalize;\nfont-weight: 500;\nfont-size: 13px;\nline-height: 16px;\nbackground: ${p=> p?.intent?.background};\ncolor: ${p=> p?.intent?.color};\n`;\n\nconst GlobeStyled = styled(Globe)<{fromDrawer?: boolean}>`\nheight: 16px;\nwidth: 16px;\ncolor: ${p => p.fromDrawer ? '#121212' : '#fff'};\n`;\n","import {Button} from '@/components/common-components/v2';\nimport {useStore} from '@/store/root-store';\nimport {faArrowRight, faBolt} from '@fortawesome/pro-solid-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {observer} from 'mobx-react-lite';\nimport styled from 'styled-components';\nimport React from 'react';\n\ninterface Props {\n bannerWidth?: string;\n bannerHeight?: string;\n left?: string;\n top?: string;\n isKmt?: boolean;\n bottom?: string;\n noBackground?: boolean;\n text?: string;\n color?: string;\n}\n\nexport const ChartOverlayBanner:React.FC = observer(({color='#1FAC47', text='Get a 7 Day trial for Free to see more', noBackground=false, bannerWidth='60%', bannerHeight='90%', left='40px', top='', isKmt, bottom}) => {\n const {settings: {customer: {setAuthModal}}} = useStore('');\n\n return (\n \n \n \n {text} \n {isKmt && Please upgrade your subscription to expand your possibilities.
}\n setAuthModal(true, false)}>7 Day Free Trial \n {isKmt && setAuthModal(true, true)}>Log in }\n );\n});\n\n\nconst Container = styled.div<{bannerHeight: string; bannerWidth: string; left: string; top: string; isKmt: boolean; bottom: string; noBackground: boolean}>`\n width: ${p => p.bannerWidth};\n height: ${p => p.bannerHeight};\n border-radius: 10px;\n padding: 20px 30px;\n display: flex;\n flex-direction: column;\n ${p=> p?.top ? `top: ${p?.top}` : ''};\n position: absolute;\n bottom: ${p=> p?.bottom ? p?.bottom : '20px'};\n left: ${p => p.left};\n z-index: 1;\n background: ${p => p.noBackground ? 'transparent' : 'rgba(255, 255, 255, 0.6)'};\n ${p => p.noBackground ? '' : 'backdrop-filter: blur(12.5px)'};\n align-items: center;\n justify-content: ${P=> P?.isKmt ? 'center' : 'space-evenly'};\n z-index: 10;\n`;\n\nconst IconContainer = styled.div<{color: string}>`\n width: 46px;\n height: 46px;\n background: ${p => `${p.color}26`};\n font-size: 24px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n`;\n\nconst Heading = styled.div<{isKmt?: boolean}>`\n font-weight: 500;\n font-size: 16px;\n line-height: 19px;\n color: #121212;\n margin-top: ${p=> p?.isKmt ? '19px' : '0'};\n`;\nconst RequestWrapper = styled.div`\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n margin: 16px 0 29px 0;\n line-height: 17px;\n text-align: center;\n color: #4E5156;\n`;\nconst LogIn = styled.div`\n margin-top: 19px;\n font-size: 12px;\n line-height: 15px;\n text-align: right;\n color: #2D6CCA;\n cursor: pointer;\n`;\n","import {Button} from '@/components/common-components/v2';\nimport {useStore} from '@/store/root-store';\nimport {faArrowRight, faBolt} from '@fortawesome/pro-solid-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {observer} from 'mobx-react-lite';\nimport styled from 'styled-components';\nimport React from 'react';\n\ninterface Props {\n isInTable?: boolean;\n isPublicPage?: boolean;\n}\n\nexport const PublicPageBanner:React.FC = observer(({isInTable=false, isPublicPage=false}) => {\n const {settings: {customer: {setAuthModal}}} = useStore('');\n return (\n \n
\n \n
\n Get a 7 Day trial for Free to see more \n Please upgrade your subscription to expand your possibilities. \n
\n
setAuthModal(true, false)}>7 Day Free Trial \n );\n});\n\n\nconst Container = styled.div<{isInTable: boolean; isPublicPage: boolean}>`\n width: ${p=> p?.isPublicPage ? '100%' : '100%'};\n height: 90px;\n margin-top: ${p => p.isInTable ? '0' : '10px'};\n background: ${p => p.isInTable ? '#fff' : '#FFB94E'};\n ${p => p?.isInTable && `border: 1px solid #E8E8E8;\n box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.25);`}\n margin-left: ${p=> p?.isPublicPage ? '0px' : '0px'};\n border-radius: 20px;\n padding: 20px 30px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n > div {\n display: flex;\n align-items: center;\n gap: 10px;\n }\n`;\n\nconst IconContainer = styled.div<{isInTable: boolean}>`\n width: 46px;\n height: 46px;\n background: ${p => p.isInTable ? '#1FAC4726' : '#12121226'};\n font-size: 24px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n`;\n\nconst Heading = styled.div`\n font-weight: 700;\n font-size: 18px;\n line-height: 22px;\n color: #121212;\n`;\n\nconst SubHeading = styled.div`\n font-weight: 400;\n font-size: 14px;\n line-height: 18px;\n color: #121212;\n margin-top: 4px;\n`;\n"],"names":["AdvertisersTable","observer","getOrganicPaidHistoryData","keywordResearcherV2","keywordDetails","getKeywordDetailsData","loadingOrganicPaidHistoryDetails","useStore","countryCode","getSingleUrlParam","currentDomain","getDomain","window","location","hostname","isWhiteLabelDomain","linkgraphDomains","includes","screenWidth","setScreenWidth","useState","innerWidth","useEffect","handleResize","addEventListener","removeEventListener","data","paidRankings","adHistory","adsHeader","length","map","item","ads","z","searchDate","push","adsHeaderSorted","sort","columns","title","react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__","jsx","span","key","dataIndex","width","fixed","render","_","index","OverLay","blurred","isPublicKeywordResearcherV2","UrlDropdown","url","domain","text","isPublicPage","jsxs","div","br","align","sorter","a","b","budget","CellWrapper","formatNumber","totalKeywords","topOfPage","adCount","style","paddingLeft","sortedArr","Number","Date","dataArr","position","xaxixData","unshift","series","type","showSymbol","itemStyle","color","areaStyle","graphic","offset","ChartCellWrapper","BarChartColumn","grid","left","right","top","bottom","isAdsPosition","HeaderDate","idx","moment","Math","round","format","concat","AdsWrapper","singleAdData","find","Fragment","Tooltip","arrowContent","height","BoxTitle","BoxLink","href","Description","dangerouslySetInnerHTML","__html","body","Divider","background","margin","IndexDate","overlayInnerStyle","borderRadius","padding","overlayStyle","minWidth","cursor","TableContainer","BannerDiv","BannerContainer","PublicPageBanner","isInTable","Table","dataSource","pagination","loading","loadingRows","scroll","y","rowClassName","EmptyStateKeDetail","imgText","icon","description","styled","_templateObject","_templateObject1","_templateObject2","p","_templateObject3","_templateObject4","_templateObject5","_templateObject6","_templateObject7","_templateObject8","_templateObject9","_templateObject10","_templateObject11","param","addProtocol","test","settings","customer","setAuthModal","customerId","setCustomerId","router","useRouter","searchParams","URL","getAll","asPath","checkMode","domainName","value","trim","checkDomain","match","urlDomainRegex","checkSubDomain","urlSubDomainRegex","checkTargetPage","targetPageRegex","getDeropDownMenu","DropdownWrapper","FlexWrapperDropDown","marginBottom","marginTop","WrapperForPublic","onClick","FontAwesomeIcon","faLink","ButtonWrapper","Link","legacyBehavior","passHref","ButtonWrapperNewTab","target","rel","backgroundColor","faMagnifyingGlassChart","faArrowUpRightFromSquare","Dropdown","border","overlay","trigger","placement","SerpName","faCaretDown","CurrentAds","paidSerpsByTerm","dataSlice","setDataSlice","slice","Container","CardsContainer","_this","Box","SkeletonHorizontalLoaderGray","lightLoader","skeletonMarginLeft","skeletonHeight","dateSearched","BoxEmpty","ButtonWrapperLoad","search","keywordCompetition","isHeader","isFlag","headDescription","isMiniTable","isGHLAccount","profile","isWhitelabel","display","justifyContent","ContainerHeader","Flag","code","marginRight","NAWrapper","HeadingDescription","NextImg","src","faMagnifyingGlass","float","Text","DescriptionsWrapper","openLiveChat","GlobalVolume","getSvTopCountries","className","countries","getSpecificCountryByCode","loadingSvCountriesDetails","getSvTopSortCountries","searchVolume","getTrafficPercentage","totalValue","Title","TooltipDescriptionWrapper","maxHeight","faCircleInfo","CountryList","SkeletonRingLoader","formatLargeNumber","CountryItem","alignItems","Globe","CountryName","countryFlag","toUpperCase","name","toString","replace","GrayText","GoogleAdsBuyTable","locationId","adsBuyRecommendations","handleWeightLabelBackGround","label","toLowerCase","handlelabelColor","getMenuforDropDown","WrapperDropDown","FlexWrapper","FirstHeading","matchingCompetitors","shallow","keyword","replaceAll","CellWrapperFirst","_utils_url__WEBPACK_IMPORTED_MODULE_9__","so","KeywordWrapper","FlexWrapperWeightLabel","WeightLabelWrapper","weightLabel","Dot","WeightLabelName","Progress","showInfo","strokeWidth","percent","weight","trailColor","strokeColor","cpc","toFixed","VerticalBar","maxCpc","Wrapper","CaretDownOutlined","_templateObject12","_templateObject13","_templateObject14","HistoricalChart","isFullWidth","loadingKeywordMainDetails","chartData","metrics","trendData","Heading","ChartContainer","ChartOverlayBanner","ReactEcharts","minHeight","option","xAxis","boundaryGap","axisLabel","formatter","axisTick","alignWithLabel","vaxix","min","date","yAxis","show","splitLine","lineStyle","numeral","symbol","volume","tooltip","element","fontWeight","axisValue","reverse","Badge","dot","size","seriesName","renderToString","confine","KeywordCompetition","getData","getSerpOverviewDetails","cardsData","keywordSerp","query","exportSerpTable","exportingSerpOverview","loadingSerpOverviewDetails","organicRankings","serpAnalysis","selectedDuration","setSelectedDuration","loadAllRecord","setLoadAllRecord","checkedList","setCheckedList","getDataByDate","diff","dataList","startDate","startOf","subtract","endDate","filter","getChartData","graph","getArrangedData","answers","answer","id","question","subTitle","DisplayLink","source","displayedLink","link","images","image","blockPosition","merchant","getColors","val","getSitesList","sitesArr","sitesColorList","rankings","ranking","findIndex","site","checked","x","marginLeft","LinkWrapper","CollapseStyled","ghost","expandIcon","isActive","faCaretRight","Collapse","Panel","header","columnName","maxWidth","overflow","textOverflow","whiteSpace","gap","objectFit","ImageLink","ul","li","dr","DrContainer","getProgressColor","authorityScore","backlinksCount","domainsCount","traffic","tooltipFormatter","TooltipContainer","StyledTable","tr","th","items","td","truncate","makeSeries","sitesList","siteData","rank","handelLoadMore","exportSerpClickHandler","results","itm","_itm_data","Array","isArray","questionsAnswers","_itm_data1","MainContainer","homepages","govEduDomains","BoxValue","BoxDescription","monthlyClicks","monthlyCost","keywordsInUrl","keywordsInTitle","diversity","SocialImgContainer","opacity","wikipedia","facebook","twitter","youtube","pinterest","tumblr","linkedIn","CompetitionChart","legend","itemWidth","itemHeight","removeProtocolAndPrefix","toolbox","feature","saveAsImage","interval","inverse","zIndex","CustomTabContainer","chartTabs","tab","CustomTab","selected","bannerHeight","bannerWidth","showTitle","hideOverlap","SerpTableContainer","TableTitle","fontSize","TableTitleContainer","Button","buttonType","TableStyled","textAlign","table","_templateObject15","_templateObject16","_templateObject18","_templateObject19","_templateObject20","_templateObject21","_templateObject22","KeywordsMiniTable","tableData","loadingKeywordDetails","redirectLink","fromDrawer","publicHash","public_hash","getLocationParms","jsx_runtime","Keyword","sv","String","max","undefined","ButtonStyled","SuggestedKeywordsTables","termsMatchTableData","termsMatchQuestionsTableData","getKeywordDetailList","loadingTermsMatchDetails","loadingTermsMatchQuestionsDetails","contentOptimizer","currentPage","listId","publicShareHash","countryName","getLocation","linkWithQuestion","linkWithRelatedKw","linkSimple","KeywordBanner","faSparkles","InnerContainer","isCaDrawer","isDrawerFromCa","relatedKeywordsFirstArr","Info","ValuesWrapper","MainValue","count","TotalVolume","reduce","suggested_keywords_tables_templateObject","suggested_keywords_tables_templateObject1","suggested_keywords_tables_templateObject2","suggested_keywords_tables_templateObject3","IconContainer","faBolt","SubHeading","faArrowRight","Header","quotaUtilization","metricsData","handleExportPdf","loadAddKeywordsList","getKeywordListDetail","keSelectedKeyword","keywordToShow","isExporting","getRefetchDataV2","loadingRefetchData","keywordRankTracker","getListWithoutRepoll","getRankTrackerList","deleteKeywordLoading","deletedKeywordListData","setModaValue","openKeywordDeleteModal","keywordDeleteId","plans","showSidebarPaymentDrawer","setLoading","keywordDifficulty","rankingDifficulty","adsData","titleModel","buttonName","listName","setListName","fromKmt","listNameParam","newKeyword","setNewKeyword","selectedCountry","setSelectedCountry","closeModal","lastUpdatedTime","useMemo","getLastUpdated","lastUpdatedAt","onDeleteKeyword","error","errorMessage","apiError","notification","diffucultyChartData","difficulty","chartOption","startAngle","endAngle","axisLine","roundCap","pointer","offsetCenter","distance","splitNumber","detail","valueAnimation","dummyArray","isQuotaremaining","ke","maxKeywordLookups","consumed","total","handleRefetch","getBgAndColor","searchIntent","antIcon","LoadingOutlined","spin","HeadingContainer","faArrowLeft","keywords","DropDownWrapper","lastid","last","ButtonsContainer","SubWrapper","LastUpdate","FontAwesomeIconStyled","faRotateRight","variant","faFileArrowDown","AddKeywordDropdownV2","keList","targetKeyword","rankTrackerList","IntnetWrapper","IntentText","searchIntentList","getBgAndColorTooltip","tooltipTitle","Intent","intent","faSquareQuestion","BoxMainContent","KeywordLabelHeading","desktopSearches","mobileSearches","serpFeatures","locationFlag","GlobeStyled","BoldValue","SerpToolTipWrapper","SerpHeading","SerpToolTipContainer","paddingTop","getFeatureIcons","titleCase","SerpContainer","topicalSearchVolume","trafficPotential","topResult","WrapperForLink","flexWrap","cmp","paidClicksPercentage","Square","advetisers","WrapperTooltip","ToolWrapper","TitleWrapper","AddWrapper","DescriptionTooltip","overlayClassName","DescSpan","CreateList","KeDeleteModal","isOpen","header_templateObject","header_templateObject1","header_templateObject2","header_templateObject3","_templateObject17","_templateObject23","_templateObject24","_templateObject25","_templateObject26","_templateObject27","_templateObject28","_templateObject29","_templateObject30","_templateObject31","_templateObject32","_templateObject33","_templateObject34","_templateObject35","noBackground","isKmt","RequestWrapper","LogIn","P"],"sourceRoot":""}