Add legend

Author: csouchet

demo/predictions/css/demo.css

@@ -24,6 +24,8 @@
 
  /* message flow start marker */
 .bpmn-message-flow.state-already-executed > ellipse,
+ /* message flow icon */
+.bpmn-message-flow-icon.state-already-executed > *,
  /* sequence/message flow line and arrow (end marker) */
 .bpmn-type-flow.state-already-executed > path,
  /* task */
@@ -157,6 +159,8 @@
 .bpmn-type-flow.path-predicted-on-time > path,
  /* message flow start marker */
 .bpmn-message-flow.path-predicted-on-time > ellipse,
+ /* message flow icon */
+.bpmn-message-flow-icon.path-predicted-on-time > *,
 .bpmn-type-task.path-predicted-on-time > rect,
 .bpmn-type-event.path-predicted-on-time > ellipse {
  stroke: var(--color-path-predicted-on-time);

demo/predictions/css/legend.css

@@ -0,0 +1,47 @@
+fieldset {
+ border: 1px solid#ddd;
+ padding: 5px 12px;
+}
+
+legend {
+ font-size: 18px;
+ padding: 0 10px;
+ margin: auto;
+}
+
+.state-predicted-on-time .legend li:first-child::before {
+ background-color: var(--color-state-predicted-on-time);
+}
+
+.state-predicted-late .legend li:first-child::before {
+ background-color: var(--color-state-predicted-late);
+}
+
+.legend li:nth-child(2)::before {
+ background-color: var(--color-state-running);
+}
+.legend li:nth-child(3)::before {
+ background-color: var(--color-path-executed);
+}
+
+
+.legend li::before {
+ content: "";
+ display: inline-block;
+ vertical-align: middle;
+ margin-inline-end: .5rem;
+ border-width: 2px;
+ border-style: solid;
+ width: 1rem;
+ height: 1rem;
+ border-radius: 3px;
+ border-color: #000;
+}
+
+.legend li {
+ line-height: 1rem;
+}
+.legend {
+ list-style: none;
+ font-size: 0.8rem;
+}

demo/predictions/index.html

@@ -21,6 +21,7 @@
  <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="./css/legend.css" type="text/css">
  <link rel="stylesheet" href="./css/demo.css" type="text/css">
  <script defer src="../../examples/static/js/link-to-sources.js"></script>
  <!-- load bpmn-visualization -->
@@ -89,7 +90,17 @@ <h5>Use case</h5>
  <h4 id="late-title">Predicted Late</h4>
  <h4 id="onTime-title" class="d-hide">Predicted on Time</h4>
  </div>
- <div class="columns">
+ <div class="columns" style="padding: 0 1rem">
+ <div id="legend" class="column col-2 col-mx-auto state-predicted-late" style="margin: auto; padding-right: 0.7rem">
+ <fieldset>
+ <legend>Legend</legend>
+ <ul class="legend">
+ <li>Running items with prediction</li>
+ <li>Running items without prediction</li>
+ <li>Executed items</li>
+ </ul>
+ </fieldset>
+ </div>
  <div class="column col-10 col-mx-auto">
  <div id="late-bpmn-container" class="col-12 bpmn-container"></div>
  <div id="onTime-bpmn-container" class="col-12 bpmn-container d-hide"></div>

demo/predictions/js/prediction-use-case.js

@@ -7,6 +7,17 @@ class PredicatedLateUseCase extends UseCase {
  super(type, () => pizzaDiagram(), true, {fit: {type: 'Center', margin: 20}});
  }
 
+ _displayPanel() {
+ super._displayPanel();
+ this._switchLegend();
+ }
+
+ _switchLegend() {
+ const element = document.getElementById(`legend`);
+ element.classList.remove('state-predicted-on-time');
+ element.classList.add('state-predicted-late');
+ }
+
  _postLoadDiagram() {
  this._initManagers();
 
@@ -39,6 +50,12 @@ class PredicatedLateUseCase extends UseCase {
 
 
 class PredictedOnTimeUseCase extends PredicatedLateUseCase {
+ _switchLegend() {
+ const element = document.getElementById(`legend`);
+ element.classList.remove('state-predicted-late');
+ element.classList.add('state-predicted-on-time');
+ }
+
  _initManagers() {
  this._style = new PredictedOnTimeStyle(this._bpmnVisualization.bpmnElementsRegistry);
  const pathResolver = new PathResolver(this._bpmnVisualization);