From 67cb5f82a995d354b5a67e18ae3486350ec9c269 Mon Sep 17 00:00:00 2001 From: Scarlett Date: Fri, 10 May 2024 12:56:39 -0400 Subject: [PATCH] fixed statistics --- src/assets/stylesheets/statistics.scss | 154 ++++++++++++++++++ src/components/NavBar.js | 7 +- ...stsComponent.js => StatisticsComponent.js} | 38 ++--- src/index.js | 6 +- .../{StatistsRoute.js => StatisticsRoute.js} | 8 +- 5 files changed, 185 insertions(+), 28 deletions(-) create mode 100644 src/assets/stylesheets/statistics.scss rename src/components/{StatistsComponent.js => StatisticsComponent.js} (54%) rename src/routes/{StatistsRoute.js => StatisticsRoute.js} (55%) diff --git a/src/assets/stylesheets/statistics.scss b/src/assets/stylesheets/statistics.scss new file mode 100644 index 0000000..bce2376 --- /dev/null +++ b/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; +// } \ No newline at end of file diff --git a/src/components/NavBar.js b/src/components/NavBar.js index 03ef51c..7bfea32 100644 --- a/src/components/NavBar.js +++ b/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 { πŸ—ΊοΈ Map - - πŸ“Š Statists + + πŸ“Š Statistics βš™οΈ Settings diff --git a/src/components/StatistsComponent.js b/src/components/StatisticsComponent.js similarity index 54% rename from src/components/StatistsComponent.js rename to src/components/StatisticsComponent.js index edfd876..cb9997e 100644 --- a/src/components/StatistsComponent.js +++ b/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 ( -
-
+
+
Belden
-
-

Summary

-
-
-