added graphs

Author: MaximilianPfitzenmaier

src/assets/data/data.jsx

@@ -0,0 +1,18 @@
+/* eslint-disable max-len */
+export const dropdownArrays = [
+  {value: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], label: 'Zero'},
+  {value: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], label: 'Ones'},
+  {value: [1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0], label: 'Kamm'},
+  {
+    value: [
+      0, 0.3826834323650898, 0.7071067811865475, 0.9238795325112867, 1, 0.9238795325112867, 0.7071067811865476, 0.3826834323650899, 0, -0.3826834323650898,
+      -0.7071067811865475, -0.9238795325112867, -1, -0.9238795325112867, -0.7071067811865476, -0.3826834323650899,
+    ],
+    label: 'Sinus',
+  },
+];
+
+export const initialArrays = {
+  baseArray: [...dropdownArrays.find(({label}) => label === 'Sinus').value],
+  zeros: [...dropdownArrays.find(({label}) => label === 'Zero').value],
+};

src/components/canvas.jsx

@@ -0,0 +1,32 @@
+import {useEffect} from 'react';
+import {drawFunction} from '../utils/graph';
+import PropTypes from 'prop-types';
+
+
+const Canvas = ( {id, canvasRef, array} ) => {
+  useEffect(() => {
+    drawFunction(canvasRef, array);
+  }, [canvasRef, array]);
+
+  return (
+    <>
+      {/* <Dropdown id={ref} array={array} /> */}
+      <canvas
+        onContextMenu={(e) => (e.button === 2 ? e.preventDefault() : null)}
+        id={id}
+        ref={canvasRef}
+        width={800}
+        height={400}
+      />
+    </>
+
+  );
+};
+
+export default Canvas;
+
+Canvas.propTypes = {
+  id: PropTypes.number,
+  canvasRef: PropTypes.string,
+  array: PropTypes.array,
+};

src/components/dropdown.jsx

@@ -0,0 +1,93 @@
+import {useEffect, useState, useRef} from 'react';
+import PropTypes from 'prop-types';
+
+const Icon = () => {
+  return (
+    <svg height="20" width="20" viewBox="0 0 20 20">
+      {/* eslint-disable-next-line max-len */}
+      <path d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"></path>
+    </svg>
+  );
+};
+
+const Dropdown = ( {placeHolder, options, onChange} ) => {
+  const [showMenu, setShowMenu] = useState(false);
+  const [selectedValue, setSelectedValue] = useState(null);
+
+  const inputRef = useRef();
+
+  useEffect( () => {
+    const handler = (e) => {
+      if (inputRef.current && !inputRef.current.contains(e.target)) {
+        setShowMenu(false);
+      }
+    };
+
+    window.addEventListener('click', handler);
+    return () => {
+      window.removeEventListener('click', handler);
+    };
+  });
+
+  const handleInputClick = (e) => {
+    setShowMenu(!showMenu);
+  };
+
+  const getDisplay = () => {
+    if (selectedValue) {
+      return selectedValue.label;
+    }
+    return placeHolder;
+  };
+
+  const onItemClick = (option) => {
+    setSelectedValue(option);
+    const array = option.value;
+    onChange(array);
+  };
+
+  const isSelected = (option) => {
+    if (!selectedValue) {
+      return false;
+    }
+
+    return selectedValue.value === option.value;
+  };
+
+  return (
+    <>
+      <div className="dropdown--container">
+        <div ref={inputRef} onClick={handleInputClick} className="dropdown--input">
+          <div className="dropdown--selected-value">{getDisplay()}</div>
+          <div className="dropdown--tools">
+            <div className="dropdown--tool">
+              <Icon />
+            </div>
+          </div>
+        </div>
+        { showMenu && (
+          <div className="dropdown--menu">
+            {
+              options.map((option) => (
+                <div
+                  onClick={() => onItemClick(option) }
+                  key={option.value}
+                  className={`dropdown--item ${isSelected(option) && 'selected'}`}
+                >
+                  {option.label}
+                </div>
+              ))}
+          </div>
+        )}
+      </div>
+    </>
+  );
+};
+
+export default Dropdown;
+
+Dropdown.propTypes = {
+  onChange: PropTypes.func,
+  options: PropTypes.object,
+  placeHolder: PropTypes.string,
+};

src/pages/Home.jsx

@@ -1,5 +1,5 @@
 // import images
-import Logo from '../assets/images/logo.jpg';
+
 
 // import styles
 import '../assets/scss/home.scss';
@@ -8,15 +8,12 @@ import '../assets/scss/home.scss';
  * Home Component
  * @return {Home} The sum of the two numbers.
  */
