added more of the status for the gate to the gates dashboard, also changed the sensor graphs to have them in a specific order

src/gate/GateGraphs.tsx

@@ -36,6 +36,9 @@ interface Props {
   device: string | number;
   pressure: string;
   ambient: string;
+  tempChain: string;
+  redKey: string;
+  greenKey: string;
   setPCAState: (state: boolean) => void;
 }
 
@@ -60,7 +63,7 @@ const useStyles = makeStyles((theme: Theme) => ({
 );
 
 export default function GateGraphs(props: Props) {
-  const { gate, display, compMap, device, pressure, ambient, setPCAState } = props;
+  const { gate, display, compMap, device, pressure, ambient, tempChain, greenKey, redKey, setPCAState } = props;
   const [{ as }] = useGlobalState();
   const [xDomain, setXDomain] = useState<string[] | number[]>(["dataMin", "dataMax"]);
   const [zoomed, setZoomed] = useState(false);
@@ -270,42 +273,68 @@ export default function GateGraphs(props: Props) {
     );
   };
 
-  const sensorGraphs = () => {
+  const graphCard = (component: Component, unitMeasurements: UnitMeasurement[]) => {
     return (
-      <Box>
-        {Array.from(compMeasurements.values()).map((compMeasurement, i) => {
-          let c = Component.create();
-          if (compMeasurement[0]) {
-            c = compMap.get(compMeasurement[0].componentId) ?? Component.create();
-          }
-          if (compMap.get(c.key())) {
-            return (
-              <Card raised key={i} style={{ padding: 10, marginBottom: 15 }}>
-                {graphHeader(c)}
-                {compMeasurement.map(um => {
-                  if (um.values[0] && um.values[0].values.length > 1) {
-                    return areaGraph(
-                      um,
-                      describeMeasurement(um.type, c.type(), c.subType()),
-                      c.settings.smoothingAverages
-                    );
-                  } else {
-                    return lineGraph(
-                      um,
-                      describeMeasurement(um.type, c.type(), c.subType()),
-                      c.settings.smoothingAverages
-                    );
-                  }
-                })}
-              </Card>
+      <Card raised key={component.key()} style={{ padding: 10, marginBottom: 15 }}>
+        {graphHeader(component)}
+        {unitMeasurements.map(um => {
+          if (um.values[0] && um.values[0].values.length > 1) {
+            return areaGraph(
+              um,
+              describeMeasurement(um.type, component.type(), component.subType()),
+              component.settings.smoothingAverages
             );
           } else {
-            return <Box></Box>;
+            return lineGraph(
+              um,
+              describeMeasurement(um.type, component.type(), component.subType()),
+              component.settings.smoothingAverages
+            );
           }
         })}
-      </Box>
+      </Card>
     );
-  };
+  }
+
+  /**
+   * This function creates the charts for the gate page using the MAIN components on the gate, it DOES NOT show any other components that could be on the device
+   * @returns list of cards for the charts
+   */
+  const sensorGraphs = () => {
+    let graphs: JSX.Element[] = []
+
+    //pressure
+    let pressureComp = compMap.get(pressure)
+    let pressureReadings = compMeasurements.get(pressure)
+    if(pressureComp && pressureReadings){
+      graphs.push(graphCard(pressureComp, pressureReadings))
+    }
+    //T/H chain
+    let tempComp = compMap.get(tempChain)
+    let tempReadings = compMeasurements.get(tempChain)
+    if(tempComp && tempReadings){
+      graphs.push(graphCard(tempComp, tempReadings))
+    }
+    //ambient
+    let ambientComp = compMap.get(ambient)
+    let ambientReadings = compMeasurements.get(ambient)
+    if (ambientComp && ambientReadings){
+      graphs.push(graphCard(ambientComp, ambientReadings))
+    }
+    //green
+    let greenComp = compMap.get(greenKey)
+    let greenReadings = compMeasurements.get(greenKey)
+    if (greenComp && greenReadings){
+      graphs.push(graphCard(greenComp, greenReadings))
+    }
+    //red
+    let redComp = compMap.get(redKey)
+    let redReadings = compMeasurements.get(redKey)
+    if (redComp && redReadings){
+      graphs.push(graphCard(redComp, redReadings))
+    }
+    return graphs
+  }
 
   const analyticGraphs = () => {
     return (