Add interaction

package-lock.json

@@ -16786,16 +16786,16 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.2.2",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.2.2.tgz",
-      "integrity": "sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==",
+      "version": "4.9.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
+      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
       "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
       },
       "engines": {
-        "node": ">=14.17"
+        "node": ">=4.2.0"
       }
     },
     "node_modules/unbox-primitive": {

src/App.js

@@ -1,7 +1,9 @@
 import { useState } from "react";
+import chartXkcd from "chart.xkcd";
 
 const projectTypes = ["model", "dataset", "space"];
 
+
 /**
  * 1. User click enter key
  * 2. Get model/dataset/space name
@@ -10,9 +12,29 @@ const projectTypes = ["model", "dataset", "space"];
  * 5. Draw line chart
  */
 function App() {
-  const [projectType, setProjectType] = useState("model");
-  const [projectName, setProjectName] = useState("meta-llama/Llama-2-7b");
+  const [projectType, setProjectType] = useState("Model");
+  const [projectName, setProjectName] = useState("");
+
+  const onSubmit = () => {
+    const svg = document.querySelector('.line-chart')
 
+    new chartXkcd.Line(svg, {
+      title: 'Like hitory',
+      xLabel: 'Month',
+      yLabel: '$ Dollars',
+      data: {
+        labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
+        datasets: [{
+          label: 'Plan',
+          data: [30, 70, 200, 300, 500, 800, 1500, 2900, 5000, 8000],
+        }, {
+          label: 'Reality',
+          data: [0, 1, 30, 70, 80, 100, 50, 80, 40, 150],
+        }]
+      },
+      options: {}
+    });
+  }
   return (
     <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-16">
       <div className="mx-auto max-w-3xl">
@@ -30,10 +52,11 @@ function App() {
                 name="country"
                 autoComplete="country"
                 className="h-full rounded-md border-0 bg-transparent py-0 pl-3 pr-7 text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm"
+                onChange={(e) => setProjectType(e.target.value)}
               >
-                <option>Model</option>
-                <option>Dataset</option>
-                <option>Space</option>
+                <option value="model">Model</option>
+                <option value="dataset">Dataset</option>
+                <option value="space">Space</option>
               </select>
             </div>
             <input
@@ -42,11 +65,19 @@ function App() {
               id="phone-number"
               className="block w-full rounded-md border-0 py-1.5 pl-24 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
               placeholder="meta-llama/Llama-2-7b"
+              value={projectName}
+              onChange={(e) => setProjectName(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") {
+                  onSubmit();
+                }
+              }}
             />
           </div>
         </div>
-
-        <svg className="line-chart"></svg>
+        <div className="mt-16">
+          <svg className="line-chart"></svg>
+        </div>
       </div>
     </div>
   );