[Misson Control] MCT Dashboard POC

package.json

@@ -19,9 +19,11 @@
     "react-dom": "^18.0.0",
     "react-map-gl": "^7.0.10",
     "react-scripts": "^5.0.1",
+    "react-vis": "^1.11.7",
     "web-vitals": "^1.1.2"
   },
   "devDependencies": {
+    "d3-shape": "^3.1.0",
     "eslint": "^7.32.0",
     "eslint-config-google": "^0.14.0",
     "eslint-plugin-react": "^7.28.0",

src/component/page/dashboard.js

@@ -0,0 +1,90 @@
+import React, { useEffect, useState } from "react";
+import {
+  XYPlot,
+  XAxis,
+  YAxis,
+  ChartLabel,
+  HorizontalGridLines,
+  VerticalGridLines,
+  LineSeries,
+} from "react-vis";
+import {curveCatmullRom} from "d3-shape";
+import { getVoltage } from "../../service/cubesatAPIService";
+import _ from "lodash";
+
+const Dashboard = () => {
+  const [voltage, setVoltage] = useState([]);
+  const [voltageSize, setVoltageSize] = useState(0);
+  const [graphData, setGraphData] = useState([]);
+
+  useEffect(() => {
+    const fetchVoltage = async () => {
+      const voltageStat = _.get(await getVoltage(), "voltage", undefined);
+      if (voltageStat === undefined) {
+        return;
+      }
+
+      setVoltage(voltageStat);
+      setVoltageSize(voltageSize + 1);
+      setGraphData([...graphData, {x: voltageSize + 1, y: voltageStat}]);
+    };
+    const refresh = setInterval(() => fetchVoltage(), 1000);
+
+    return () => {
+      clearInterval(refresh);
+    };
+  }, [voltage, voltageSize, graphData]);
+
+  return (
+    <React.Fragment>
+      <XYPlot width={800} height={600} style={{ fill: "none" }}>
+        <HorizontalGridLines style={{stroke: "#B7E9ED", strokeWidth: 0.5}} />
+        <VerticalGridLines style={{stroke: "#B7E9ED", strokeWidth: 0.5}} />
+        <XAxis
+          title="X Axis"
+          style={{
+            line: {stroke: "#ADDDE1"},
+            ticks: {stroke: "#ADDDE1"},
+            text: {stroke: "none", fill: "#6b6b76", fontWeight: 600}
+          }}
+        />
+        <YAxis
+          title="Y Axis"
+          style={{
+            line: {stroke: "#ADDDE1"},
+            ticks: {stroke: "#ADDDE1"},
+            text: {stroke: "none", fill: "#6b6b76", fontWeight: 600}
+          }}
+        />
+        <ChartLabel
+          text="Time"
+          className="alt-x-label"
+          includeMargin={false}
+          xPercent={0.025}
+          yPercent={1.01}
+        />
+
+        <ChartLabel
+          text="Voltage"
+          className="alt-y-label"
+          includeMargin={false}
+          xPercent={0.06}
+          yPercent={0.06}
+          style={{
+            transform: "rotate(-90)",
+            textAnchor: "end"
+          }}
+        />
+        <LineSeries
+          className="voltage"
+          data={graphData}
+          curve={curveCatmullRom.alpha(0.2)}
+          color="black"
+          strokeWidth={4}
+        />
+      </XYPlot>
+    </React.Fragment>
+  );
+};
+
+export default Dashboard;

src/component/tab/navigationTab.js

@@ -3,6 +3,7 @@ import Time from "../util/clock";
 import EmailSignup from "../page/emailSignup";
 import Tracker from "../page/tracker";
 import Logo from "../util/logo";
+import Dashboard from "../page/dashboard";
 import PropTypes from "prop-types";
 import Tabs from "@mui/material/Tabs";
 import Tab from "@mui/material/Tab";
@@ -15,6 +16,7 @@ import { Toolbar } from "@mui/material";
 import SatelliteAltIcon from "@mui/icons-material/SatelliteAlt";
 import EmailIcon from "@mui/icons-material/Email";
 import LocationOnIcon from "@mui/icons-material/LocationOn";
+import DashboardIcon from "@mui/icons-material/Dashboard";
 
 export const PageContext = React.createContext({
   tabIndex: 0,
@@ -62,7 +64,7 @@ const NavigationTab = () => {
           </Box>
           <Box>
             <Tabs
-              value={currentTabIndex}s
+              value={currentTabIndex}
               onChange={(event, newIndex) => {
                 setCurrentTabIndex(newIndex);
               }}
@@ -84,7 +86,11 @@ const NavigationTab = () => {
               <Tab
                 label={TAB_CONFIG[2].label}
                 icon={<EmailIcon/>}
-                style={{color: "#24363E", backgroundColor: "white"}}/>
+                style={styles.tab}/>
+              <Tab
+                label={TAB_CONFIG[3].label}
+                icon={<DashboardIcon/>}
+                style={styles.tab}/>
             </Tabs>
           </Box>
         </Toolbar>
@@ -104,6 +110,9 @@ const NavigationTab = () => {
         <TabPanel value={currentTabIndex} index={2}>
           <EmailSignup />
         </TabPanel>
+        <TabPanel value={currentTabIndex} index={3}>
+          <Dashboard />
+        </TabPanel>
       </PageContext.Provider>
     </Box>
   );

src/component/util/logo.js

@@ -1,8 +1,12 @@
 import React from "react";
 import logoImgFile from "../../resource/cubesat.png";
 
-const Logo = () => (
-  <img src={logoImgFile} alt="Logo" height={"130px"} width={"130px"} />
-);
+const Logo = () => {
+  return (
+    <React.Fragment>
+      <img src={logoImgFile} alt="Logo" height={"130px"} width={"130px"} />
+    </React.Fragment>
+  );
+};
 
 export default Logo;

src/service/cubesatAPIService.js

@@ -58,3 +58,20 @@ export const getPath = async () => {
     return [];
   }
 };
+
+export const getVoltage = async () => {
+  try {
+    const fetchResponse = await fetch(`${SERVER_URL}/dashboard/voltage`, {
+      method: "GET",
+      mode: "cors",
+      headers: {
+        "Content-Type": "application/json",
+        "accept": "application/json",
+      },
+    });
+    return await fetchResponse.json();
+  } catch (error) {
+    console.log(error);
+    return [];
+  }
+};

src/util/config.js

@@ -14,4 +14,9 @@ export const TAB_CONFIG = [
     label: "Email Signup",
     index: 3,
   },
+  {
+    name: "dashboard",
+    label: "Mission Control",
+    index: 4,
+  },
 ];