first chart

package-lock.json

@@ -1491,6 +1491,19 @@
       "resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz",
       "integrity": "sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ=="
     },
+    "@types/d3-path": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-1.0.8.tgz",
+      "integrity": "sha512-AZGHWslq/oApTAHu9+yH/Bnk63y9oFOMROtqPAtxl5uB6qm1x2lueWdVEjsjjV3Qc2+QfuzKIwIR5MvVBakfzA=="
+    },
+    "@types/d3-shape": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-1.3.2.tgz",
+      "integrity": "sha512-LtD8EaNYCaBRzHzaAiIPrfcL3DdIysc81dkGlQvv7WQP3+YXV7b0JJTtR1U3bzeRieS603KF4wUo+ZkJVenh8w==",
+      "requires": {
+        "@types/d3-path": "*"
+      }
+    },
     "@types/eslint-visitor-keys": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz",
@@ -1588,6 +1601,21 @@
         "@types/react": "*"
       }
     },
+    "@types/recharts": {
+      "version": "1.8.5",
+      "resolved": "https://registry.npmjs.org/@types/recharts/-/recharts-1.8.5.tgz",
+      "integrity": "sha512-3h/hVNnyOxDyAGhzRpa5y/QBp30vqDw7mUyV0JNoxWnjKM1h8SdgoYru3robamxsXkVa18rz/SVJ+MWDQw8GLg==",
+      "requires": {
+        "@types/d3-shape": "*",
+        "@types/react": "*",
+        "@types/recharts-scale": "*"
+      }
+    },
+    "@types/recharts-scale": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@types/recharts-scale/-/recharts-scale-1.0.0.tgz",
+      "integrity": "sha512-HR/PrCcxYb2YHviTqH7CMdL1TUhUZLTUKzfrkMhxm1HTa5mg/QtP8XMiuSPz6dZ6wecazAOu8aYZ5DqkNlgHHQ=="
+    },
     "@types/stack-utils": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz",

package.json

@@ -11,6 +11,7 @@
     "@types/node": "^12.12.26",
     "@types/react": "^16.9.19",
     "@types/react-dom": "^16.9.5",
+    "@types/recharts": "^1.8.5",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-scripts": "3.3.1",

src/App.tsx

-import React from 'react';
-import logo from './logo.svg';
+import React, { useState } from 'react';
 import './App.css';
+import { FileInput, ForceDistanceDiagram } from './components';
+import {sheet} from "./dataInterface"
 
 const App = () => {
+  const [sheets, setSheets] = useState<sheet[]>([]);
+
+  const addSheet = (sheet:sheet):void => {
+    setSheets(s => [...s,sheet]);
+  }
+
+
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <FileInput  addSheet ={addSheet}/> 
+      <ForceDistanceDiagram sheets={sheets}/>
     </div>
   );
 }

src/components/Diagram/ForceDistanceDiagram.tsx

+import React from "react"
+import {sheet} from "../../dataInterface"
+
+
+import {
+    LineChart, Line, XAxis, YAxis, CartesianGrid
+  } from 'recharts';
+
+export const ForceDistanceDiagram: React.FC<{
+    sheets:sheet[];
+}> = props => {
+
+    const  {sheets} = props;
+    if(sheets.length === 0){
+        return <></>
+    }
+    const diagram= sheets[0].diagram;
+
+    console.log("data", sheets)
+    return <LineChart width={800} height={500} data={diagram}>
+           <XAxis dataKey="Weg"  scale="linear" />
+            <YAxis/>
+            <CartesianGrid stroke="#eee" strokeDasharray="5 5"/>
+            <Line type="monotone" dataKey="Kraft" stroke="#8884d8" dot={false} />
+        </LineChart>
+
+}
\ No newline at end of file

src/components/FileInput/FileInput.tsx

+import React, { ChangeEvent } from "react"
+import Button from "@material-ui/core/Button"
+import { sheet } from "../../dataInterface"
+import {parseFile} from "../../xlsXHandler"
+
+
+export const FileInput: React.FC<{
+  addSheet:  (sheet:sheet) => void;
+}> = props => {
+
+  const {addSheet}  = props;
+
+  const fileParsed=(sheet:sheet):void=>{
+    addSheet(sheet)
+  }
+
+
+  const onChangeHandler = (event: ChangeEvent<HTMLInputElement>) => {
+    const files = event.target.files;
+    if (files != null) {
+      Array.from(files).forEach(file => {
+        parseFile(file, fileParsed);
+       
+      });
+    }
+  }
+
+  return <>
+    <input
+      accept=".xlsx"
+      id="raised-button-file"
+      multiple
+      type="file"
+      onChange={onChangeHandler}
+    />
+    <label htmlFor="raised-button-file">
+      <Button component="span">
+        Upload
+    </Button>
+    </label>
+  </>
+}
\ No newline at end of file

src/components/index.ts

+export * from "./FileInput/FileInput";
+export * from "./Diagram/ForceDistanceDiagram"
\ No newline at end of file

src/dataInterface.ts

+
+export interface sheet{
+    name: string;
+    setup: setup;
+    diagram: diagramEntry[];
+}
+
+export interface setup{
+    Material:string;
+    "Zusatz 1": string;
+    "Zusatz 2": string;
+    a:string;
+    //...
+}
+
+export interface diagramEntry{
+    Zeit:number;
+    Weg:number;
+    Kraft:number;
+    Länge:number;
+    Dehnung:number;
+    Spannung:number;
+}
\ No newline at end of file

src/xlsXHandler.ts

+import XLSX from 'xlsx';
+import {sheet,setup,diagramEntry} from "./dataInterface"
+
+
+export const parseFile = (file: File, fileParsed: (sheet:sheet) => void) => {
+    const reader = new FileReader();
+    const rABS = !!reader.readAsBinaryString;
+
+    reader.onload = (e) => {
+        if(e.target) {
+            const bstr = e.target.result;
+            const wb = XLSX.read(bstr, {type:rABS ? 'binary' : 'array'});
+            console.log(wb)
+            const wsetup = wb.Sheets["Setup"];
+            const parsed = XLSX.utils.sheet_to_json(wsetup, {header:"A"}) as { A:string; B?:string}[];
+            const setup = {}
+            parsed.forEach(s => {
+                if(s.B){
+                    //@ts-ignore
+                    setup[s.A] = s.B;
+                }
+            });
+
+            console.log(setup)
+            const wdata = wb.Sheets["Diagram"];
+            let diagram = XLSX.utils.sheet_to_json(wdata);
+            diagram.splice(0,1);
+            console.log(diagram)
+
+            fileParsed({name:file.name, setup: setup as setup, diagram:diagram as diagramEntry[]})
+        }
+    };
+    if(rABS) reader.readAsBinaryString(file); else reader.readAsArrayBuffer(file);
+}
+