initial commit

mendableai · May 26, 2024 · 50702ab · 50702ab
1 parent 044c3b4
commit 50702ab
Show file tree

Hide file tree

Showing 6 changed files with 244 additions and 88 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
     "@remixicon/react": "^4.2.0",
     "@tremor/react": "^3.17.2",
     "axios": "^1.7.2",
+    "cubic-spline": "^3.0.3",
     "next": "14.2.3",
     "react": "^18",
     "react-dom": "^18"

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -7,11 +7,68 @@ import Graph from "../components/graph";
 import { useState } from "react";
 
 export default function Home() {
+  const initialData = [
+    { date: "Apr 15", Stars: 0 },
+    { date: "Apr 16", Stars: 160 },
+    { date: "Apr 17", Stars: 320 },
+    { date: "Apr 18", Stars: 480 },
+    { date: "Apr 19", Stars: 720 },
+    { date: "Apr 20", Stars: 990 },
+    { date: "Apr 21", Stars: 1125 },
+    { date: "Apr 22", Stars: 1260 },
+    { date: "Apr 23", Stars: 1530 },
+    { date: "Apr 24", Stars: 1620 },
+    { date: "Apr 25", Stars: 1710 },
+    { date: "Apr 26", Stars: 1755 },
+    { date: "Apr 27", Stars: 1800 },
+    { date: "Apr 28", Stars: 2040 },
+    { date: "Apr 29", Stars: 2175 },
+    { date: "Apr 30", Stars: 2242 },
+    { date: "May 01", Stars: 2310 },
+    { date: "May 02", Stars: 2378 },
+    { date: "May 03", Stars: 2445 },
+    { date: "May 04", Stars: 2512 },
+    { date: "May 05", Stars: 2546 },
+    { date: "May 06", Stars: 2580 },
+    { date: "May 07", Stars: 2648 },
+    { date: "May 08", Stars: 2715 },
+    { date: "May 09", Stars: 2782 },
+    { date: "May 10", Stars: 2850 },
+    { date: "May 11", Stars: 2917 },
+    { date: "May 12", Stars: 2985 },
+    { date: "May 13", Stars: 3052 },
+    { date: "May 14", Stars: 3120 },
+    { date: "May 15", Stars: 3187 },
+    { date: "May 16", Stars: 3255 },
+    { date: "May 17", Stars: 3322 },
+    { date: "May 18", Stars: 3390 },
+    { date: "May 19", Stars: 3510 },
+    { date: "May 20", Stars: 3630 },
+    { date: "May 21", Stars: 3900 },
+    { date: "May 22", Stars: 4082 },
+    { date: "May 23", Stars: 4263 },
+    { date: "May 24", Stars: 4445 },
+    { date: "May 25", Stars: 4594 },
+  ];
   const [padding, setPadding] = useState(64);
+  const [chartData, setChartData] = useState(initialData);
+  const [xName, setXName] = useState("Date");
+  const [yName, setYName] = useState("Stars");
   return (
     <main className="relative flex h-screen flex-col items-center justify-center bg-gray-900">
-      <Menu padding={padding} setPadding={setPadding} />
-      <Graph padding={padding} />
+      <Menu
+        padding={padding}
+        setPadding={setPadding}
+        setChartData={setChartData}
+        setXName={setXName}
+        setYName={setYName}
+      />
+      <Graph
+        padding={padding}
+        chartData={chartData}
+        xName={xName}
+        yName={yName}
+      />
     </main>
   );
 }
diff --git a/src/components/graph.tsx b/src/components/graph.tsx
@@ -2,78 +2,40 @@
 
 import { AreaChart, Color } from "@tremor/react";
 import { useState } from "react";
+import { useEffect } from "react";
 
