-
Notifications
You must be signed in to change notification settings - Fork 19
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #186 from wrench-project/dashboard_chartjs
Migrating some dashboard plots to Chart.js and improving design with SemanticUI
- Loading branch information
Showing
20 changed files
with
1,227 additions
and
329 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
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 |
|---|---|---|
| @@ -1,47 +1,52 @@ | ||
| const graphInfoArray = [ | ||
| { | ||
| "title": "Summary of Simulation Metrics", | ||
| "title": "Simulation Metrics", | ||
| "containerId": "overall-metrics-table-container", | ||
| "arrowId": "overall-metrics-arrow", | ||
| "html": workflowSummaryHtml | ||
| "html": workflowSummaryHtml, | ||
| "icon": "chart pie" | ||
| }, | ||
| { | ||
| "title": "Simulation Graph", | ||
| "title": "Gantt Chart", | ||
| "containerId": "overall-graph-container", | ||
| "arrowId": "simulation-graph-arrow", | ||
| "html": simulationGraphHtml | ||
| "html": simulationGraphHtml, | ||
| "icon": "sitemap" | ||
| }, | ||
| { | ||
| "title": "Simulation Details", | ||
| "containerId": "task-details-table-container", | ||
| "arrowId": "simulation-details-arrow", | ||
| "html": simulationDetailsHtml | ||
| "html": simulationDetailsHtml, | ||
| "icon": "table" | ||
| }, | ||
| { | ||
| "title": "Energy Graphs", | ||
| "title": "Host Utilization", | ||
| "containerId": "host-utilization-graph-container", | ||
| "html": hostUtilizationHtml, | ||
| "icon": "chart bar" | ||
| }, | ||
| { | ||
| "title": "Energy Consumption", | ||
| "containerId": "energy-graph", | ||
| "arrowId": "energy-graph-arrow", | ||
| "html": energyGraphsHtml | ||
| }, | ||
| "html": energyGraphsHtml, | ||
| "icon": "lightbulb" | ||
| }, | ||
| { | ||
| "title": "3D Visualization", | ||
| "containerId": "three-d-graph-container", | ||
| "arrowId": "three-d-graph-arrow", | ||
| "html": threedVisualizationHtml | ||
| }, | ||
| { | ||
| "title": "Host Utilization Graph", | ||
| "containerId": "host-utilization-graph-container", | ||
| "arrowId": "host-utilization-arrow", | ||
| "html": hostUtilizationHtml | ||
| "html": threedVisualizationHtml, | ||
| "icon": "cubes" | ||
| } | ||
| ] | ||
|
|
||
| function render() { | ||
| const template = document.getElementById('graph-template').innerHTML | ||
| const renderGraphs = Handlebars.compile(template) | ||
| document.getElementById('main-body').innerHTML = renderGraphs({ graphInfo: graphInfoArray }) | ||
|
|
||
| const template = document.getElementById('graph-template').innerHTML; | ||
| const templateMenu = document.getElementById('graph-template-menu').innerHTML; | ||
| const renderGraphs = Handlebars.compile(template); | ||
| const renderGraphsMenu = Handlebars.compile(templateMenu); | ||
| document.getElementById('main-body').innerHTML = renderGraphs({graphInfo: graphInfoArray}); | ||
| document.getElementById('main-sidebar').innerHTML = renderGraphsMenu({graphInfo: graphInfoArray}); | ||
| } | ||
|
|
||
| render() | ||
| render(); | ||
|
|
||
| $('.ui.dropdown') | ||
| .dropdown(); |
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 |
|---|---|---|
| @@ -1,25 +1,16 @@ | ||
| const simulationGraphTooltipHtml = ` | ||
| <div class="text-left" id="tooltip-container"> | ||
| <span id="tooltip-task-id"></span><br/> | ||
| <span id="tooltip-host"></span><br/> | ||
| <span id="tooltip-task-operation"></span><br/> | ||
| <span id="tooltip-task-operation-duration"></span> | ||
| </div> | ||
| ` | ||
|
|
||
| const simulationGraphHtml = ` | ||
| <div id='button-and-information-container'> | ||
| <button id='toggle-view-button' onclick="toggleView()">Switch to Host View</button> | ||
| <img id='information-img' class='information-img' src='public/img/information.png' onclick='showInstructions("host-instructions", "information-img")'/> | ||
| <button id='show-io-view-button' onclick="showIoView()" style="display: block">Show I/O Partitions</button> | ||
| <button id='hide-io-view-button' onclick="hideIoView()" style="display: none">Hide I/O Partitions</button> | ||
| </div> | ||
| <div id='host-instructions' class='instructions-container'> | ||
| <div id='host-instructions-close-button-container' class='instructions-close-button-container'> | ||
| <img id='host-instructions-close-button' class='instructions-close-button' src='public/img/close-button.png' onclick='hideInstructions("host-instructions", "information-img")'/> | ||
| <div class="ui grey tertiary menu small" style="margin-top: -0.5em"> | ||
| <div class="header item"> | ||
| Chart Options | ||
| </div> | ||
| <p id='host-instructions-text'>Hover over or click on a host on the legend to isolate that host on the graph. Click on a selected host to deselect it. or just select a different host on the legend</p> | ||
| <a class="item" onclick="toggleView(this)"> | ||
| <i class="exchange icon"></i> | ||
| Switch to Host View | ||
| </a> | ||
| <a class="disabled item"> | ||
| <i class="columns icon"></i> | ||
| Show I/O Partitions | ||
| </a> | ||
| </div> | ||
| <div class="container legend" id="workflow-execution-chart-legend"></div> | ||
| <div id="graph-container"></div> | ||
| ` | ||
| <canvas id="graph-container"></canvas> | ||
| ` |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
Oops, something went wrong.