feat(front): Aggiunta interfaccia Pilota

package.json

@@ -11,9 +11,13 @@
     "@types/node": "^12.0.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-d3-speedometer": "^1.1.0",
+    "react-dom": "^18.2.0",
+    "react-gauge-chart": "^0.4.1",
+    "react-google-charts": "^4.0.0",
     "react-scripts": "4.0.3",
+    "react-thermometer-component": "^1.0.1",
     "sass": "^1.43.4",
     "typescript": "^4.1.2",
     "web-vitals": "^1.0.1"
@@ -45,10 +49,8 @@
     "start": "export NODE_OPTIONS='--openssl-legacy-provider' && yarn run frontend:dev && run-script-os",
     "start:windows": ".\\venv-pywebview\\Scripts\\python src\\index.py",
     "start:default": "./venv-pywebview/bin/python src/index.py",
-
     "pylintcheck": "pylama -f pylint ./src/",
-    "pylint":"yapf --recursive -i ./src/"
-
+    "pylint": "yapf --recursive -i ./src/"
   },
   "eslintConfig": {
     "extends": [

src/App.css

@@ -0,0 +1,38 @@
+.App {
+    text-align: center;
+  }
+
+  .App-logo {
+    height: 40vmin;
+    pointer-events: none;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .App-logo {
+      animation: App-logo-spin infinite 20s linear;
+    }
+  }
+
+  .App-header {
+    background-color: #282c34;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    font-size: calc(10px + 2vmin);
+    color: white;
+  }
+
+  .App-link {
+    color: #61dafb;
+  }
+
+  @keyframes App-logo-spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }

src/App.test.tsx → src/App.test.js

@@ -1,9 +1,8 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import App from './App';
 
 test('renders learn react link', () => {
   render(<App />);
   const linkElement = screen.getByText(/learn react/i);
   expect(linkElement).toBeInTheDocument();
-});
+});

src/components/accelDial.js

@@ -0,0 +1,47 @@
+import GaugeChart from "react-gauge-chart";
+
+// Styles for the AccelDial component
+const styles = {
+  dial: {
+    display: "inline-block",
+    width: `300px`,
+    height: `auto`,
+    color: "#000",
+    border: "0.5px solid #fff",
+    padding: "2px"
+  },
+  title: {
+    fontSize: "1em",
+    color: "#000"
+  }
+};
+
+// AccelDial component
+const AccelDial = ({ id, value, title }) => {
+  let percent = value / 100;
+  // value: "-50" -> percent: 0
+  // value: "0" ---> percent: .5
+  // value: "50" ---> percent: 1
+  // -25 ... .5 + (-25/100) = .25
+  // 25 ...  .5 + (25/100) = .75
+  // -110 .. .5 + (-110/100) = -0.6
+
+  return (
+    <div style={styles.dial}>
+      <GaugeChart
+        id={id}
+        nrOfLevels={3}
+        arcsLength={[0.25, 0.5, 0.25]}
+        colors={["#2d74da", "#1f57a4", "#25467a"]}
+        arcPadding={0.02}
+        percent={percent}
+        textColor={"#000000"}
+        needleColor={"#5392ff"}
+        formatTextValue={(value) => value}
+      />
+      <div style={styles.title}>{title}</div>
+    </div>
+  );
+};
+
+export default AccelDial;

src/components/barometer.js

@@ -0,0 +1,44 @@
+import { Chart } from "react-google-charts";
+
+// Styles for the Barometer component
+const styles = {
+  dial: {
+    width: `auto`,
+    height: `auto`,
+    color: "#000",
+    border: "0.5px solid #fff",
+    padding: "2px"
+  },
+  title: {
+    fontSize: "1em",
+    color: "#000"
+  }
+};
+
+// Barometer component
+const Barometer = ({ id, value, title }) => {
+  return (
+    <div style={styles.dial}>
+      <Chart
+        height={120}
+        chartType="Gauge"
+        loader={<div></div>}
+        data={[
+          ["Label", "Value"],
+          [title, Number(value)]
+        ]}
+        options={{
+          redFrom: 90,
+          redTo: 200,
+          yellowFrom: 50,
+          yellowTo: 90,
+          minorTicks: 5,
+          min: -200,
+          max: 200
+        }}
+      />
+    </div>
+  );
+};
+
+export default Barometer;