Jukebox/jukebox-web
10
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

fixed statistics

Browse Source
This commit is contained in:
scarlett kadan 2024-05-10 12:56:39 -04:00
parent 0d650bbcc0
commit 67cb5f82a9
5 changed files with 185 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

154
src/assets/stylesheets/statistics.scss Normal file
View File

@ -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;
// }

7
src/components/NavBar.js
View File

@ -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">
<span id="map-s">📊 Statists</span>
<NavLink className="navbar-list-item" id="statistics" to="/statistics">
<span id="statistics-s">📊 Statistics</span>
</NavLink>
<NavLink className="navbar-list-item" id="settings" to="/settings">
<span id="settings-s">⚙️ Settings</span>

38
src/components/StatistsComponent.js → src/components/StatisticsComponent.js
View File

@ -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="summary-image">
<div className="statistics">
<div className="statistics-image">
<img src={BeldenLogo} alt="Belden" />
</div>
<div className="summary-fieldContainer">
<h1 className="summary-title">Summary</h1>
<div className="summary-grid">
<div className="summary-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" />
<div className="statistics-fieldContainer">
<h1 className="statistics-title">Statistics</h1>
<div className="statistics-grid">
<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="statistics-iframe" />
</div>
<div className="summary-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" />
<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="statistics-iframe" />
</div>
<div className="summary-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" />
<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="statistics-iframe" />
</div>
<div className="summary-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" />
<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="statistics-iframe" />
</div>
<div className="summary-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" />
<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="statistics-iframe" />
</div>
<div className="summary-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" />
<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="statistics-iframe" />
</div>
</div>
</div>

6
src/index.js
View File

@ -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",
element: <StatistsRoute socket={socket}></StatistsRoute>,
path: "/statistics",
element: <StatisticsRoute socket={socket}></StatisticsRoute>,
// errorElement: <ErrorRoute></ErrorRoute>,
},
{

8
src/routes/StatistsRoute.js → src/routes/StatisticsRoute.js
View File

@ -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>
);
}