Skip to content

Instantly share code, notes, and snippets.

@kavichu

kavichu/index.html

Last active February 1, 2017 12:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kavichu/906164658a1f0a02db16bc484fde6bc7 to your computer and use it in GitHub Desktop.
Save kavichu/906164658a1f0a02db16bc484fde6bc7 to your computer and use it in GitHub Desktop.
Download ZIP
Itaipu Dam Organization diagram example
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title></title>
<!-- stylesheets -->
<link rel="stylesheet" href="https://rawgit.com/lvlds/treant-js/master/Treant.css" type="text/css"/>
</head>
<body>
<div id="tree-simple" style="width:335px; height: 160px"> </div>
<!-- javascript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/lvlds/treant-js/master/vendor/raphael.js"></script>
<script src="https://rawgit.com/lvlds/treant-js/master/Treant.js"></script>
<script type="text/javascript">
let config = {
container: "#tree-simple"
};
let ItaipuDam = [
{
"key": "CA",
"displayName": "Consejo de Administración",
"parent": null
},
{
"key": "DE",
"displayName": "Directorio Ejecutivo",
"parent": "CA"
},
{
"key": "DG",
"displayName": "Dirección General",
"parent": "DE"
},
{
"key": "DT",
"displayName": "Dirección Técnica",
"parent": "DG"
},
{
"key": "DJ",
"displayName": "Dirección Jurídica",
"parent": "DG"
},
{
"key": "DA",
"displayName": "Dirección Administrativa",
"parent": "DG"
},
{
"key": "DF",
"displayName": "Dirección Financiera",
"parent": "DG"
},
{
"key": "DC",
"displayName": "Dirección de Coordinación",
"parent": "DG"
},
{
"key": "GP",
"displayName": "Director General Paraguayo",
"parent": "DG"
},
{
"key": "GB",
"displayName": "Director General Brasilero",
"parent": "DG"
},
{
"key": "SI.GG",
"displayName": "Superintendencia de Informatica",
"parent": "GP"
},
{
"key": "SIS.GG",
"displayName": "Departamento de planeamiento de sistemas y administracion de datos",
"parent": "SI.GG"
},
{
"key": "SISP.GG",
"displayName": "Division de planeamiento de Sistemas",
"parent": "SIS.GG"
},
{
"key": "SISD.GG",
"displayName": "Division de administracion de Sistemas",
"parent": "SIS.GG"
},
{
"key": "SID.GG",
"displayName": "Division de desarrollo y mantenimiento de Sistemas",
"parent": "SI.GG"
},
{
"key": "SID1.GG",
"displayName": "Division de Sistemas I",
"parent": "SID.GG"
},
{
"key": "SID2.GG",
"displayName": "Division de Sistemas II",
"parent": "SID.GG"
},
{
"key": "SIP.GG",
"displayName": "Departamento de produccion y soporte tecnico",
"parent": "SI.GG"
},
{
"key": "SIPP.GG",
"displayName": "Division de produccion",
"parent": "SIP.GG"
},
{
"key": "SIPS.GG",
"displayName": "Div de soporte tecnico",
"parent": "SIP.GG"
},
{
"key": "SIT.GG",
"displayName": "Departamento de teleprocesamiento y microinformatica",
"parent": "SI.GG"
},
{
"key": "SITT.GG",
"displayName": "Division de teleprocesamiento",
"parent": "SIT.GG"
},
{
"key": "SITM.GG",
"displayName": "Division de microinformatica",
"parent": "SIT.GG"
}
]
let treantArray = ItaipuDam.map((item) => {
return {
key: item.key,
parent: item.parent,
text: {
name: `${item.key} - ${item.displayName}`
}
}
});
let nodes = treantArray.map((item) => {
let parent = treantArray.filter((el) => {
return el.key == item.parent;
});
return {
parent: parent.length > 0 ? parent[0] : null,
text: {
name: item.name
}
}
});
let simple_chart_config = [
config, nodes
];
var chart = new Treant(simple_chart_config, function() { alert( 'Tree Loaded' ) }, $ );
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment