fixed statistics

src/assets/stylesheets/statistics.scss

@@ -0,0 +1,154 @@
+$dark-blue: #002554;
+$medium-blue: #004990;
+$light-blue: #007cbe;
+$hover-blue: #25b3ff;
+$black: #000;
+$gray: #bdbdbd;
+$white: #fff;
+
+.statistics {
+  background: linear-gradient(
+    180deg,
+    rgb(0 37 84 / 100%) 0%,
+    rgb(0 124 190 / 100%) 50%,
+    rgb(255, 255, 255) 100%
+  );
+  background-color: transparent;
+  overflow-y: visible;
+  width: calc(100% - 300px);
+  height: auto;
+  display: block;
+  justify-content: center;
+  align-items: center;
+}
+
+.statistics-image {
+  width: 100%;
+  height: 200px;
+  background: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.statistics-image img {
+  width: auto;
+  height: 200px;
+  background-color: transparent;
+}
+
+.statistics-fieldContainer {
+  width: 100%;
+  min-height: calc(100% - 200px);
+  height: auto;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  flex-direction: column;
+  overflow: hidden;
+  background-color: transparent;
+  margin-bottom: 50px;
+}
+
+.statistics-title {
+  width: 80%;
+  height: auto;
+  font-size: 32px;
+  font-weight: bold;
+  color: $white;
+  font-family: "Gotham Medium";
+  margin: 10px;
+  background-color: transparent;
+  margin-bottom: 20px;
+}
+
+.statistics-grid {
+  width: 80%;
+  height: auto;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+  background-color: transparent;
+  overflow: visible;
+  // add row gap
+  gap: 20px;
+}
+
+.statistics-grid-container {
+  width: 32%;
+  height: 300px;
+  background: linear-gradient(
+    -30deg,
+    rgb(187, 208, 236) 0%,
+    rgba(255, 255, 255, 1) 100%
+  );
+  margin-top: 5px;
+
+  display: flex; /* Center the content */
+  align-items: center; /* Center vertically */
+  justify-content: center; /* Center horizontally */
+
+  border-radius: 20px;
+  border: 1px solid $gray;
+  transition: all 0.3s ease-in-out;
+  text-decoration: none;
+  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
+  cursor: pointer;
+  overflow: visible;
+}
+
+.statistics-grid-container:hover {
+  transform: translate3d(-5px, -5px, 0);
+}
+
+
+.statistics-iframe {
+  width: 95%; /* Ensure iframes take up full width of their grid cell */
+  height: 95%; /* Adjust the height of iframes */
+  border-radius: 20px;
+
+
+  // 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-dashboard {
+//   width: 100%;
+//   height: 900px;
+//   border-radius: 20px;
+//   text-align: center;
+//   padding: 10px;
+// }
+
+// .summary-fieldContainer-dashboard {
+//   width: 100%;
+//   height: 300px;
+//   border-radius: 20px;
+//   text-align: center;
+//   padding: 10px;
+// }

src/components/NavBar.js

@@ -17,6 +17,9 @@ export default class NavBar extends Component {
     } else if (path.includes("cable")) {
       document.getElementById("browse").style.backgroundColor = "#007CBE";
       document.getElementById("browse-s").style.color = "white";
+    } else if (path.includes("statistics")) {
+      document.getElementById("statistics").style.backgroundColor = "#007CBE";
+      document.getElementById("statistics-s").style.color = "white";
     } else {
       document.getElementById("home").style.backgroundColor = "#007CBE";
       document.getElementById("home-s").style.color = "white";
@@ -50,8 +53,8 @@ export default class NavBar extends Component {
             <NavLink className="navbar-list-item" id="map" to="/map">
               <span id="map-s">🗺️ Map</span>
             </NavLink>
-            <NavLink className="navbar-list-item" id="map" to="/statists">
+            <NavLink className="navbar-list-item" id="statistics" to="/statistics">
-              <span id="map-s">📊 Statists</span>
+              <span id="statistics-s">📊 Statistics</span>
             </NavLink>
             <NavLink className="navbar-list-item" id="settings" to="/settings">
               <span id="settings-s">⚙️ Settings</span>

src/components/StatisticsComponent.js

@@ -1,34 +1,34 @@
 import React, { Component } from "react";
 import BeldenLogo from "../assets/images/belden-white.png";
-import "../assets/stylesheets/summary.scss";
+import "../assets/stylesheets/statistics.scss";
 
-export default class StatistsComponent extends Component {
+export default class StatisticsComponent extends Component {
   render() {
     return (
-      <div className="summary">
+      <div className="statistics">
-        <div className="summary-image">
+        <div className="statistics-image">
           <img src={BeldenLogo} alt="Belden" />
         </div>
-        <div className="summary-fieldContainer">
+        <div className="statistics-fieldContainer">
-          <h1 className="summary-title">Summary</h1>
+          <h1 className="statistics-title">Statistics</h1>
-          <div className="summary-grid">
+          <div className="statistics-grid">
-            <div className="summary-grid-container">
+            <div className="statistics-grid-container">
-              <iframe src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=8" title="Belden" className="summary-iframe" />
+              <iframe src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=8" title="Belden" className="statistics-iframe" />
             </div>
-            <div className="summary-grid-container">
+            <div className="statistics-grid-container">
-              <iframe src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=3" title="Belden" className="summary-iframe" />
+              <iframe src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=3" title="Belden" className="statistics-iframe" />
             </div>
-            <div className="summary-grid-container">
+            <div className="statistics-grid-container">
-              <iframe src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=7" title="Belden" className="summary-iframe" />
+              <iframe src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=7" title="Belden" className="statistics-iframe" />
             </div>
-            <div className="summary-grid-container">
+            <div className="statistics-grid-container">
-              <iframe src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=6" title="Belden" className="summary-iframe" />
+              <iframe src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=6" title="Belden" className="statistics-iframe" />
             </div>
-            <div className="summary-grid-container">
+            <div className="statistics-grid-container">
-              <iframe src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=4" title="Belden" className="summary-iframe" />
+              <iframe src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=4" title="Belden" className="statistics-iframe" />
             </div>
-            <div className="summary-grid-container">
+            <div className="statistics-grid-container">
-              <iframe src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=2" title="Belden" className="summary-iframe" />
+              <iframe src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=2" title="Belden" className="statistics-iframe" />
             </div>
           </div>
         </div>

src/index.js

@@ -5,7 +5,7 @@ import SummaryRoute from "./routes/SummaryRoute";
 import BrowseRoute from "./routes/BrowseRoute";
 import SettingsRoute from "./routes/SettingsRoute";
 import MapRoute from "./routes/MapRoute";
-import StatistsRoute from "./routes/StatistsRoute";
+import StatisticsRoute from "./routes/StatisticsRoute";
 import CableDetailRoute from "./routes/CableDetailRoute";
 
 // Root
@@ -45,8 +45,8 @@ const init = () => {
       // errorElement: <ErrorRoute></ErrorRoute>,
     },
     {
-      path: "/statists",
+      path: "/statistics",
-      element: <StatistsRoute socket={socket}></StatistsRoute>,
+      element: <StatisticsRoute socket={socket}></StatisticsRoute>,
       // errorElement: <ErrorRoute></ErrorRoute>,
     },
     {

src/routes/StatisticsRoute.js

@@ -1,19 +1,19 @@
 import React, { Component } from "react";
 import NavBar from "../components/NavBar";
-import StatistsComponent from "../components/StatistsComponent";
+import StatisticsComponent from "../components/StatisticsComponent";
 import "../assets/stylesheets/app.scss";
 
-export default class StatistsRoute extends Component {
+export default class StatisticsRoute extends Component {
   constructor(props) {
     super(props);
-    document.title = "Summary";
+    document.title = "Statistics";
   }
 
   render() {
     return (
       <div className="container">
         <NavBar />
-        <StatistsComponent socketHandler={this.props.socket} />
+        <StatisticsComponent socketHandler={this.props.socket} />
       </div>
     );
   }