Ugrás a fő tartalomra

ODI LP MAP vizualizáció 1.

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>










Forrás:



JS és css hálőzati elérése:




Megjegyzések