-
Notifications
You must be signed in to change notification settings - Fork 290
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Create visualizations dashboard (#1032)
- Loading branch information
Showing
12 changed files
with
898 additions
and
5 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| body { | ||
| background-color: #cff4fc; | ||
| margin: 0; | ||
| font-family: Arial, sans-serif; | ||
| } | ||
|
|
||
| .material-icons { | ||
| font-size: 24px; | ||
| vertical-align: middle; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,78 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta name="keywords" content="camicroscope, quip" /> | ||
| <meta charset="utf-8" /> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> | ||
| <title>Responsive Cards with Modal Expansion</title> | ||
| <link rel="stylesheet" href="visualization-dashboard.css"> | ||
| <link rel="stylesheet" href="../components/visualization-dashboard/navbar.css"> | ||
| <link rel="stylesheet" href="../components/visualization-dashboard/cardContainer.css"> | ||
| <link rel="stylesheet" href="../components/visualization-dashboard/modal.css"> | ||
| <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> | ||
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <!-- Loading Chart.js --> | ||
| </head> | ||
| <body> | ||
| <script src="../core/Store.js"></script> | ||
| <script src="../common/util.js"></script> | ||
| <script type="text/javascript" src="../components/visualization-dashboard/navbar.js"></script> | ||
| <script type="text/javascript" src="../components/visualization-dashboard/chartData.js"></script> | ||
| <script type="text/javascript" src="../components/visualization-dashboard/chartSetup.js"></script> | ||
| <script type="text/javascript" src="../components/visualization-dashboard/modal.js"></script> | ||
| <script type="text/javascript" src="../components/visualization-dashboard/visualization-init.js"></script> | ||
| <script> | ||
| var getVisualizationData = {}; | ||
|
|
||
| async function init() { | ||
| try { | ||
| console.log('Before initialization getVisualizationData:', getVisualizationData); | ||
| await initialize(); // Wait for asynchronous process to complete | ||
| console.log('After initialization getVisualizationData:', getVisualizationData); | ||
|
|
||
| // After asynchronous process is complete, dynamically add other scripts | ||
| loadScripts(); | ||
| } catch (error) { | ||
| console.error('Error:', error); | ||
| } | ||
| } | ||
|
|
||
| function loadScripts() { | ||
| const scripts = [ | ||
| '../components/visualization-dashboard/cardContainer.js' | ||
| ]; | ||
|
|
||
| // Manage script loading with Promises | ||
| const loadScriptPromises = scripts.map(src => { | ||
| return new Promise((resolve, reject) => { | ||
| const script = document.createElement('script'); | ||
| script.type = "text/javascript"; | ||
| script.src = src; | ||
| script.onload = () => { | ||
| // console.log(`${src} loaded successfully.`); | ||
| resolve(); | ||
| }; | ||
| script.onerror = () => { | ||
| reject(new Error(`Failed to load script ${src}`)); | ||
| }; | ||
| document.body.appendChild(script); | ||
| }); | ||
| }); | ||
|
|
||
| // Execute after all scripts have been loaded | ||
| Promise.all(loadScriptPromises) | ||
| .then(() => { | ||
| // console.log('All scripts loaded successfully'); | ||
| }) | ||
| .catch(error => { | ||
| console.error('Error loading scripts:', error); | ||
| }); | ||
| } | ||
|
|
||
| // Execute init function after the page has loaded | ||
| document.addEventListener('DOMContentLoaded', init); | ||
| </script> | ||
| <script> | ||
| </script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,185 @@ | ||
| /* Expand button */ | ||
| .expand-btn { | ||
| position: absolute; | ||
| top: 10px; | ||
| right: 10px; | ||
| background-color: #f8f9fa; | ||
| color: #515555; | ||
| border: none; | ||
| padding: 5px 10px; | ||
| cursor: pointer; | ||
| border-radius: 5px; | ||
| font-size: 14px; | ||
| } | ||
|
|
||
| .expand-btn:hover { | ||
| background-color: #a0a0a0; | ||
| } | ||
|
|
||
| /* Background color of the entire screen */ | ||
| body { | ||
| background-color: #ddd; | ||
| margin: 0; | ||
| font-family: Arial, sans-serif; | ||
| } | ||
|
|
||
| /* Container for cards */ | ||
| .card-container { | ||
| padding: 20px; | ||
| box-sizing: border-box; | ||
| margin: 0 auto; | ||
| } | ||
|
|
||
| /* Style for rows */ | ||
| .row { | ||
| display: flex; | ||
| justify-content: space-between; | ||
| } | ||
|
|
||
| /* Common style for each card */ | ||
| .card { | ||
| background-color: #fcfcfc; | ||
| border: 1px solid #ddd; | ||
| border-radius: 2px; | ||
| padding: 20px; | ||
| box-sizing: border-box; | ||
| text-align: left; | ||
| margin: 4px; | ||
| overflow: hidden; | ||
| position: relative; | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: flex-start; | ||
| align-items: flex-start; | ||
| } | ||
|
|
||
| /* Style for cards in the upper row */ | ||
| .card-1 { | ||
| width: 40%; | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: space-between; | ||
| } | ||
|
|
||
| .card-2, .card-3, .card-4 { | ||
| width: 20%; | ||
| } | ||
|
|
||
| .card-2, .card-3 { | ||
| align-items: center; | ||
| justify-content: center; | ||
| } | ||
|
|
||
| /* Style for cards in the lower row */ | ||
| .card-5, .card-6 { | ||
| width: 50%; | ||
| height: 80%; | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: flex-start; | ||
| } | ||
|
|
||
| /* Text positioning adjustments */ | ||
| .card-1 { | ||
| margin-bottom: 5px; | ||
| } | ||
| .card h3 { | ||
| margin-bottom: 18px; | ||
| text-align: left; | ||
| } | ||
|
|
||
| .card h4 { | ||
| margin: 0; | ||
| text-align: left; | ||
| } | ||
|
|
||
| /* Text overflow handling */ | ||
| .card h4, .card h1, .card h2, .card h3 { | ||
| display: block; | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| white-space: nowrap; | ||
| } | ||
|
|
||
| .card:hover h4, .card:hover h1, .card:hover h2 { | ||
| white-space: normal; | ||
| } | ||
|
|
||
| /* Number display style */ | ||
| .number { | ||
| font-size: 80px; | ||
| font-weight: bold; | ||
| text-align: center; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| width: 100%; | ||
| height: 100%; | ||
| } | ||
|
|
||
| /* Expand button */ | ||
| .expand-btn { | ||
| position: absolute; | ||
| top: 10px; | ||
| right: 10px; | ||
| background-color: #f8f9fa; | ||
| color: #515555; | ||
| border: none; | ||
| padding: 5px 10px; | ||
| cursor: pointer; | ||
| border-radius: 5px; | ||
| font-size: 14px; | ||
| } | ||
|
|
||
| .expand-btn:hover { | ||
| background-color: #a0a0a0; | ||
| } | ||
|
|
||
| .card-expand-icon { | ||
| color: #515555; | ||
| } | ||
|
|
||
| /* Centered content with red background in card */ | ||
| .card-content { | ||
| width: 100%; | ||
| display: flex; | ||
| justify-content: center; | ||
| margin-top: 10px; | ||
| } | ||
|
|
||
| .centered-content-small { | ||
| background-color: #fcfcfc; | ||
| color: #fcfcfc; | ||
| padding: 10px; | ||
| border-radius: 4px; | ||
| width: 80%; | ||
| text-align: center; | ||
| margin: 10px 0; | ||
| } | ||
|
|
||
| .centered-content { | ||
| background-color: #fcfcfc; | ||
| color: #fcfcfc; | ||
| padding: 10px; | ||
| border-radius: 4px; | ||
| width: 80%; | ||
| height: 35vh; | ||
| text-align: center; | ||
| margin: 10px auto; | ||
| align-self: center; | ||
| } | ||
|
|
||
| /* Media query for displaying in a single column on smartphones and iPads */ | ||
| @media (max-width: 768px) { | ||
| .row { | ||
| flex-direction: column; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .card { | ||
| margin: 10px 0; | ||
| width: 90%; | ||
| max-width: 400px; | ||
| min-width: 300px; | ||
| } | ||
| } |
Oops, something went wrong.