Skip to content

Commit

Permalink
QUICK CHANGES
Browse files Browse the repository at this point in the history
  • Loading branch information
@KR-Ravindra
KR-Ravindra committed Oct 27, 2023
1 parent 25b869c commit 91ff246
Show file tree
Hide file tree
Showing 2 changed files with 128 additions and 93 deletions.
172 changes: 98 additions & 74 deletions src/components/homePage/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,16 @@ import React, { useState, useEffect } from "react";
import "./index.css";
import ScraperTextFrame from "./scraperTextFrame";
import "./animation.css";
import html2pdf from 'html2pdf.js';
import scraperText from '../../api/scraperText';
import html2pdf from "html2pdf.js";
import scraperText from "../../api/scraperText";
import MultiAlgoComparision from "../../api/multiAlgo";
import keywordList from "../../api/keyword";
import KeywordListFrame from './keywordListFrame';
import AlgoComparision from './algoComparision';
import TableComponent from './recommendationTableComponent';
import KeywordListFrame from "./keywordListFrame";
import AlgoComparision from "./algoComparision";
import TableComponent from "./recommendationTableComponent";
import RecommendationList from "../../api/recommendation";
import AnalyzerList from "../../api/analyzer"
import InsightTable from './inSight'
import AnalyzerList from "../../api/analyzer";
import InsightTable from "./inSight";

