From 3db7609bd541b396b3f4d04533f2ed9e90afe90a Mon Sep 17 00:00:00 2001
From: Lucas <lucasferguson16@gmail.com>
Date: Wed, 8 May 2024 20:21:12 -0500
Subject: [PATCH] Grid of Graphs with a gap I can not remove

---
 src/assets/stylesheets/summary.scss | 63 ++++++++++++++++++++---------
 src/components/SummaryComponent.js  | 56 ++++++++++++-------------
 2 files changed, 72 insertions(+), 47 deletions(-)

diff --git a/src/assets/stylesheets/summary.scss b/src/assets/stylesheets/summary.scss
index 7a7e854..809c08e 100644
--- a/src/assets/stylesheets/summary.scss
+++ b/src/assets/stylesheets/summary.scss
@@ -56,31 +56,54 @@ $hover-blue: #25b3ff;
   margin-bottom: 50px;
 }
 
-.summary-iframe {
-  width: 400px;
-  height: 400px;
-  min-height: 1px;
-  background: transparent;
-  margin: 10px;
-  display: block;
+
+.summary-grid {
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr); /* 2 columns */
+  grid-gap: 10px; /* Adjust the gap between iframes */
+  grid-row-gap: 5px; /* Adjust the gap between rows */
+
+  
+  // Debug Borders
+      border-width: 5px;
+      border-style: solid;
 }
 
-.summary-fieldContainer-pp {
-  width: 25%;
-  height: 300px;
-  border-radius: 20px;
-  text-align: center;
-  padding: 10px;
+.summary-iframe {
+  width: 100%; /* Ensure iframes take up full width of their grid cell */
+  height: 300px; /* Adjust the height of iframes */
+
+  // Debug Borders
+      border-width: 5px;
+      border-style: solid;
 }
 
+// .summary-iframe {
+//   width: 400px;
+//   height: 400px;
+//   min-height: 1px;
+//   background: transparent;
+//   margin: 10px;
+//   display: block;
+// }
+
+// .summary-fieldContainer-pp {
+//   width: 25%;
+//   height: 300px;
+//   border-radius: 20px;
+//   text-align: center;
+//   padding: 10px;
+// }
+
 .summary-fieldContainer-graph {
   width: 25%;
 }
 
-.summary-fieldContainer-dashboard {
-  width: 100%;
-  height: 300px;
-  border-radius: 20px;
-  text-align: center;
-  padding: 10px;
-}
\ No newline at end of file
+// .summary-fieldContainer-dashboard {
+//   width: 100%;
+//   height: 300px;
+//   border-radius: 20px;
+//   text-align: center;
+//   padding: 10px;
+// }
\ No newline at end of file
diff --git a/src/components/SummaryComponent.js b/src/components/SummaryComponent.js
index b83ea00..7320e3e 100644
--- a/src/components/SummaryComponent.js
+++ b/src/components/SummaryComponent.js
@@ -8,33 +8,35 @@ export default class SummaryComponent extends Component {
       <div className="summary">
         <img className="summary-image" src={BeldenLogo} alt="Belden" />
         <div className="summary-fieldContainer">
-          {/* <div className="summary-iframe"> */}
-          <iframe
-            className="summary-iframe"
-            src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=7"
-            // width="400"
-            // height="300"
-            frameborder="0"
-          ></iframe>
-          <iframe
-            className="summary-iframe"
-            src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=7"
-            // width="400"
-            // height="300"
-            frameborder="0"
-          ></iframe>
-          <iframe
-            className="summary-iframe"
-            src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=7"
-            frameborder="0"
-          ></iframe>
-          <iframe
-            className="summary-iframe"
-            src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=7"
-            frameborder="0"
-          ></iframe>
-          {/* </div> */}
-          {/* <iframe src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=7" width="450" height="200" frameborder="0"></iframe> */}
+          <div className="summary-grid">
+            {/* <div className="summary-iframe"> */}
+            <iframe
+              className="summary-iframe"
+              src="=http://192.168.1.12:3000/d/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&viewPanel=9"
+              // width="400"
+              // height="300"
+              frameborder="0"
+            ></iframe>
+            <iframe
+              className="summary-iframe"
+              src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=7"
+              // width="400"
+              // height="300"
+              frameborder="0"
+            ></iframe>
+            <iframe
+              className="summary-iframe"
+              src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=7"
+              frameborder="0"
+            ></iframe>
+            <iframe
+              className="summary-iframe"
+              src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=7"
+              frameborder="0"
+            ></iframe>
+            {/* </div> */}
+            {/* <iframe src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=7" width="450" height="200" frameborder="0"></iframe> */}
+          </div>
         </div>
       </div>
     );