-export default function Graph({ padding }: { padding: number }) {
-  const mockchartdata = [
-    {
-      date: "Apr 15",
-      Stars: 0,
-    },
-    {
-      date: "Apr 18",
-      Stars: 480,
-    },
-    {
-      date: "Apr 19",
-      Stars: 720,
-    },
-    {
-      date: "Apr 20",
-      Stars: 990,
-    },
-    {
-      date: "Apr 22",
-      Stars: 1260,
-    },
-    {
-      date: "Apr 23",
-      Stars: 1530,
-    },
-    {
-      date: "Apr 27",
-      Stars: 1800,
-    },
-    {
-      date: "Apr 28",
-      Stars: 2040,
-    },
-    {
-      date: "May 01",
-      Stars: 2310,
-    },
-    {
-      date: "May 06",
-      Stars: 2580,
-    },
-    {
-      date: "May 16",
-      Stars: 2850,
-    },
-    {
-      date: "May 18",
-      Stars: 3120,
-    },
-    {
-      date: "May 19",
-      Stars: 3360,
-    },
-    {
-      date: "May 20",
-      Stars: 3630,
-    },
-    {
-      date: "May 21",
-      Stars: 3900,
-    },
-    {
-      date: "May 25",
-      Stars: 4594,
-    },
-  ];
+export default function Graph({
+  padding,
+  chartData,
+  xName,
+  yName,
+}: {
+  padding: number;
+  chartData: any;
+  xName: string;
+  yName: string;
+}) {
+  const [maxValue, setMaxValue] = useState(0);
+  const [finalChartData, setFinalChartData] = useState(chartData);
+  useEffect(() => {
+    if (
+      chartData.length > 0 &&
+      "Stars" in chartData[0] &&
+      "date" in chartData[0]
+    ) {
+      const maxStars = Math.max(...chartData.map((data: any) => data.Stars));
+      setMaxValue(maxStars);
 
-  const [chartData, setChartData] = useState(mockchartdata);
-  const maxStars = Math.max(...mockchartdata.map((data) => data.Stars));
-  const [maxValue, setMaxValue] = useState(maxStars);
+      setFinalChartData(chartData);
+    } else {
+      setMaxValue(1000);
+      setFinalChartData(chartData);
+    }
+    console.log(finalChartData);
+    console.log(maxValue);
+    console.log(yName);
+    console.log(xName);
+  }, [chartData]);
   return (
     <div
       className="flex items-center justify-center h-fit w-fit "
@@ -90,15 +52,18 @@ export default function Graph({ padding }: { padding: number }) {
           </div>
           <div className="pt-6 text-xs">
             <AreaChart
-              className="h-72 w-96"
-              data={chartData}
+              style={{
+                height: "500px",
+                width: "700px",
+              }}
+              data={finalChartData}
               index="date"
-              categories={["Stars"]}
+              categories={[yName]}
               colors={["orange-400"]}
               yAxisWidth={35}
               showLegend={false}
-              yAxisLabel="Stars"
-              xAxisLabel="Date"
+              yAxisLabel={yName}
+              xAxisLabel={xName}
               valueFormatter={(value) => {
                 if (value > 99) {
                   return (value / 1000).toFixed(1) + "k";
@@ -107,7 +72,6 @@ export default function Graph({ padding }: { padding: number }) {
               }}
               maxValue={maxValue}
               connectNulls={true}
-              curveType="natural"
             />
           </div>
         </div>

diff --git a/src/components/menu.tsx b/src/components/menu.tsx
@@ -3,9 +3,15 @@ import React from "react";
 export default function Menu({
   padding,
   setPadding,
+  setChartData,
+  setXName,
+  setYName,
 }: {
   padding: number;
   setPadding: (padding: number) => void;
+  setChartData: (data: any) => void;
+  setXName: (xName: string) => void;
+  setYName: (yName: string) => void;
 }) {
   return (
     <div className="absolute bottom-10 left-1/2 transform -translate-x-1/2 flex items-center space-x-4 bg-transparent p-4 rounded-lg bg-slate-700">
@@ -22,8 +28,107 @@ export default function Menu({
           <option value={128}>128</option>
         </select>
       </div>
-      <button className="bg-blue-600 text-white px-4 py-2 rounded">
-        Add data
+      <button
+        className="bg-blue-600 text-white px-4 py-2 rounded"
+        onClick={async () => {
+          const token =
+            "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";
+          const repoUrl = "https://github.com/mendableai/data-connectors";
+          if (token && repoUrl) {
+            try {
+              const response = await fetch(
+                `/api/githubStars?repo=${encodeURIComponent(
+                  repoUrl
+                )}&token=${encodeURIComponent(token)}`
+              );
+              if (!response.ok) {
+                throw new Error(`Error: ${response.statusText}`);
+              }
+              const data = await response.json();
+              console.log("GitHub Stars Data:", data);
+              setXName("Date");
+              setYName("Stars");
+              setChartData(data);
+            } catch (error) {
+              console.error("Failed to fetch GitHub stars data:", error);
+              alert(
+                "Failed to fetch GitHub stars data. Please check the console for more details."
+              );
+            }
+          } else {
+            alert("Both fields are required.");
+          }
+        }}
+      >
+        Add GitHub data
+      </button>
+      <button
+        className="bg-blue-600 text-white px-4 py-2 rounded"
+        onClick={async () => {
+          const pastedCsvData = `Speed,Value
+1,100
+2,200
+3,300
+4,400
+5,500
+6,600
+7,700
+8,800
+9,900
+10,1000
+11,1100
+12,1200
+13,1300
+14,1400
+15,1500
+16,1600
+17,1700
+18,1800
+19,1900
+20,2000
+21,2100
+22,2200
+23,2300
+24,2400
+25,2500
+26,2600
+27,2700
+28,2800
+29,2900
+30,3000
+31,3100
+32,3200
+33,3300
+34,3400
+35,3500
+36,3600
+37,3700
+38,3800
+39,3900
+40,4000
+41,4100
+42,4200
+43,4300
+44,4400
+45,4500
+46,4600
+47,4700
+48,4800
+49,4900
+50,5000`;
+          const [header, ...rows] = pastedCsvData.split("\n");
+          const [dateKey, valueKey] = header.split(",");
+          const parsedData = rows.map((row) => {
+            const [date, value] = row.split(",");
+            return { [dateKey]: date, [valueKey]: Number(value) };
+          });
+
+          setChartData(parsedData);
+          setXName(dateKey);
+          setYName(valueKey);
+        }}
+      >
+        Add CSV data
       </button>
       <button className="bg-red-600 text-white px-4 py-2 rounded">
         Export