Skip to content

test(demo-monitoring): simplify design to do a SVG screenshot #464

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
tbouffard wants to merge 6 commits into from
Closed

test(demo-monitoring): simplify design to do a SVG screenshot #464

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
070cfc9
test: simplify design to do a SVG screenshot of the monitoring demo
tbouffard Feb 21, 2023
296469c
WIP make the diagram use the whole space (inspired from the TypeScrip…
tbouffard Feb 21, 2023
20472be
WIP clean
tbouffard Feb 21, 2023
09417f9
final cleaning
tbouffard Feb 21, 2023
a15c00b
Revert extra change in style.css
tbouffard Feb 21, 2023
43c01e8
Revert extra change in index.js
tbouffard Feb 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
66 changes: 23 additions & 43 deletions demo/monitoring-all-process-instances/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
<link rel="stylesheet" href="../../examples/static/css/spectre.min.css" type="text/css">
<link rel="stylesheet" href="../../examples/static/css/icons.min.css" type="text/css">
<link rel="stylesheet" href="../../examples/static/css/main.css" type="text/css">
<link rel="stylesheet" href="../static/css/style.css" type="text/css">
<!-- <link rel="stylesheet" href="../static/css/style.css" type="text/css">-->
<link rel="stylesheet" href="./css/path.css" type="text/css">
<link rel="stylesheet" href="./css/legend.css" type="text/css">
<script defer src="../../examples/static/js/link-to-sources.js"></script>
Expand All @@ -38,41 +38,30 @@
<script defer src="js/execution-data/frequency-execution-data.js"></script>
<script defer src="js/monitoring-use-case.js"></script>
<script defer src="./js/index.js"></script>
<style>
.bpmn-container {
overflow: hidden;
position: absolute;
width: auto;
/*inset-0*/
bottom: 0;
left: 0;
right: 0;
top: 0;
}
</style>
</head>
<body>
<header class="navbar bg-dark p-2">
<section class="navbar-section ml-2">
<a class="home" href="../../examples/index.html">
<img src="../../examples/static/img/logo_64x64_white.png" alt="logo" class="logo">
<span class="h3 text-light ml-2 lib-name-text">bpmn-visualization examples</span>
</a>
</section>
<section class="navbar-section">
<a href="https://process-analytics.github.io/bpmn-visualization-js/" class="mr-2 btn btn-secondary">Docs</a>
<div class="dropdown mr-2">
<a href="#" class="btn btn-primary dropdown-toggle" tabindex="0">
GitHub <span class="icon icon-caret icon-in-the-middle"></span>
</a>
<ul class="menu">
<li><a href="https://github.com/process-analytics/bpmn-visualization-js"
class="mr-2 btn btn-link">Library</a></li>
<li><a href="https://github.com/process-analytics/bpmn-visualization-examples"
class="mr-2 btn btn-link">Examples</a></li>
</ul>
</div>
</section>
</header>
<body style="height: 100vh; display: flex; flex-direction: column">
<div class="" style="flex-grow: 1; position: relative;">
<div id="time-bpmn-container" class="bpmn-container"></div>
<div id="frequency-bpmn-container" class="bpmn-container d-hide" style=""></div>
</div>

<section class="container col-12 flex-centered" style="margin-top: .8rem !important">
<div class="col-11 col-mx-auto">
<div class="col-10 col-mx-auto">
<h2>Monitoring of all process instances demo</h2>
<p>Demonstrate how you can add execution time and frequency on BPMN elements.
</p>
</div>

<!-- Only kept to make the JS code work without too much changes -->
<section class="col-12 flex-centered" style="">
<div class="col-11 col-mx-auto" style="display: none">
<div class="col-11 col-mx-auto" style="margin-top: 2rem; margin-bottom: 1rem">
<div id="controls" class="column bg-secondary pt-2 pb-2">
<div class="columns">
<div id="choose-use-case-panel" class="col-6">
<h5>Use case</h5>
Expand Down Expand Up @@ -106,13 +95,9 @@ <h5>Displayed information</h5>
</div>
</div>
</div>
<div id="use-case-panel" class="bg-gray">
<div class="text-center">
<h4 id="time-title">Average run time</h4>
<h4 id="frequency-title" class="d-hide">Number of execution</h4>
</div>
<div id="use-case-panel" class="">
<div class="columns">
<div id="legend" class="column col-auto col-mx-auto">
<div id="legend" class="column col-auto col-mx-auto" style="display: none">
<div id="shape-overlay-legend" style="margin-bottom: 1.7rem;">
<label>Overlay on Shape</label>
<chart scale-y-linear="0 250">
Expand Down Expand Up @@ -147,15 +132,10 @@ <h4 id="frequency-title" class="d-hide">Number of execution</h4>
</chart>
</div>
</div>
<div class="column col-10 col-mx-auto">
<div id="time-bpmn-container" class="col-12 bpmn-container"></div>
<div id="frequency-bpmn-container" class="col-12 bpmn-container d-hide"></div>
</div>
</div>
</div>
</div>
</div>
</section>
<footer class="flex-centered"></footer>
</body>
</html>