cleaned interface

.bitmap

@@ -0,0 +1,5 @@
+/* THIS IS A BIT-AUTO-GENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. */
+
+{
+    "version": "14.8.8"
+}

assets/csv/calcium.csv

@@ -0,0 +1,5 @@
+name,uv,pv,amt
+Page A,4000,2400,2400
+Page B,3000,1398,2210
+page C,2000,9800,2290
+page D,2780,3908,2000

components/Allproducts.js

@@ -58,34 +58,6 @@ class Allproducts extends Component {
             );
           }}
         </Query>
-        <div className="text-center">
-          <h2>Authors</h2>
-          <Query query={AUTHORS_QUERY}>
-            {({ loading, error, data }) => {
-              if (loading) return <div>Fetching</div>;
-              if (error) return <div>Error</div>;
-              const items = data.authors;
-              return (
-                <div>
-                  {items.map((item) => (
-                    <div>
-                      <p>
-                        {item.name}:{item.country},{item.age}
-                      </p>
-                    </div>
-                  ))}
-                </div>
-              );
-            }}
-          </Query>
-          <button
-            onClick={() => {
-              alert("alert");
-            }}
-          >
-            CLICK ME
-          </button>
-        </div>
       </>
     );
   }

components/AuthorsUpdate.js

@@ -0,0 +1,63 @@
+import React from "react";
+import AUTHORS_QUERY from "components/Queries/authors.js";
+import { gql } from "@apollo/client";
+import { useMutation } from "react-apollo";
+import { Query } from "react-apollo";
+
+const AUTHOR_UPDATE_MUTATION = gql`
+  mutation($oldname: String!, $newname: String!) {
+    updateAuthor(where: { name: $oldname }, data: { name: $newname }) {
+      id
+    }
+  }
+`;
+
+export default function Authors() {
+  const [changeAuthor] = useMutation(AUTHOR_UPDATE_MUTATION);
+  let input;
+
+  return (
+    <>
+      <div className="text-center">
+        <Query query={AUTHORS_QUERY}>
+          {({ loading, error, data }) => {
+            if (loading) return <div>Fetching</div>;
+            if (error) return <div>Error</div>;
+            const items = data.authors;
+
+            return (
+              <div>
+                <form
+                  onSubmit={(e) => {
+                    e.preventDefault();
+                    changeAuthor({
+                      variables: {
+                        oldname: items[0].name,
+                        newname: input.value,
+                      },
+                    });
+                    input.value = "";
+                  }}
+                >
+                  <input
+                    ref={(node) => {
+                      input = node;
+                    }}
+                  />
+                  <button type="submit">Update first Author</button>
+                </form>
+                {items.map((item) => (
+                  <div>
+                    <p>
+                      {item.name}:{item.country},{item.age}
+                    </p>
+                  </div>
+                ))}
+              </div>
+            );
+          }}
+        </Query>
+      </div>
+    </>
+  );
+}

components/Recharts/barchart.js

@@ -0,0 +1,79 @@
+import React from "react";
+import BarChart from "@bit/recharts.recharts.bar-chart";
+import Bar from "@bit/recharts.recharts.bar";
+import XAxis from "@bit/recharts.recharts.x-axis";
+import YAxis from "@bit/recharts.recharts.y-axis";
+import CartesianGrid from "@bit/recharts.recharts.cartesian-grid";
+import Tooltip from "@bit/recharts.recharts.tooltip";
+import Legend from "@bit/recharts.recharts.legend";
+
+const data = [
+  {
+    name: "Page A",
+    uv: 4000,
+    pv: 2400,
+    amt: 2400,
+  },
+  {
+    name: "Page B",
+    uv: 3000,
+    pv: 1398,
+    amt: 2210,
+  },
+  {
+    name: "Page C",
+    uv: 2000,
+    pv: 9800,
+    amt: 2290,
+  },
+  {
+    name: "Page D",
+    uv: 2780,
+    pv: 3908,
+    amt: 2000,
+  },
+  {
+    name: "Page E",
+    uv: 1890,
+    pv: 4800,
+    amt: 2181,
+  },
+  {
+    name: "Page F",
+    uv: 2390,
+    pv: 3800,
+    amt: 2500,
+  },
+  {
+    name: "Page G",
+    uv: 3490,
+    pv: 4300,
+    amt: 2100,
+  },
+];
+
+const Barchart = () => {
+  return (
+    <BarChart
+      width={600}
+      height={500}
+      data={data}
+      margin={{
+        top: 5,
+        right: 30,
+        left: 20,
+        bottom: 5,
+      }}
+    >
+      <CartesianGrid strokeDasharray="3 3" />
+      <XAxis dataKey="name" />
+      <YAxis />
+      <Tooltip />
+      <Legend />
+      <Bar dataKey="pv" fill="#8884d8" />
+      <Bar dataKey="uv" fill="#82ca9d" />
+    </BarChart>
+  );
+};
+
+export default Barchart;

components/Recharts/linechart.js

@@ -0,0 +1,46 @@
+import React from "react";
+import LineChart from "@bit/recharts.recharts.line-chart";
+import XAxis from "@bit/recharts.recharts.x-axis";
+import YAxis from "@bit/recharts.recharts.y-axis";
+import CartesianGrid from "@bit/recharts.recharts.cartesian-grid";
+import Line from "@bit/recharts.recharts.line";
+import Tooltip from "@bit/recharts.recharts.tooltip";
+import Legend from "@bit/recharts.recharts.legend";
+import Papa from "papaparse";
+import { CSVReader } from "react-papaparse";
+
+const Linechart = () => {
+  const results = readString("/assets/csv/calcium.csv");
+  console.log(results);
+
+  return <div>hi</div>;
+  //   Papa.parse("assets/csv/calcium.csv", {
+  //     complete: function (results) {
+  //       <LineChart
+  //         width={600}
+  //         height={500}
+  //         data={results.data}
+  //         margin={{
+  //           top: 5,
+  //           right: 30,
+  //           left: 20,
+  //           bottom: 5,
+  //         }}
+  //       >
+  //         <CartesianGrid strokeDasharray="3 3" />
+  //         <XAxis dataKey="name" />
+  //         <YAxis />
+  //         <Tooltip />
+  //         <Legend />
+  //         <Line
+  //           type="monotone"
+  //           dataKey="cal"
+  //           stroke="#82ca9d"
+  //           strokeDasharray="3 4 5 2"
+  //         />
+  //       </LineChart>;
+  //     },
+  //   });
+};
+
+export default Linechart;