Megjelenítési információ kinyerése a nodes és edges változók feltöltése SQL lekérdezéssel
Használt csomag : VIS-Network (JS)
Lekérdezés (ODI_REPO sémára)
--EDGE
--- minta: {from: 1, to: 2, arrows:'to'},
select
'{from: ' || t.FROM_STEP_ID ||', to: ' || t.TO_STEP_ID ||', arrows: ''to''},' as json
from
odi_repo.lp_step_transitions t ,
odi_repo.lp_steps step, ebh_odi_repo.lp_steps step2
where step.id = t.TO_STEP_ID and step2.id = t.FROM_STEP_ID
and (step.LOAD_PLAN_ID in (864896)
or step2.LOAD_PLAN_ID in (864896))
---
-------------
---NODE
--- minta: {id: 1, label: 'START', font: {background: 'pink'}},
select
'{id: ' || step.id ||', label: ''' || step.OBJECT_NAME ||''', font: {background: ''pink''' || '}},' as json
--step.OBJECT_TYPE_NAME, step.OBJECT_LONG_NAME
from
odi_repo.lp_steps step
where 1=1
and step.LOAD_PLAN_ID in (864896)
Az kl_odi_lp_map_tree_colour.html file tartalma:
<!doctype html>
<html>
<head>
<title>ODI LP MAP Network</title>
<script type="text/javascript" src="./vis-network.min.js"></script>
<style type="text/css">
#mynetwork {
width: 600px;
height: 600px;
border: 1px solid lightgray;
}
p {
max-width:600px;
}
</style>
</head>
<body>
<p>ODI LP MAP NetWork.</p>
<div id="mynetwork"></div>
<script type="text/javascript">
// create an array with nodes
var nodes = [
{id: 1, label: 'START', font: {background: 'pink'}},
{id: 2, label: 'AND START', font: {background: 'yellow'}},
{id: 3, label: 'ÜGYFEL', font: {background: 'lime'}},
{id: 4, label: 'TERMÉK', font: {background: 'lime'}},
{id: 5, label: 'SZERVEZET', font: {background: 'lime'}},
{id: 6, label: 'AND STOP', font: {background: 'pink'}},
{id: 7, label: 'AND START', font: {background: 'yellow'}},
{id: 8, label: 'ÜGYFEL HIER', font: {background: 'lime'}},
{id: 9, label: 'TERMÉK HIER', font: {background: 'lime'}},
{id: 10, label: 'SZERVEZET HIER', font: {background: 'lime'}},
{id: 11, label: 'AND STOP', font: {background: 'pink'}},
{id: 12, label: 'SZAMLA', font: {background: 'lime'}},
{id: 13, label: 'SZAMLA TETEL', font: {background: 'lime'}},
{id: 14, label: 'TRANZAKCIO', font: {background: 'lime'}},
{id: 20, label: 'STOP', font: {background: 'pink'}}
];
// create an array with edges
var edges = [
{from: 1, to: 2, arrows:'to'},
{from: 2, to: 3, arrows:'to'},
{from: 2, to: 4, arrows:'to'},
{from: 2, to: 5, arrows:'to'},
{from: 3, to: 6, arrows:'to', label: 'Vég', font: {background: 'pink'}},
{from: 4, to: 6, arrows:'to', label: 'Vég', font: {background: 'pink'}},
{from: 5, to: 6, arrows:'to', label: 'Vég', font: {background: 'pink'}},
{from: 6, to: 7, arrows:'to', label: 'Indulás', font: {background: 'yellow'}},
{from: 7, to: 8, arrows:'to'},
{from: 7, to: 9, arrows:'to'},
{from: 7, to: 10, arrows:'to'},
{from: 8, to: 11, arrows:'to', label: 'Vég', font: {background: 'pink'}},
{from: 9, to: 11, arrows:'to', label: 'Vég', font: {background: 'pink'}},
{from: 10, to: 11, arrows:'to', label: 'Vég', font: {background: 'pink'}},
{from: 11, to: 12, arrows:'to'},
{from: 11, to: 13, arrows:'to'},
{from: 11, to: 14, arrows:'to'},
{from: 12, to: 20, arrows:'to', label: 'Vége', font: {background: 'pink'}},
{from: 13, to: 20, arrows:'to', label: 'Vége', font: {background: 'pink'}},
{from: 14, to: 20, arrows:'to', label: 'Vége', font: {background: 'pink'}}
];
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {nodes:{font:{strokeWidth:0}}, edges:{font:{strokeWidth:0}}};
var network = new vis.Network(container, data, options);
</script>
</body>
</html>
Megjegyzések
Megjegyzés küldése