Skip to content

Instantly share code, notes, and snippets.

@makasim

makasim/pvm_ui.html

Created July 16, 2018 09:31
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save makasim/0908c5bae224cec1794c52fcb8ff9ca2 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save makasim/0908c5bae224cec1794c52fcb8ff9ca2 to your computer and use it in GitHub Desktop.
Download ZIP
PVM UI example
Raw
pvm_ui.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<title>PVM UI</title>
</head>
<body>
<div class="graph-container"></div>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://makasim.github.io/pvm-ui/js/viz.js"></script>
<script type="text/javascript" src="https://makasim.github.io/pvm-ui/js/full.render.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.5/svg.js"></script>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
$(function() {
const param = `digraph G {
graph [rankdir="TB" ranksep=0.5]
"__start" [label="Start" color="blue" shape="circle"]
"__end" [label="End" color="red" shape="circle"]
"cfea267b-435b-4c8d-b127-26d52706e2b4" [label="Start Node" shape="box"]
"85515cd2-70c0-4871-91ff-64425e580383" [label="Track Lead Event: campaign_started" shape="box"]
"5022af24-81e6-4c11-8fd7-0a843496e1a1" [label="Send Email" shape="box"]
"36afb416-b81a-4532-9d2e-61cf3a3f2dc9" [label="Track Lead Event: email_sent" shape="box"]
"639e1867-18c1-4034-92b0-279553b1aa6e" [label="Node IN" shape="box"]
"976e594d-7b32-443c-8a9a-73edb59bb169" [label="Decision" shape="box"]
"5e572004-59fd-42b2-89c4-e735a12c8085" [label="Adjust Lead Points" shape="box"]
"bbf28dfa-e7d1-48c5-928c-124a3ff1bcea" [label="Track Lead Event: asset_downloaded" shape="box"]
"2296f408-5901-4bf6-af25-67ca74b9dbd5" [label="Asset Downloaded" shape="box"]
"fe5dedaa-2379-48e5-a515-76235ba3e9e7" [label="All paths finished" shape="box"]
"19a1aa94-bfe9-425b-9703-5f275d1f5b7c" [label="Track Lead Event: campaign_finished" shape="box"]
"__start" -> "cfea267b-435b-4c8d-b127-26d52706e2b4" [label="" color="blue"]
"__start" -> "85515cd2-70c0-4871-91ff-64425e580383" [label="" color="blue"]
"85515cd2-70c0-4871-91ff-64425e580383" -> "__end" [label="" color="blue"]
"5022af24-81e6-4c11-8fd7-0a843496e1a1" -> "36afb416-b81a-4532-9d2e-61cf3a3f2dc9" [label="" color="blue"]
"36afb416-b81a-4532-9d2e-61cf3a3f2dc9" -> "__end" [label="" color="blue"]
"976e594d-7b32-443c-8a9a-73edb59bb169" -> "5e572004-59fd-42b2-89c4-e735a12c8085" [label="success" color="blue"]
"5e572004-59fd-42b2-89c4-e735a12c8085" -> "__end" [label="success" color="blue"]
"976e594d-7b32-443c-8a9a-73edb59bb169" -> "bbf28dfa-e7d1-48c5-928c-124a3ff1bcea" [label="success" color="blue"]
"bbf28dfa-e7d1-48c5-928c-124a3ff1bcea" -> "__end" [label="success" color="blue"]
"639e1867-18c1-4034-92b0-279553b1aa6e" -> "2296f408-5901-4bf6-af25-67ca74b9dbd5" [label="" color="blue"]
"2296f408-5901-4bf6-af25-67ca74b9dbd5" -> "976e594d-7b32-443c-8a9a-73edb59bb169" [label="success" color="blue"]
"cfea267b-435b-4c8d-b127-26d52706e2b4" -> "5022af24-81e6-4c11-8fd7-0a843496e1a1" [label="" color="blue"]
"5022af24-81e6-4c11-8fd7-0a843496e1a1" -> "639e1867-18c1-4034-92b0-279553b1aa6e" [label="" color="blue"]
"fe5dedaa-2379-48e5-a515-76235ba3e9e7" -> "19a1aa94-bfe9-425b-9703-5f275d1f5b7c" [label="" color="blue"]
"19a1aa94-bfe9-425b-9703-5f275d1f5b7c" -> "__end" [label="" color="blue"]
"976e594d-7b32-443c-8a9a-73edb59bb169" -> "fe5dedaa-2379-48e5-a515-76235ba3e9e7" [label="success" color="blue"]
}
`;
let viz = new Viz();
function test() {
let temp = document.getElementsByClassName('node');
for (let i = 0; i < temp.length; i++) {
temp[i].setAttribute('data-toggle', 'popover');
temp[i].classList.add('btn');
temp[i].setAttribute('data-container', 'body');
temp[i].setAttribute('data-content', temp[i].getElementsByTagName('text').item(0).innerHTML);
temp[i].addEventListener('click', $(function () {
$('[data-toggle="popover"]').popover()
}));
}
}
viz.renderSVGElement(param).then(function (element) {
$('.graph-container').html(element);
test();
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment