Grid and Full Dashboard is working

src/assets/stylesheets/summary.scss

@@ -44,13 +44,17 @@ $hover-blue: #25b3ff;
   // flex-wrap: wrap;
 
   // below is taken from browse.scss
-  width: 100%;
+  width: 90%;
   min-height: calc(100% - 200px);
   height: auto;
-  display: flex;
+  // display: flex;
-  align-items: center;
+  // align-self: center;
-  justify-content: flex-start;
+  // align-items: center;
-  flex-direction: column;
+  // justify-content: center;
+  // align-items: center;
+  // justify-content: flex-start;
+  // justify-self: center;
+  // flex-direction: column;
   overflow: hidden;
   background-color: transparent;
   margin-bottom: 50px;
@@ -59,6 +63,8 @@ $hover-blue: #25b3ff;
 
 .summary-grid {
   width: 100%;
+  height: 100%; /* Adjust the height of iframes */
+
   display: grid;
   grid-template-columns: repeat(2, 1fr); /* 2 columns */
   grid-gap: 10px; /* Adjust the gap between iframes */
@@ -100,6 +106,25 @@ $hover-blue: #25b3ff;
   width: 25%;
 }
 
+
+.summary-dashboard {
+  width: 100%;
+  height: 900px;
+  border-radius: 20px;
+  text-align: center;
+  padding: 10px;
+}
+
+.summary-title {
+  width: 100%;
+  height: 100%;
+
+  font-size: 1.5em;
+  font-weight: bold;
+  color: $dark-blue;
+  margin: 10px;
+}
+
 // .summary-fieldContainer-dashboard {
 //   width: 100%;
 //   height: 300px;

src/components/SummaryComponent.js

@@ -8,22 +8,19 @@ export default class SummaryComponent extends Component {
       <div className="summary">
         <img className="summary-image" src={BeldenLogo} alt="Belden" />
         <div className="summary-fieldContainer">
+          <h1 className="summary-title">Grid of Individual Graphs</h1>
+
           <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"
+              src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=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"
+              src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=8"
-              // width="400"
+              frameborder="0"></iframe>
-              // 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"
@@ -31,12 +28,26 @@ export default class SummaryComponent extends Component {
             ></iframe>
             <iframe
               className="summary-iframe"
-              src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=7"
+              src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=6"
+              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=5"
               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>
+
+
+          <h1 className="summary-title">Embed Dashboard in Kiosk Mode</h1>
+          <iframe
+            className="summary-dashboard"
+            src="http://192.168.1.12:3000/d/cdiqwmlr8c9ogf/sensors?orgId=1&theme=light&refresh=1s&kiosk"
+            frameborder="0"
+          ></iframe>
+
         </div>
       </div>
     );