added graph

client/components/Graph/NpmGraph.jsx

@@ -0,0 +1,108 @@
+import React, {useState, useEffect} from "react";
+import { Line } from 'react-chartjs-2'
+import { 
+    Chart as ChartJS,
+    CategoryScale,
+    LinearScale,
+    PointElement,
+    LineElement,
+    Title,
+    Tooltip,
+    Legend, 
+} from 'chart.js/auto';
+import styles from "./NpmGraph.module.css"
+
+const frequency = 10;
+function NpmGraph({packageNames}) {
+    const [npmStats, setNpmStats] = useState({});
+    // const fetchData = () => {
+    //     //Join all package packageNames with a ','
+    //     console.log(packageNames)
+    //     let packageNameString = packageNames.join(',');
+    //     console.log(packageNameString)
+    //     //Fetch npm download data over a year range for all package
+    //     fetch(`https://api.npmjs.org/downloads/range/last-year/${packageNameString}`)
+    //     .then(res=>res.json())
+    //     .then(downloadData => {
+    //         setNpmStats(downloadData);
+    //     })
+    //     .catch(err => console.log({err}))
+    // }
+
+    useEffect(()=> {
+        //Join all package packageNames with a ','
+        console.log("These are the packageNames: ", packageNames);
+        let packageNameString = packageNames.join(',');
+        console.log("This is the packageNameString: ", packageNameString);
+        //Fetch npm download data over a year range for all package
+        fetch(`https://api.npmjs.org/downloads/range/last-year/${packageNameString}`)
+        .then(res=>res.json())
+        .then(downloadData => {
+            for (let fw in downloadData) {
+                for (let i = 0; i < downloadData.length; i)
+            }
+            Object
+            setNpmStats(downloadData);
+            console.log("This is the downloadData: ", downloadData)
+        })
+        .catch(err => console.log({err}))
+     }, []);
+
+     useEffect(()=> {
+        console.log("This is the npmStats: ",npmStats)
+    },[npmStats])
+
+
+    // const testData = [
+    //     {downloads: 12, day:0},
+    //     {downloads: 20, day:1},
+    //     {downloads: 100, day:2},
+    //     {downloads: 2, day:3},
+    //     {downloads: 50, day:4},
+    // ]
+
+    const lineColors = ['blue', 'red', 'green', 'purple', 'orange', 'pink', 'cyan', 'yellow'];
+    // fill ds with datasets objects
+    // each line(framework) has to have its own dataset object with label, data, borderColor, and backgroundColor
+    const ds = [];
+    let data = {};
+    // then set datasets within data to ds
+    if (Object.keys(npmStats).length) {
+        for (let i = 0; i < packageNames.length; i++) {
+            ds.push(
+                {
+                    label: packageNames[i],
+                    data: npmStats[packageNames[i]].downloads.map(({downloads})=>downloads),
+                    borderColor: lineColors[i],
+                    backgroundColor: lineColors[i],
+                }
+            )
+        }
+
+        data = {
+            labels: npmStats[packageNames[0]].downloads.map(({day})=>day), // X-axis columns
+            datasets: ds
+        }
+    }
+
+
+
+    if (!Object.keys(npmStats).length) return (
+        <div>Waiting for data to fetch</div>
+    )
+    if (Object.keys(npmStats).length) {
+        return(
+            // <div className={styles.graphContainer}>
+            <div className="flex justify-center w-1/2">
+                <Line
+                 data={data}
+                //  options={{
+                //     responsive: false
+                //  }}
+                 />
+            </div>
+        );
+    }
+};
+
+export default NpmGraph

client/components/Graph/NpmGraph.module.css

@@ -0,0 +1,3 @@
+.graphContainer {
+    width: 100%;
+}

client/components/TestPage/TestPage.jsx

@@ -6,6 +6,7 @@ import Card from "../Card/Card";
 import StackChoiceBar from "../StackChoiceBar/StackChoiceBar";
 import StackChoice from "../StackChoice/StackChoice";
 import TopBar from "../TopBar/TopBar";
+import NpmGraph from "../Graph/NpmGraph";
 
 function TestPage({
   handleClick,
@@ -84,6 +85,7 @@ function TestPage({
           Continue
         </Link>
       </div>
+      <NpmGraph packageNames = {data.map(({packageName}) => packageName)} />
     </div>
   );
 }

index.html

@@ -3,7 +3,6 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="./client/public/vite.svg" />
-    <link href="/dist/output.css" rel="stylesheet" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + React</title>
   </head>