function HomePage() {
const [urlInput, setUrlInput] = useState("");
Expand All @@ -20,8 +20,8 @@ function HomePage() {
const [scraperData, setScraperData] = useState("");
const [keywordListData, setKeywordListData] = useState("");
const [multialgo, setMultialgo] = useState("");
const [recommendationListData, setRecommendationListData]=useState('')
const [analyzerData, setAnalyzerData]= useState("");
const [recommendationListData, setRecommendationListData] = useState("");
const [analyzerData, setAnalyzerData] = useState("");
const [scrollPosition, setScrollPosition] = useState(0);
const [scrollUp, setScrollUp] = useState(false);
const [resetScroll, setResetScroll] = useState(false);
Expand Down Expand Up @@ -63,7 +63,7 @@ function HomePage() {
};

// const handleDownload = () => {
// // const element = document.getElementById('pdf-container');
// // const element = document.getElementById('pdf-container');
// // html2pdf(element);
// window.print();
// };
Expand All @@ -74,6 +74,11 @@ function HomePage() {
};

const handleSubmit = () => {
setScraperData("");
setKeywordListData("");
setMultialgo("");
setRecommendationListData("");
setAnalyzerData("");
setLoading(true);

if (urlInput.trim() === "") {
Expand All @@ -87,61 +92,62 @@ function HomePage() {
};

console.log("Form submitted:", payload);
const scraperTextData= scraperText(payload);
scraperTextData.then((response)=>
setScraperData(response))
.catch(error => {
console.error('API error:', error);
const scraperTextData = scraperText(payload);
scraperTextData
.then((response) => setScraperData(response))
.catch((error) => {
console.error("API error:", error);
})
.finally(() => {
setLoading(false);
console.log("Finalised");
});

const keywordListData= keywordList(payload)
const keywordListData = keywordList(payload);

keywordListData.then((response)=>
setKeywordListData(response))
.catch(error => {
console.error('API error:', error);
keywordListData
.then((response) => setKeywordListData(response))
.catch((error) => {
console.error("API error:", error);
})
.finally(() => {
setLoading(false);
console.log("Finalised");
});
const recommendationList=RecommendationList(payload);
recommendationList.then((response) =>
setRecommendationListData(response))
.catch(error => {
console.error('API error:', error);
const recommendationList = RecommendationList(payload);
recommendationList
.then((response) => setRecommendationListData(response))
.catch((error) => {
console.error("API error:", error);
})
.finally(() => {
setLoading(false);
console.log("Finalised");
});


const multialgoComparision = MultiAlgoComparision(payload);
multialgoComparision.then((response) =>
setMultialgo(response))
.catch(error => {
console.error('API error:', error);
multialgoComparision
.then((response) => setMultialgo(response))
.catch((error) => {
console.error("API error:", error);
})
.finally(() => {
setLoading(false);
console.log("Finalised");
});

const urlAnalyzerData=AnalyzerList(payload)
urlAnalyzerData.then((response) =>
setAnalyzerData(response))
.catch(error => {
console.error('API error:', error);
const urlAnalyzerData = AnalyzerList(payload);
urlAnalyzerData
.then((response) => setAnalyzerData(response))
.catch((error) => {
console.error("API error:", error);
})
.finally(() => {
setLoading(false);
});

};

return (
<div id="pdf-container" className={`container ${scrollUp ? 'move-up' : ''}`}>
<div
id="pdf-container"
className={`container ${scrollUp ? "move-up" : ""}`}
>
<div>
<h1 className="textStyle">Keyword-Krawler</h1>
<div className="inputContainer">
Expand All @@ -164,44 +170,62 @@ function HomePage() {
<option value="suffix_tree">Suffix Tree</option>
</select>
</div>
<button className="centeredButton" onClick={() => { handleSubmit(); handleScrollUp(); }}>
<button
className="centeredButton"
onClick={() => {
handleSubmit();
handleScrollUp();
}}
>
Krawl
</button>
</div>

{loading && (
<div className="upwards-transition">
<div className="center">
<div className="wave"></div>
<div className="wave"></div>
<div className="wave"></div>
<div className="wave"></div>
<div className="wave"></div>
<div className="wave"></div>
<div className="wave"></div>
<div className="wave"></div>
<div className="wave"></div>
<div className="wave"></div>
</div>
{loading && (
<div className="upwards-transition">
<div className="center">
<div className="wave"></div>
<div className="wave"></div>
<div className="wave"></div>
<div className="wave"></div>
<div className="wave"></div>
<div className="wave"></div>
<div className="wave"></div>
<div className="wave"></div>
<div className="wave"></div>
<div className="wave"></div>
</div>
)}
{scraperData && <ScraperTextFrame url={urlInput} scraperData={scraperData} analyzerData={analyzerData}/>}
{scraperData && keywordListData&& <KeywordListFrame keywordListData={keywordListData}/>}

<div style={{ display: 'flex', flexDirection: 'row', width: '100%' }}>
<div style={{ width:'40%' }}>
{scraperData && keywordListData&&recommendationListData && <TableComponent recommendationListData={recommendationListData}/>}
</div>
<div style={{ width: '60%' }}>
<div style={{ height: '15%' }}>
{scraperData && keywordListData && multialgo && <AlgoComparision multialgo={multialgo} />}
</div>
<div style={{ height: '80%', width: '100%', overflow: 'auto' }}>
{scraperData && analyzerData && <InsightTable analyzerData={analyzerData} />}
</div>
</div>


</div>
)}
{scraperData && (
<ScraperTextFrame
url={urlInput}
scraperData={scraperData}
analyzerData={analyzerData}
/>
)}
{scraperData && keywordListData && (
<KeywordListFrame keywordListData={keywordListData} />
)}

<div style={{ display: "flex", flexDirection: "row", width: "100%" }}>
<div style={{ width: "40%" }}>
{scraperData && keywordListData && recommendationListData && (
<TableComponent recommendationListData={recommendationListData} />
)}
</div>
<div style={{ width: "60%" }}>
<div style={{ height: "15%" }}>
{scraperData && keywordListData && multialgo && (
<AlgoComparision multialgo={multialgo} />
)}
</div>
<div style={{ height: "80%", width: "100%", overflow: "auto" }}>
{scraperData && analyzerData && recommendationListData && (
<InsightTable analyzerData={analyzerData} />
)}
</div>
</div>

{/* <button className="downloadButton" onClick={handleDownload}>
Download
Expand Down
49 changes: 30 additions & 19 deletions src/components/homePage/keywordListFrame.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { Chart as ChartJS, LinearScale, PointElement, Tooltip, Legend } from 'chart.js';
import { Bubble } from 'react-chartjs-2';
import faker from 'faker';
import { f } from 'html2pdf.js';

ChartJS.register(LinearScale, PointElement, Tooltip, Legend);

Expand Down Expand Up @@ -29,18 +30,29 @@ if (!ChartJS?.plugins?.getPlugin('customLabels')) {
}

const KeywordBubbleChart = ({ keywordListData }) => {
const calculateBubbleRadius = (count) => {
// Adjust this factor as needed to control the scaling of bubbles
const scalingFactor = 4;
return count % 100
const calculateBubbleRadius = (index) => {
if (index > 7) {
return 50 ;
} else if (index > 3) {
return 65;
} else {
return 85;
}
}
const calculateBubbleX = (index) => {
return faker.datatype.number({ min: -100, max: 100 });
};

const calculateBubbleY = (index) => {
return faker.datatype.number({ min: -100, max: 100 });
};

const bubbleData = keywordListData?.topKeywordListings.map((item) => (
// console.log('item',item.originalKeyword, item.count),
{
// r: calculateBubbleRadius(item.count),
r: calculateBubbleRadius(item.count),
const bubbleData = keywordListData?.topKeywordListings.map((item, index) => (

{
r: calculateBubbleRadius(index),
x: calculateBubbleX(index),
y: calculateBubbleY(index),
originalKeyword: item.originalKeyword,
}));

Expand All @@ -49,19 +61,19 @@ const KeywordBubbleChart = ({ keywordListData }) => {
{
label: 'Keyword',
data: bubbleData?.map((item) => ({
x: faker.datatype.number({ min: -100, max: 100 }),
y: faker.datatype.number({ min: -100, max: 100 }),
x: item.x ,
y: item.y ,
r: item.r,
})),
backgroundColor: bubbleData?.map((item) => {
if (item.r > 55) {
return '#F2510A'; // orange
} else if (item.r > 35) {
if (item.r > 65) {
return '#F74C4C'; // red
} else if (item.r > 50) {
return '#FABB2E'; // yellow
}else if(item.r > 10){
return '#5b209a'; //purple
}else {
return '#287e29'; // green
} else if (item.r > 0) {
return '#70C1B3'; // blue-green
} else {
return '#70C1B3'; // blue-green
}
}),
},
Expand All @@ -76,7 +88,6 @@ const KeywordBubbleChart = ({ keywordListData }) => {
display:false
},
y: {
beginAtZero: true,
display:false
},
},
Expand Down

0 comments on commit 91ff246

Please sign in to comment.