-
-
 const Home = () => {
   return (
     <>
       <div className="container">
         <h1>Welcome To My App</h1>
         <p>This is going to be the coolest app in the world!</p>
-        <img src={Logo} alt="Sammy Image" width={200} height={200} />
       </div>
     </>
   );

src/pages/Sampling.jsx

@@ -1,13 +1,100 @@
+// import react
+import {useState, useRef, useId} from 'react';
+
+// import Components
+import Dropdown from '../components/dropdown';
+import Canvas from '../components/canvas';
+
+// import data
+import {initialArrays, dropdownArrays} from '../assets/data/data';
+
+// import functions
+import * as Calculate from '../utils/calculations';
+
+// import styling
 import '../assets/scss/sampling.scss';
 
+
 const Sampling = () => {
+  // set IDs
+  const canvas1ID = useId();
+  const canvas2ID = useId();
+  const canvas3ID = useId();
+  const canvas4ID = useId();
+
+  // set Refs
+  const canvas1Ref = useRef();
+  const canvas2Ref = useRef();
+  const canvas3Ref = useRef();
+  const canvas4Ref = useRef();
+
+  // set array states
+  const [array1, setArray1] = useState([...initialArrays.baseArray]);
+  const [array2, setArray2] = useState([...initialArrays.zeros]);
+  const [array3, setArray3] = useState([...initialArrays.zeros]);
+  const [array4, setArray4] = useState([...initialArrays.zeros]);
+
+
+  const handleButtonClick = () => {
+    setArray2([...Calculate.calculateSampling(array2)]);
+  };
+
+
+  const dropDownHandler1 = (selectedArray) => {
+    // deep clone
+    const array = [...selectedArray];
+
+    // set vaalue of selected dropdown item to this canvas
+    setArray1([...array]);
+
+    // calculate FourierTransformation
+    const fourierTransform = Calculate.calculateFourierTransformation(array);
+    setArray2([...fourierTransform]);
+  };
+
+  const dropDownHandler2 = (selectedArray) => {
+    // set vaalue of selected dropdown item to this canvas
+    const array = [...selectedArray]; // deep clone
+    setArray3([...array]);
+
+    // calculate FourierTransformation
+    const fourierTransform = Calculate.calculateSampling(array);
+    setArray4([...fourierTransform]);
+  };
+
   return (
     <>
-      <head>
-        <title>TEST</title>
-        <meta name="description" content="BLABLA" />
-      </head>
-      <h1>My App</h1>
+      <div>
+        Array1
+        <Dropdown
+          placeHolder="Select..."
+          options={dropdownArrays}
+          onChange={(selectedArray) => dropDownHandler1(selectedArray)}
+        />
+        <Canvas id={canvas1ID} canvasRef={canvas1Ref} array={array1} />
+      </div>
+
+      <div>
+      Array2
+        <Canvas id={canvas2ID} canvasRef={canvas2Ref} array={array2} />
+      </div>
+
+      <div>
+      Array3
+        <Dropdown
+          placeHolder="Select..."
+          options={dropdownArrays}
+          onChange={(selectedArray) => dropDownHandler2(selectedArray)}
+        />
+        <Canvas id={canvas3ID} canvasRef={canvas3Ref} array={array3} />
+      </div>
+
+      <div>
+      Array4
+        <Canvas id={canvas4ID} canvasRef={canvas4Ref} array={array4} />
+      </div>
+
+      <button onClick={handleButtonClick}>CLICK</button>
     </>
   );
 };

src/utils/graph.js

@@ -1,9 +1,9 @@
 // just drawing no return
 // neu schreiben
 export const drawFunction = (canvasID, array) => {
-  let centeredZero = true;
-  let line = true;
-  let canvasArray = array;
+  const centeredZero = true;
+  const line = true;
+  const canvasArray = array;
   let canvas;
   let ctx;
   if (canvasID.current) {
@@ -63,7 +63,7 @@ export const drawFunction = (canvasID, array) => {
 
     ctx.beginPath();
     ctx.lineWidth = 2;
-    let grad = ctx.createLinearGradient(i, 0, i, yposition);
+    const grad = ctx.createLinearGradient(i, 0, i, yposition);
     grad.addColorStop(0, 'hsl(176, 72%, 71%)');
     grad.addColorStop(1, 'hsl(251, 53%, 45%)');
     ctx.strokeStyle = grad;
@@ -91,7 +91,7 @@ export const drawFunction = (canvasID, array) => {
       // draw circles
       ctx.beginPath();
       ctx.arc(i, yposition, 3, 0, 2 * Math.PI);
-      let centered = centeredZero ? canvasArray.length / 2 : 1;
+      const centered = centeredZero ? canvasArray.length / 2 : 1;
       // Buffer circles transparent
       if (count == 0 || count == canvasArray.length || count == canvasArray.length - 1) {
         ctx.beginPath();
@@ -138,11 +138,11 @@ export const drawTest = (canvasID, funcArray) => {
   canvas.height = canvasHeight;
 
   // Skalierungsfaktoren berechnen
-  const xMin = -canvasWidth / 2;
-  const xMax = canvasWidth / 2;
-  const xRange = xMax - xMin;
+  // const xMin = -canvasWidth / 2;
+  // const xMax = canvasWidth / 2;
+  // const xRange = xMax - xMin;
   const yRange = Math.max(...funcArray) - Math.min(...funcArray);
-  const xScale = canvasWidth / xRange;
+  // const xScale = canvasWidth / xRange;
   const yScale = canvasHeight / yRange;
 
   // Zeichnen der Achsen
@@ -158,7 +158,7 @@ export const drawTest = (canvasID, funcArray) => {
   ctx.beginPath();
   ctx.moveTo(0, canvasHeight / 2 - (funcArray[0] - Math.min(...funcArray)) * yScale);
   for (let i = 1; i < canvasWidth; i++) {
-    const x = xMin + i / xScale;
+    // const x = xMin + i / xScale;
     const y = funcArray[i] - Math.min(...funcArray);
     ctx.lineTo(i, canvasHeight / 2 - y * yScale);
   }