Last active
February 1, 2017 12:26
-
-
Save LuisValdesZero/d13dc0cad948fb4358d0f40f002f48ef to your computer and use it in GitHub Desktop.
Basic Treant-js example
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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