From 91ff24638c045a676d8ff3995a491e5373134869 Mon Sep 17 00:00:00 2001
From: Ravindra <42912207+KR-Ravindra@users.noreply.github.com>
Date: Fri, 27 Oct 2023 09:43:48 -0700
Subject: [PATCH] QUICK CHANGES

---
 src/components/homePage/index.js            | 172 +++++++++++---------
 src/components/homePage/keywordListFrame.js |  49 +++---
 2 files changed, 128 insertions(+), 93 deletions(-)

diff --git a/src/components/homePage/index.js b/src/components/homePage/index.js
index 7b576ef..1b7a01d 100644
--- a/src/components/homePage/index.js
+++ b/src/components/homePage/index.js
@@ -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("");
@@ -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);
@@ -63,7 +63,7 @@ function HomePage() {
   };
 
   // const handleDownload = () => {
-  //     // const element = document.getElementById('pdf-container'); 
+  //     // const element = document.getElementById('pdf-container');
   //   // html2pdf(element);
   //   window.print();
   // };
@@ -74,6 +74,11 @@ function HomePage() {
   };
 
   const handleSubmit = () => {
+    setScraperData("");
+    setKeywordListData("");
+    setMultialgo("");
+    setRecommendationListData("");
+    setAnalyzerData("");
     setLoading(true);
 
     if (urlInput.trim() === "") {
@@ -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">
@@ -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
diff --git a/src/components/homePage/keywordListFrame.js b/src/components/homePage/keywordListFrame.js
index 0af1547..1fa26a7 100644
--- a/src/components/homePage/keywordListFrame.js
+++ b/src/components/homePage/keywordListFrame.js
@@ -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);
 
@@ -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,
   }));
 
@@ -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
           }
         }),
       },
@@ -76,7 +88,6 @@ const KeywordBubbleChart = ({ keywordListData }) => {
         display:false
       },
       y: {
-        beginAtZero: true,
         display:false
       },
     },