This commit is contained in:
root
2019-12-13 22:20:23 +00:00
parent 3c32a4b96c
commit 1a4d72f145
136 changed files with 7187 additions and 138 deletions
+5 -5
View File
@@ -1,5 +1,5 @@
{
"_from": "express@^4.16.0",
"_from": "express@^4.17.1",
"_id": "express@4.17.1",
"_inBundle": false,
"_integrity": "sha512-mHJ9O79RqluphRrcw2X/GTh3k9tVv8YcoyY4Kkh4WDMUYKRZUq0h1o0w2rrrxBqM7VoeUVqgb27xlEMXTnYt4g==",
@@ -8,12 +8,12 @@
"_requested": {
"type": "range",
"registry": true,
"raw": "express@^4.16.0",
"raw": "express@^4.17.1",
"name": "express",
"escapedName": "express",
"rawSpec": "^4.16.0",
"rawSpec": "^4.17.1",
"saveSpec": null,
"fetchSpec": "^4.16.0"
"fetchSpec": "^4.17.1"
},
"_requiredBy": [
"#USER",
@@ -21,7 +21,7 @@
],
"_resolved": "https://registry.npmjs.org/express/-/express-4.17.1.tgz",
"_shasum": "4491fc38605cf51f8629d39c2b5d026f98a4c134",
"_spec": "express@^4.16.0",
"_spec": "express@^4.17.1",
"_where": "/app",
"author": {
"name": "TJ Holowaychuk",
+16
View File
@@ -0,0 +1,16 @@
<pre>
_______ _ _
|__ __| | | (_)
| |_ __ ___ __ _ _ __ | |_ ______ _ ___
| | '__/ _ \/ _` | '_ \| __|______| / __|
| | | | __/ (_| | | | | |_ | \__ \
|_|_| \___|\__,_|_| |_|\__| | |___/
_/ |
|__/
</pre>
Treant-js is an SVG based JS library for drawing tree diagrams.
It relies on Raphael and jQuery for handling SVG and animations.
For Docs, Examples, and everything else see:
http://fperucic.github.io/treant-js
+11
View File
@@ -0,0 +1,11 @@
/* required LIB STYLES */
/* .Treant se automatski dodaje na svaki chart conatiner */
.Treant { position: relative; overflow: hidden; padding: 0 !important; }
.Treant > .node,
.Treant > .pseudo { position: absolute; display: block; visibility: hidden; }
.Treant.Treant-loaded .node,
.Treant.Treant-loaded .pseudo { visibility: visible; }
.Treant > .pseudo { width: 0; height: 0; border: none; padding: 0; }
.Treant .collapse-switch { width: 3px; height: 3px; display: block; border: 1px solid black; position: absolute; top: 1px; right: 1px; cursor: pointer; }
.Treant .collapsed .collapse-switch { background-color: #868DEE; }
.Treant > .node img { border: none; float: left; }
+1362
View File
File diff suppressed because it is too large Load Diff
+1
View File
@@ -0,0 +1 @@
java -jar {path}/compiler.jar --compilation_level SIMPLE_OPTIMIZATIONS --warning_level QUIET --externs vendor/jquery.min.js --externs vendor/perfect-scrollbar/perfect-scrollbar.js --externs vendor/raphael.js --language_in ECMASCRIPT5 --js Treant.js --js_output_file Treant.min.js
@@ -0,0 +1,31 @@
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; }
table { border-collapse:collapse; border-spacing:0; }
fieldset,img { border:0; }
address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; }
caption,th { text-align:left; }
h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
q:before,q:after { content:''; }
abbr,acronym { border:0; }
body { background: #fff; }
/* optional Container STYLES */
.chart { height: 600px; margin: 5px; width: 900px; }
.Treant > .node { }
.Treant > p { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: bold; font-size: 12px; }
.node-name { font-weight: bold;}
.nodeExample1 {
padding: 2px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #ffffff;
border: 1px solid #000;
width: 200px;
font-family: Tahoma;
font-size: 12px;
}
.nodeExample1 img {
margin-right: 10px;
}
@@ -0,0 +1,220 @@
var config = {
container: "#basic-example",
connectors: {
type: 'step'
},
node: {
HTMLclass: 'nodeExample1'
}
},
ceo = {
text: {
name: "Mark Hill",
title: "Chief executive officer",
contact: "Tel: 01 213 123 134",
},
image: "../headshots/2.jpg"
},
cto = {
parent: ceo,
text:{
name: "Joe Linux",
title: "Chief Technology Officer",
},
stackChildren: true,
image: "../headshots/1.jpg"
},
cbo = {
parent: ceo,
stackChildren: true,
text:{
name: "Linda May",
title: "Chief Business Officer",
},
image: "../headshots/5.jpg"
},
cdo = {
parent: ceo,
text:{
name: "John Green",
title: "Chief accounting officer",
contact: "Tel: 01 213 123 134",
},
image: "../headshots/6.jpg"
},
cio = {
parent: cto,
text:{
name: "Ron Blomquist",
title: "Chief Information Security Officer"
},
image: "../headshots/8.jpg"
},
ciso = {
parent: cto,
text:{
name: "Michael Rubin",
title: "Chief Innovation Officer",
contact: {val: "we@aregreat.com", href: "mailto:we@aregreat.com"}
},
image: "../headshots/9.jpg"
},
cio2 = {
parent: cdo,
text:{
name: "Erica Reel",
title: "Chief Customer Officer"
},
link: {
href: "http://www.google.com"
},
image: "../headshots/10.jpg"
},
ciso2 = {
parent: cbo,
text:{
name: "Alice Lopez",
title: "Chief Communications Officer"
},
image: "../headshots/7.jpg"
},
ciso3 = {
parent: cbo,
text:{
name: "Mary Johnson",
title: "Chief Brand Officer"
},
image: "../headshots/4.jpg"
},
ciso4 = {
parent: cbo,
text:{
name: "Kirk Douglas",
title: "Chief Business Development Officer"
},
image: "../headshots/11.jpg"
}
chart_config = [
config,
ceo,
cto,
cbo,
cdo,
cio,
ciso,
cio2,
ciso2,
ciso3,
ciso4
];
// Antoher approach, same result
// JSON approach
/*
var chart_config = {
chart: {
container: "#basic-example",
connectors: {
type: 'step'
},
node: {
HTMLclass: 'nodeExample1'
}
},
nodeStructure: {
text: {
name: "Mark Hill",
title: "Chief executive officer",
contact: "Tel: 01 213 123 134",
},
image: "../headshots/2.jpg",
children: [
{
text:{
name: "Joe Linux",
title: "Chief Technology Officer",
},
stackChildren: true,
image: "../headshots/1.jpg",
children: [
{
text:{
name: "Ron Blomquist",
title: "Chief Information Security Officer"
},
image: "../headshots/8.jpg"
},
{
text:{
name: "Michael Rubin",
title: "Chief Innovation Officer",
contact: "we@aregreat.com"
},
image: "../headshots/9.jpg"
}
]
},
{
stackChildren: true,
text:{
name: "Linda May",
title: "Chief Business Officer",
},
image: "../headshots/5.jpg",
children: [
{
text:{
name: "Alice Lopez",
title: "Chief Communications Officer"
},
image: "../headshots/7.jpg"
},
{
text:{
name: "Mary Johnson",
title: "Chief Brand Officer"
},
image: "../headshots/4.jpg"
},
{
text:{
name: "Kirk Douglas",
title: "Chief Business Development Officer"
},
image: "../headshots/11.jpg"
}
]
},
{
text:{
name: "John Green",
title: "Chief accounting officer",
contact: "Tel: 01 213 123 134",
},
image: "../headshots/6.jpg",
children: [
{
text:{
name: "Erica Reel",
title: "Chief Customer Officer"
},
link: {
href: "http://www.google.com"
},
image: "../headshots/10.jpg"
}
]
}
]
}
};
*/
+22
View File
@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<title> Basic example </title>
<link rel="stylesheet" href="../../Treant.css">
<link rel="stylesheet" href="basic-example.css">
</head>
<body>
<div class="chart" id="basic-example"></div>
<script src="../../vendor/raphael.js"></script>
<script src="../../Treant.js"></script>
<script src="basic-example.js"></script>
<script>
new Treant( chart_config );
</script>
</body>
</html>
@@ -0,0 +1,18 @@
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; }
table { border-collapse:collapse; border-spacing:0; }
fieldset,img { border:0; }
address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; }
caption,th { text-align:left; }
h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
q:before,q:after { content:''; }
abbr,acronym { border:0; }
body { background: #fff; }
/* optional Container STYLES */
.chart { height: 600px; margin: 5px; width: 900px; }
.Treant > .node { padding: 3px; border: 1px solid #484848; border-radius: 3px; }
.Treant > .node img { width: 100%; height: 100%; }
.Treant .collapse-switch { width: 100%; height: 100%; border: none; }
.Treant .node.collapsed { background-color: #DEF82D; }
.Treant .node.collapsed .collapse-switch { background: none; }
@@ -0,0 +1,112 @@
var chart_config = {
chart: {
container: "#collapsable-example",
animateOnInit: true,
node: {
collapsable: true
},
animation: {
nodeAnimation: "easeOutBounce",
nodeSpeed: 700,
connectorsAnimation: "bounce",
connectorsSpeed: 700
}
},
nodeStructure: {
image: "img/malory.png",
children: [
{
image: "img/lana.png",
collapsed: true,
children: [
{
image: "img/figgs.png"
}
]
},
{
image: "img/sterling.png",
childrenDropLevel: 1,
children: [
{
image: "img/woodhouse.png"
}
]
},
{
pseudo: true,
children: [
{
image: "img/cheryl.png"
},
{
image: "img/pam.png"
}
]
}
]
}
};
/* Array approach
var config = {
container: "#collapsable-example",
animateOnInit: true,
node: {
collapsable: true
},
animation: {
nodeAnimation: "easeOutBounce",
nodeSpeed: 700,
connectorsAnimation: "bounce",
connectorsSpeed: 700
}
},
malory = {
image: "img/malory.png"
},
lana = {
parent: malory,
image: "img/lana.png"
}
figgs = {
parent: lana,
image: "img/figgs.png"
}
sterling = {
parent: malory,
childrenDropLevel: 1,
image: "img/sterling.png"
},
woodhouse = {
parent: sterling,
image: "img/woodhouse.png"
},
pseudo = {
parent: malory,
pseudo: true
},
cheryl = {
parent: pseudo,
image: "img/cheryl.png"
},
pam = {
parent: pseudo,
image: "img/pam.png"
},
chart_config = [config, malory, lana, figgs, sterling, woodhouse, pseudo, pam, cheryl];
*/
Binary file not shown.

After

Width:  |  Height:  |  Size: 8.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

+28
View File
@@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<title> Collapsable example </title>
<link rel="stylesheet" href="../../Treant.css">
<link rel="stylesheet" href="collapsable.css">
<link rel="stylesheet" href="../../perfect-scrollbar/perfect-scrollbar.css">
</head>
<body>
<div class="chart" id="collapsable-example"></div>
<script src="../../vendor/raphael.js"></script>
<script src="../../Treant.js"></script>
<script src="../../vendor/jquery.min.js"></script>
<script src="../../vendor/jquery.easing.js"></script>
<script src="collapsable.js"></script>
<script>
tree = new Treant( chart_config );
</script>
</body>
</html>
Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

+39
View File
@@ -0,0 +1,39 @@
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; }
body { background: #fff; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; }
/* optional Container STYLES */
.chart { height: 600px; width: 900px; margin: 5px; margin: 15px auto; border: 3px solid #DDD; border-radius: 3px; }
.comments { width: 427px; margin: 15px auto; }
.comments ul { margin-left: 35px; list-style: none; }
.comment {
color: #333333;
display: inline-block;
font-size: 14px;
margin-top: 6px;
width: 360px;
}
.comment img {
border-radius: 3px 3px 3px 3px;
float: left;
height: 30px;
margin-right: 8px;
margin-top: 3px;
width: 30px;
}
.comment p {
color: #42474A;
font-size: 14px;
line-height: 1.4em;
margin-bottom: 0;
max-height: 4.2em;
overflow: hidden;
}
.comment .user {
color: rgba(30, 55, 70, 0.4);
font-size: 13px;
font-weight: 600;
}
.Treant .comment { margin: 0; padding: 3px; border: 1px solid #ddd; border-radius: 3px; }
+79
View File
@@ -0,0 +1,79 @@
var config = {
container: "#OrganiseChart8",
levelSeparation: 70,
siblingSeparation: 60,
nodeAlign: "BOTTOM",
connectors: {
type: "step",
style: {
"stroke-width": 2,
"stroke": "#ccc",
"stroke-dasharray": "--", //"", "-", ".", "-.", "-..", ". ", "- ", "--", "- .", "--.", "--.."
"arrow-end": "classic-wide-long"
}
}
},
first_post = {
innerHTML: "#first-post"
},
first_reply = {
parent: first_post,
innerHTML: "#first-reply"
},
second_reply = {
parent: first_post,
innerHTML: "#second-reply"
}
second_reply_reply = {
parent: second_reply,
innerHTML: "#second-reply-reply"
},
tree_structure = [
config, first_post, first_reply, second_reply, second_reply_reply
];
/* ALTERNATIVE tree_structure CONFIG, same result as above
var tree_structure = {
chart: {
container: "#OrganiseChart8",
levelSeparation: 70,
siblingSeparation: 60,
nodeAlign: "BOTTOM",
connectors: {
type: "step",
style: {
"stroke-width": 2,
"stroke": "#ccc",
"stroke-dasharray": "--",
"arrow-end": "classic-wide-long"
}
}
},
nodeStructure: {
innerHTML: "#first-post",
children: [
{
innerHTML: "#first-reply"
},
{
innerHTML: "#second-reply",
children: [
{
innerHTML: "#second-reply-reply"
}
]
}
]
}
};
*/
+78
View File
@@ -0,0 +1,78 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<title> Comments, selector example </title>
<link rel="stylesheet" href="../../Treant.css">
<link rel="stylesheet" href="example8.css">
</head>
<body>
<div class="comments">
<ul>
<li>
<div id="first-post" class="comment">
<img alt="Avatar" src="avatar.jpg">
<p>
<span class="user">John Smitt</span> &mdash;
<span class="line-truncate">
<em>Treant.js</em> is an library that handles drawing and visualisation of tree structural charts. What does that mean?
</span>
</p>
</div>
<ul>
<li>
<div id="first-reply" class="comment">
<img alt="Avatar" src="avatar.jpg">
<p>
<span class="user"> Peter Griffin </span> &mdash;
<span class="line-truncate">
Great collection! A lot of good inspiration. Thanks!
</span>
</p>
</div>
</li>
<li>
<div id="second-reply" class="comment">
<img alt="Avatar" src="avatar.jpg">
<p>
<span class="user">Jane Black</span> &mdash;
<span class="line-truncate">
Thanks for tutorial. One issue I have is that all tutorials is on dev environment. What about production? what differences between …
</span>
</p>
</div>
<ul>
<li>
<div id="second-reply-reply" class="comment">
<img alt="Avatar" src="avatar.jpg">
<p>
<span class="user"> Joe Linux </span> &mdash;
<span class="line-truncate">
Looks very promising. I'll have to take a closer look some time.
</span>
</p>
</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div class="chart" id="OrganiseChart8"></div>
<script src="../../vendor/raphael.js"></script>
<script src="../../Treant.js"></script>
<script src="example8.js"></script>
<script>
new Treant( tree_structure );
</script>
</body>
</html>
@@ -0,0 +1,36 @@
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; }
body { background: #fff; font-family: "Droid Serif",Georgia,"Times New Roman",Times,serif; color: #444444; }
/* optional Container STYLES */
.chart { height: 600px; width: 750px; margin: 5px; margin: 15px auto; border: 3px solid #DDD; border-radius: 3px; }
.node { font-size: 11px; }
.node.big-commpany {
cursor: pointer;
padding: 0 2px;
min-width: 60px;
text-align: center;
height: 30px;
border: 2px solid #E8E8E3;
border-radius: 2px;
box-shadow: 1px 1px 1px rgba(0,0,0,.5);
background: #fff;
}
.node.big-commpany:active {
box-shadow: inset 1px 1px 1px rgba(0,0,0,.1);
margin: 1px 0 0 1px;
border: 2px solid #D3D3CB;
}
.node.big-commpany .node-name {
line-height: 30px;
color: #9B9B9B;
}
.node.big-commpany:hover .node-name {
color: #8B8B8B;
text-shadow: 1px 1px rgba(0,0,0,.15);
}
+166
View File
@@ -0,0 +1,166 @@
// fix arrow end issues:
// https://github.com/DmitryBaranovskiy/raphael/issues/471
var chart_config = {
chart: {
container: "#OrganiseChart-big-commpany",
levelSeparation: 45,
rootOrientation: "WEST",
nodeAlign: "BOTTOM",
connectors: {
type: "step",
style: {
"stroke-width": 2
}
},
node: {
HTMLclass: "big-commpany"
}
},
nodeStructure: {
text: { name: "CEO" },
connectors: {
style: {
'stroke': '#bbb',
'arrow-end': 'oval-wide-long'
}
},
children: [
{
text: { name: "Account" },
stackChildren: true,
connectors: {
style: {
'stroke': '#8080FF',
'arrow-end': 'block-wide-long'
}
},
children: [
{
text: {name: "Receptionist"},
HTMLclass: "reception"
},
{
text: {name: "Author"}
}
]
},
{
text: { name: "Operation Manager" },
connectors: {
style: {
'stroke': '#bbb',
"stroke-dasharray": "- .", //"", "-", ".", "-.", "-..", ". ", "- ", "--", "- .", "--.", "--.."
'arrow-start': 'classic-wide-long'
}
},
children: [
{
text: {name: "Manager I"},
connectors: {
style: {
stroke: "#00CE67"
}
},
children: [
{
text: {name: "Worker I"}
},
{
pseudo: true,
connectors: {
style: {
stroke: "#00CE67"
}
},
children: [
{
text: {name: "Worker II"}
}
]
},
{
text: {name: "Worker III"}
}
]
},
{
text: {name: "Manager II"},
connectors: {
type: "curve",
style: {
stroke: "#50688D"
}
},
children: [
{
text: {name: "Worker I"}
},
{
text: {name: "Worker II"}
}
]
},
{
text: {name: "Manager III"},
connectors: {
style: {
'stroke': '#FF5555'
}
},
children: [
{
text: {name: "Worker I"}
},
{
pseudo: true,
connectors: {
style: {
'stroke': '#FF5555'
}
},
children: [
{
text: {name: "Worker II"}
},
{
text: {name: "Worker III"}
}
]
},
{
text: {name: "Worker IV"}
}
]
}
]
},
{
text: { name: "Delivery Manager" },
stackChildren: true,
connectors: {
stackIndent: 30,
style: {
'stroke': '#E3C61A',
'arrow-end': 'block-wide-long'
}
},
children: [
{
text: {name: "Driver I"}
},
{
text: {name: "Driver II"}
},
{
text: {name: "Driver III"}
}
]
}
]
}
};
+28
View File
@@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<title> Connectors style example </title>
<link rel="stylesheet" href="../../Treant.css">
<link rel="stylesheet" href="connectors.css">
<link rel="stylesheet" href="../../perfect-scrollbar/perfect-scrollbar.css">
</head>
<body>
<div class="chart" id="OrganiseChart-big-commpany"></div>
<script src="../../vendor/raphael.js"></script>
<script src="../../Treant.js"></script>
<script src="connectors.js"></script>
<script>
new Treant( chart_config );
</script>
</body>
</html>
@@ -0,0 +1,44 @@
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; }
table { border-collapse:collapse; border-spacing:0; }
fieldset,img { border:0; }
address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; }
caption,th { text-align:left; }
h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
q:before,q:after { content:''; }
abbr,acronym { border:0; }
body { background: #fff; }
/* optional Container STYLES */
.chart { height: 670px; margin: 5px; width: 900px; margin: 5px auto; border: 3px solid #DDD; border-radius: 3px; }
.Treant > .node { }
.Treant > p { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: bold; font-size: 12px; }
.node-name { font-weight: bold;}
.nodeExample1 {
padding: 2px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #262626;
border: 1px solid #000;
width: 200px;
font-family: Tahoma;
font-size: 12px;
color: #ffffff;
}
.nodeExample1 img {
margin-right: 10px;
}
.Treant > a:link {
color: #ffffff;
}
.Treant > a:visited {
color: #ffffff;
}
.Treant > a:link:hover {
color: #636363;
}
@@ -0,0 +1,127 @@
var config = {
container: "#OrganiseChart1",
rootOrientation: 'WEST', // NORTH || EAST || WEST || SOUTH
// levelSeparation: 30,
siblingSeparation: 20,
subTeeSeparation: 60,
scrollbar: "fancy",
connectors: {
type: 'step'
},
node: {
HTMLclass: 'nodeExample1'
}
},
ceo = {
text: {
name: "Mark Hill",
title: "Chief executive officer",
contact: "Tel: 01 213 123 134",
},
image: "../headshots/2.jpg",
HTMLid: "ceo"
},
cto = {
parent: ceo,
text:{
name: "Joe Linux",
title: "Chief Technology Officer",
},
stackChildren: true,
image: "../headshots/1.jpg",
HTMLid: "coo"
},
cbo = {
parent: ceo,
text:{
name: "Linda May",
title: "Chief Business Officer",
},
image: "../headshots/5.jpg",
HTMLid: "cbo"
},
cdo = {
parent: ceo,
text:{
name: "John Green",
title: "Chief accounting officer",
contact: "Tel: 01 213 123 134",
},
image: "../headshots/6.jpg",
HTMLid: "cdo"
},
cio = {
parent: cto,
text:{
name: "Ron Blomquist",
title: "Chief Information Security Officer"
},
image: "../headshots/8.jpg",
HTMLid: "cio"
},
ciso = {
parent: cto,
text:{
name: "Michael Rubin",
title: "Chief Innovation Officer",
contact: "we@aregreat.com"
},
image: "../headshots/9.jpg",
HTMLid: "ciso"
},
cio2 = {
parent: cdo,
text:{
name: "Erica Reel",
title: "Chief Customer Officer"
},
link: {
href: "http://www.google.com",
target: "_blank"
},
image: "../headshots/10.jpg",
HTMLid: "cio2"
},
ciso2 = {
parent: cbo,
text:{
name: "Alice Lopez",
title: "Chief Communications Officer"
},
image: "../headshots/7.jpg",
HTMLid: "ciso2"
},
ciso3 = {
parent: cbo,
text:{
name: "Mary Johnson",
title: "Chief Brand Officer"
},
image: "../headshots/4.jpg",
HTMLid: "ciso2"
},
ciso4 = {
parent: cbo,
text:{
name: "Kirk Douglas",
title: "Chief Business Development Officer"
},
image: "../headshots/11.jpg",
HTMLid: "ciso2"
}
ALTERNATIVE = [
config,
ceo,
cto,
cbo,
cdo,
cio,
ciso,
cio2,
ciso2,
ciso3,
ciso4
];
@@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<title> Chart example 1 </title>
<link rel="stylesheet" href="../../Treant.css">
<link rel="stylesheet" href="custom-color-plus-scrollbar.css">
<link rel="stylesheet" href="../../vendor/perfect-scrollbar/perfect-scrollbar.css">
</head>
<body>
<div class="chart" id="OrganiseChart1"></div>
<script src="../../vendor/raphael.js"></script>
<script src="../../Treant.js"></script>
<script src="../../vendor/jquery.min.js"></script>
<script src="../../vendor/perfect-scrollbar/jquery.mousewheel.js"></script>
<script src="../../vendor/perfect-scrollbar/perfect-scrollbar.js"></script>
<script src="custom-color-plus-scrollbar.js"></script>
<script>
new Treant( ALTERNATIVE );
</script>
</body>
</html>
@@ -0,0 +1,43 @@
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; }
table { border-collapse:collapse; border-spacing:0; }
fieldset,img { border:0; }
address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; }
caption,th { text-align:left; }
h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
q:before,q:after { content:''; }
abbr,acronym { border:0; }
body { background: #fff; }
/* optional Container STYLES */
.chart { height: 550px; margin: 5px; width: 900px; }
.Treant > .node { }
.Treant > p { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: bold; font-size: 12px; }
.node-name { font-weight: bold;}
.nodeExample1 {
padding: 2px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #ffffff;
border: 1px solid #000;
width: 200px;
font-family: Tahoma;
font-size: 12px;
}
.nodeExample1 img {
margin-right: 10px;
}
.gray {
background-color: #909090;
}
.light-gray {
background-color: #D3D3C7;
}
.blue {
background-color: #A2BDFD;
}
@@ -0,0 +1,231 @@
var config = {
container: "#custom-colored",
nodeAlign: "BOTTOM",
connectors: {
type: 'step'
},
node: {
HTMLclass: 'nodeExample1'
}
},
ceo = {
text: {
name: "Mark Hill",
title: "Chief executive officer",
contact: "Tel: 01 213 123 134",
},
image: "../headshots/2.jpg"
},
cto = {
parent: ceo,
HTMLclass: 'light-gray',
text:{
name: "Joe Linux",
title: "Chief Technology Officer",
},
image: "../headshots/1.jpg"
},
cbo = {
parent: ceo,
childrenDropLevel: 2,
HTMLclass: 'blue',
text:{
name: "Linda May",
title: "Chief Business Officer",
},
image: "../headshots/5.jpg"
},
cdo = {
parent: ceo,
HTMLclass: 'gray',
text:{
name: "John Green",
title: "Chief accounting officer",
contact: "Tel: 01 213 123 134",
},
image: "../headshots/6.jpg"
},
cio = {
parent: cto,
HTMLclass: 'light-gray',
text:{
name: "Ron Blomquist",
title: "Chief Information Security Officer"
},
image: "../headshots/8.jpg"
},
ciso = {
parent: cto,
HTMLclass: 'light-gray',
text:{
name: "Michael Rubin",
title: "Chief Innovation Officer",
contact: "we@aregreat.com"
},
image: "../headshots/9.jpg"
},
cio2 = {
parent: cdo,
HTMLclass: 'gray',
text:{
name: "Erica Reel",
title: "Chief Customer Officer"
},
link: {
href: "http://www.google.com"
},
image: "../headshots/10.jpg"
},
ciso2 = {
parent: cbo,
HTMLclass: 'blue',
text:{
name: "Alice Lopez",
title: "Chief Communications Officer"
},
image: "../headshots/7.jpg"
},
ciso3 = {
parent: cbo,
HTMLclass: 'blue',
text:{
name: "Mary Johnson",
title: "Chief Brand Officer"
},
image: "../headshots/4.jpg"
},
ciso4 = {
parent: cbo,
HTMLclass: 'blue',
text:{
name: "Kirk Douglas",
title: "Chief Business Development Officer"
},
image: "../headshots/11.jpg"
},
chart_config = [
config,
ceo,cto,cbo,
cdo,cio,ciso,
cio2,ciso2,ciso3,ciso4
];
// Antoher approach, same result
// JSON approach
/*
var chart_config = {
chart: {
container: "#custom-colored",
nodeAlign: "BOTTOM",
connectors: {
type: 'step'
},
node: {
HTMLclass: 'nodeExample1'
}
},
nodeStructure: {
text: {
name: "Mark Hill",
title: "Chief executive officer",
contact: "Tel: 01 213 123 134",
},
image: "../headshots/2.jpg",
children: [
{
text:{
name: "Joe Linux",
title: "Chief Technology Officer",
},
image: "../headshots/1.jpg",
HTMLclass: 'light-gray',
children: [
{
text:{
name: "Ron Blomquist",
title: "Chief Information Security Officer"
},
HTMLclass: 'light-gray',
image: "../headshots/8.jpg"
},
{
text:{
name: "Michael Rubin",
title: "Chief Innovation Officer",
contact: "we@aregreat.com"
},
HTMLclass: 'light-gray',
image: "../headshots/9.jpg"
}
]
},
{
childrenDropLevel: 2,
text:{
name: "Linda May",
title: "Chief Business Officer",
},
HTMLclass: 'blue',
image: "../headshots/5.jpg",
children: [
{
parent: cbo,
text:{
name: "Alice Lopez",
title: "Chief Communications Officer"
},
HTMLclass: 'blue',
image: "../headshots/7.jpg"
},
{
text:{
name: "Mary Johnson",
title: "Chief Brand Officer"
},
HTMLclass: 'blue',
image: "../headshots/4.jpg"
},
{
text:{
name: "Kirk Douglas",
title: "Chief Business Development Officer"
},
HTMLclass: 'blue',
image: "../headshots/11.jpg"
}
]
},
{
text:{
name: "John Green",
title: "Chief accounting officer",
contact: "Tel: 01 213 123 134",
},
HTMLclass: 'gray',
image: "../headshots/6.jpg",
children: [
{
text:{
name: "Erica Reel",
title: "Chief Customer Officer"
},
link: {
href: "http://www.google.com"
},
HTMLclass: 'gray',
image: "../headshots/10.jpg"
}
]
}
]
}
};
*/
@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<title> Custom colored example </title>
<link rel="stylesheet" href="../../Treant.css">
<link rel="stylesheet" href="custom-colored.css">
</head>
<body>
<div class="chart" id="custom-colored"> --@-- </div>
<script src="../../vendor/raphael.js"></script>
<script src="../../Treant.js"></script>
<script src="custom-colored.js"></script>
<script>
new Treant( chart_config );
</script>
</body>
</html>
@@ -0,0 +1,25 @@
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; }
table { border-collapse:collapse; border-spacing:0; }
fieldset,img { border:0; }
address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; }
caption,th { text-align:left; }
h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
q:before,q:after { content:''; }
abbr,acronym { border:0; }
body { background: #fff; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; }
/* optional Container STYLES */
.chart { height: 600px; width: 900px; margin: 5px; margin: 15px auto; border: 3px solid #DDD; border-radius: 3px; }
.evolution-tree {
padding: 2px;
width: 40px; height: 40px;
border-radius: 3px;
font-size: 10px;
}
.evolution-tree .node-name { text-align: center; position: absolute; width: 88px; left: -50%; }
.evolution-tree img { margin-right: 10px; float: none !important; }
.evolution-tree.the-parent { border-radius: 50%; background-color: #000; width: 3px; height: 3px; }
.evolution-tree.the-parent .node-name { width: auto; margin-top: -7px; text-indent: 12px; font-weight: bold; }
@@ -0,0 +1,263 @@
var tree_structure = {
chart: {
container: "#OrganiseChart6",
levelSeparation: 25,
siblingSeparation: 70,
subTeeSeparation: 70,
nodeAlign: "BOTTOM",
scrollbar: "fancy",
padding: 35,
node: { HTMLclass: "evolution-tree" },
connectors: {
type: "curve",
style: {
"stroke-width": 2,
"stroke-linecap": "round",
"stroke": "#ccc"
}
}
},
nodeStructure: {
text: { name: "LIFE" },
HTMLclass: "the-parent",
children: [
{
text: { name: "true bacteria" },
image: "img/truebacteria.png"
},
{
pseudo: true,
children: [
{
text: { name: "archea bacteria" },
image: "img/archaebacteria.png"
},
{
text: { name: "EUKARYOTES" },
HTMLclass: "the-parent",
children: [
{
text: { name: "protocists" },
image: "img/protoctis.png"
},
{
pseudo: true,
children: [
{
text: { name: "PLANTS" },
HTMLclass: "the-parent",
children: [
{
pseudo: true,
children: [
{
pseudo: true,
children: [
{
pseudo: true,
children: [
{
text: { name: "flowering seed plants" },
image: "img/cvijece2.png"
},
{
text: { name: "non-flowering seed plants" },
image: "img/ne_cvijece.png"
}
]
},
{
text: { name: "ferns and fern allies" },
image: "img/ferns.png"
}
]
},
{
text: { name: "mosses and allies" },
image: "img/mosses.png"
}
]
},
{
text: { name: "green algae" },
image: "img/greenalgae.png"
}
]
},
{
pseudo: true,
children: [
{
text: { name: "fungi and lichens" },
image: "img/fungi.png"
},
{
text: { name: "ANIMALS" },
HTMLclass: "the-parent",
children: [
{
text: { name: "sponges" },
image: "img/spuzva.png"
},
{
pseudo: true,
children: [
{
text: { name: "cnidarians" },
image: "img/cnidarians.png"
},
{
pseudo: true,
childrenDropLevel: 1,
children: [
{
pseudo: true,
children: [
{
text: { name: "echinoderms" },
image: "img/zvezda.png"
},
{
text: { name: "VERTEBRATES" },
HTMLclass: "the-parent",
children: [
{
text: { name: "cartilaginous fish" },
image: "img/cartilaginousfish.png"
},
{
text: { name: "bony fish" },
image: "img/bonyfish.png"
},
{
text: { name: "TETRAPODS" },
HTMLclass: "the-parent",
children: [
{
text: { name: "amphibians" },
image: "img/zaba.png"
},
{
text: { name: "AMNIOTES" },
HTMLclass: "the-parent",
children: [
{
pseudo: true,
children: [
{
text: { name: "turtles" },
image: "img/kornjaca.png"
},
{
pseudo: true,
children: [
{
text: { name: "snakes and lizards" },
image: "img/zmijurina.png"
},
{
text: { name: "crocodiles and birds" },
image: "img/ptica.png"
}
]
}
]
},
{
text: { name: "mammals" },
image: "img/slon.png"
}
]
}
]
}
]
}
]
},
{
text: { name: "ARTHROPODS" },
HTMLclass: "the-parent",
children: [
{
text: { name: "chelicerates" },
image: "img/chelirates.png"
},
{
pseudo: true,
stackChildren: true,
children: [
{
text: { name: "crustaceans" },
image: "img/rak.png"
},
{
text: { name: "insects and myriapods" },
image: "img/insekti.png"
}
]
}
]
},
{
pseudo: true,
children: [
{
text: { name: "flatworms" },
image: "img/flatare.png"
},
{
text: { name: "lophophorates" },
image: "img/lophoprates.png"
}
]
},
{
pseudo: true,
childrenDropLevel: 1,
stackChildren: true,
children: [
{
text: { name: "rotifers" },
image: "img/rotfiers.png"
},
{
text: { name: "roundworms" },
image: "img/roundworms.png"
}
]
},
{
pseudo: true,
childrenDropLevel: 1,
stackChildren: true,
children: [
{
text: { name: "mollusks" },
image: "img/mosculs.png"
},
{
text: { name: "segmented worms" },
image: "img/segmentedworms.png"
}
]
}
]
}
]
}
]
}
]
}
]
}
]
}
]
}
]
}
};
Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 870 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 792 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 851 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 531 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 637 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 881 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 550 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 674 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 938 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 545 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 928 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 853 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 893 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 647 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 775 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 846 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

@@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<title> Evolution tree example </title>
<link rel="stylesheet" href="../../Treant.css">
<link rel="stylesheet" href="example6.css">
<link rel="stylesheet" href="../../vendor/perfect-scrollbar/perfect-scrollbar.css">
</head>
<body>
<div class="chart" id="OrganiseChart6"></div>
<script src="../../vendor/raphael.js"></script>
<script src="../../Treant.js"></script>
<script src="../../vendor/jquery.min.js"></script>
<script src="../../vendor/perfect-scrollbar/jquery.mousewheel.js"></script>
<script src="../../vendor/perfect-scrollbar/perfect-scrollbar.js"></script>
<script src="example6.js"></script>
<script>
new Treant( tree_structure );
</script>
</body>
</html>
Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

+22
View File
@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<title> Chart example 1 </title>
<link rel="stylesheet" href="../../Treant.css">
<link rel="stylesheet" href="no-parent.css">
</head>
<body>
<div class="chart" id="OrganiseChart1"></div>
<script src="../../vendor/raphael.js"></script>
<script src="../../Treant.js"></script>
<script src="no-parent.js"></script>
<script>
new Treant(ALTERNATIVE);
</script>
</body>
</html>
+31
View File
@@ -0,0 +1,31 @@
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; }
table { border-collapse:collapse; border-spacing:0; }
fieldset,img { border:0; }
address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; }
caption,th { text-align:left; }
h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
q:before,q:after { content:''; }
abbr,acronym { border:0; }
body { background: #fff; }
/* optional Container STYLES */
.chart { height: 670px; margin: 5px; width: 900px; }
.Treant > .node { }
.Treant > p { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: bold; font-size: 12px; }
.node-name { font-weight: bold; font-size: 16px;}
.nodeExample1 {
padding: 10px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #ffffff;
border: 1px solid #000;
width: 200px;
font-family: Tahoma;
font-size: 12px;
}
.nodeExample1 img {
margin-right: 10px;
}
+117
View File
@@ -0,0 +1,117 @@
var config = {
container: "#OrganiseChart1",
rootOrientation: 'NORTH', // NORTH || EAST || WEST || SOUTH
hideRootNode: true,
// levelSeparation: 30,
siblingSeparation: 40,
subTeeSeparation: 30,
connectors: {
type: 'curve'
},
node: {
HTMLclass: 'nodeExample1'
}
},
root = {},
cto = {
parent: root,
text:{
name: "Joe Linux",
title: "Board member",
contact: "email: we@aregreat.com"
},
stackChildren: true,
HTMLid: "coo"
},
cbo = {
parent: root,
stackChildren: true,
text:{
name: "Linda May",
title: "Board member",
contact: "email: we@aregreat.com"
},
HTMLid: "cbo"
},
cdo = {
parent: root,
text:{
name: "John Green",
title: "Board member, CEO",
contact: "email: we@aregreat.com"
},
HTMLid: "cdo"
},
cio = {
parent: cto,
text:{
name: "Ron Blomquist",
title: "Chief Information Security Officer",
contact: "email: we@aregreat.com"
},
HTMLid: "cio"
},
ciso = {
parent: cto,
text:{
name: "Michael Rubin",
title: "Chief Innovation Officer",
contact: "email: we@aregreat.com"
},
HTMLid: "ciso"
},
cio2 = {
parent: cdo,
text:{
name: "Erica Reel",
title: "Chief Customer Officer",
contact: "email: we@aregreat.com"
},
link: {
href: "www.google.com"
},
HTMLid: "cio2"
},
ciso2 = {
parent: cbo,
text:{
name: "Alice Lopez",
title: "Chief Communications Officer",
contact: "email: we@aregreat.com"
},
HTMLid: "ciso2"
},
ciso3 = {
parent: cbo,
text:{
name: "Mary Johnson",
title: "Chief Brand Officer",
contact: "email: we@aregreat.com"
},
HTMLid: "ciso2"
},
ciso4 = {
parent: cbo,
text:{
name: "Kirk Douglas",
title: "Chief Business Development Officer",
contact: "email: we@aregreat.com"
},
HTMLid: "ciso2"
}
ALTERNATIVE = [
config,
root,
cto,
cbo,
cdo,
cio,
ciso,
cio2,
ciso2,
ciso3,
ciso4
];
@@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<title> Chart example 1 </title>
<link rel="stylesheet" href="../../Treant.css">
<link rel="stylesheet" href="simple-scrollbar.css">
<link rel="stylesheet" href="../../vendor/perfect-scrollbar/perfect-scrollbar.css">
</head>
<body>
<div class="chart" id="OrganiseChart1"> --@-- </div>
<script src="../../vendor/raphael.js"></script>
<script src="../../Treant.js"></script>
<script src="../../vendor/jquery.min.js"></script>
<script src="../../vendor/perfect-scrollbar/jquery.mousewheel.js"></script>
<script src="../../vendor/perfect-scrollbar/perfect-scrollbar.js"></script>
<script src="simple-scrollbar.js"></script>
<script>
new Treant( ALTERNATIVE );
</script>
</body>
</html>
@@ -0,0 +1,31 @@
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; }
table { border-collapse:collapse; border-spacing:0; }
fieldset,img { border:0; }
address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; }
caption,th { text-align:left; }
h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
q:before,q:after { content:''; }
abbr,acronym { border:0; }
body { background: #fff; }
/* optional Container STYLES */
.chart { height: 400px; margin: 5px; width: 500px; margin: 5px auto; border: 3px solid #DDD; border-radius: 3px; }
.Treant > .node { }
.Treant > p { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: bold; font-size: 12px; }
.node-name { font-weight: bold;}
.nodeExample1 {
padding: 2px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #ffffff;
border: 1px solid #000;
width: 200px;
font-family: Tahoma;
font-size: 12px;
}
.nodeExample1 img {
margin-right: 10px;
}
@@ -0,0 +1,127 @@
var config = {
container: "#OrganiseChart1",
rootOrientation: 'NORTH', // NORTH || EAST || WEST || SOUTH
scrollbar: "fancy",
// levelSeparation: 30,
siblingSeparation: 20,
subTeeSeparation: 60,
connectors: {
type: 'step'
},
node: {
HTMLclass: 'nodeExample1'
}
},
ceo = {
text: {
name: "Mark Hill",
title: "Chief executive officer",
contact: "Tel: 01 213 123 134",
},
image: "../headshots/2.jpg",
HTMLid: "ceo"
},
cto = {
parent: ceo,
text:{
name: "Joe Linux",
title: "Chief Technology Officer",
},
stackChildren: true,
image: "../headshots/1.jpg",
HTMLid: "coo"
},
cbo = {
parent: ceo,
stackChildren: true,
text:{
name: "Linda May",
title: "Chief Business Officer",
},
image: "../headshots/5.jpg",
HTMLid: "cbo"
},
cdo = {
parent: ceo,
text:{
name: "John Green",
title: "Chief accounting officer",
contact: "Tel: 01 213 123 134",
},
image: "../headshots/6.jpg",
HTMLid: "cdo"
},
cio = {
parent: cto,
text:{
name: "Ron Blomquist",
title: "Chief Information Security Officer"
},
image: "../headshots/8.jpg",
HTMLid: "cio"
},
ciso = {
parent: cto,
text:{
name: "Michael Rubin",
title: "Chief Innovation Officer",
contact: "we@aregreat.com"
},
image: "../headshots/9.jpg",
HTMLid: "ciso"
},
cio2 = {
parent: cdo,
text:{
name: "Erica Reel",
title: "Chief Customer Officer"
},
link: {
href: "www.google.com"
},
image: "../headshots/10.jpg",
HTMLid: "cio2"
},
ciso2 = {
parent: cbo,
text:{
name: "Alice Lopez",
title: "Chief Communications Officer"
},
image: "../headshots/7.jpg",
HTMLid: "ciso2"
},
ciso3 = {
parent: cbo,
text:{
name: "Mary Johnson",
title: "Chief Brand Officer"
},
image: "../headshots/4.jpg",
HTMLid: "ciso2"
},
ciso4 = {
parent: cbo,
text:{
name: "Kirk Douglas",
title: "Chief Business Development Officer"
},
image: "../headshots/11.jpg",
HTMLid: "ciso2"
}
ALTERNATIVE = [
config,
ceo,
cto,
cbo,
cdo,
cio,
ciso,
cio2,
ciso2,
ciso3,
ciso4
];
+24
View File
@@ -0,0 +1,24 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<title> Chart emulation </title>
<link rel="stylesheet" href="../../Treant.css">
<link rel="stylesheet" href="super-simple.css">
</head>
<body>
<div class="chart" id="OrganiseChart-simple">
</div>
<script src="../../vendor/raphael.js"></script>
<script src="../../Treant.js"></script>
<script src="super-simple.js"></script>
<script>
new Treant( simple_chart_config );
</script>
</body>
</html>
@@ -0,0 +1,9 @@
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; }
body { background: #fff; }
/* optional Container STYLES */
.chart { height: 159px; width: 332px; margin: 5px; margin: 5px auto; border: 3px solid #DDD; border-radius: 3px; }
.node { color: #9CB5ED; border: 2px solid #C8C8C8; border-radius: 3px; }
.node p { font-size: 20px; line-height: 20px; height: 20px; font-weight: bold; padding: 3px; margin: 0; }
@@ -0,0 +1,43 @@
var simple_chart_config = {
chart: {
container: "#OrganiseChart-simple"
},
nodeStructure: {
text: { name: "Parent node" },
children: [
{
text: { name: "First child" }
},
{
text: { name: "Second child" }
}
]
}
};
// // // // // // // // // // // // // // // // // // // // // // // //
var config = {
container: "#OrganiseChart-simple"
};
var parent_node = {
text: { name: "Parent node" }
};
var first_child = {
parent: parent_node,
text: { name: "First child" }
};
var second_child = {
parent: parent_node,
text: { name: "Second child" }
};
var simple_chart_config = [
config, parent_node,
first_child, second_child
];
+36
View File
@@ -0,0 +1,36 @@
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; }
table { border-collapse:collapse; border-spacing:0; }
fieldset,img { border:0; }
address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; }
caption,th { text-align:left; }
h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
q:before,q:after { content:''; }
abbr,acronym { border:0; }
body { background: #fff; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; }
/* optional Container STYLES */
.chart { height: 600px; width: 900px; margin: 5px; margin: 15px auto; border: 3px solid #DDD; border-radius: 3px; }
.tennis-draw {
font-size: 10px;
width: 100px;
}
.tennis-draw.winner { height: 38px; }
.tennis-draw.winner:hover { background: url('trophy.png') right 0 no-repeat; }
.tennis-draw.winner .node-name { padding-left: 10px; margin-top: 1px; display: block; }
.tennis-draw .node-name { padding: 2px; white-space: pre; color: #00AFF0; }
.tennis-draw .node-desc { padding: 2px; color: #999; }
.tennis-draw.first-draw .node-title,
.tennis-draw.first-draw .node-name,
.tennis-draw.first-draw img { position: absolute; top: -8px; }
.tennis-draw.first-draw:hover img { width: 20px; top: -12px; }
.tennis-draw.first-draw { width: 165px; height: 20px; }
.tennis-draw.first-draw img { margin: 3px 4px 0 0; left: 25px; }
.tennis-draw.first-draw .node-title { margin-top: 3px; }
.tennis-draw.first-draw .node-name { width: 113px; padding-left: 50px; }
.tennis-draw.first-draw.bye .node-name { color: #999; }
+272
View File
@@ -0,0 +1,272 @@
// source:
// http://www.atpworldtour.com/Share/Event-Draws.aspx?EventId=410&Year=2013
var tree_structure = {
chart: {
container: "#OrganiseChart6",
levelSeparation: 20,
siblingSeparation: 15,
subTeeSeparation: 15,
rootOrientation: "EAST",
node: {
HTMLclass: "tennis-draw",
drawLineThrough: true
},
connectors: {
type: "straight",
style: {
"stroke-width": 2,
"stroke": "#ccc"
}
}
},
nodeStructure: {
text: {
name: {val: "Djokovic, Novak", href: "http://www.atpworldtour.com/Tennis/Players/Top-Players/Novak-Djokovic.aspx"}
},
HTMLclass: "winner",
children: [
{
text: {
name: "Djokovic, Novak",
desc: "4-6, 6-2, 6-2"
},
children: [
{
text: {
name: "Djokovic, Novak",
desc: "4-6, 6-1, 6-4"
},
children: [
{
text: {
name: "Djokovic, Novak",
desc: "4-6, 6-1, 6-4"
},
children: [
{
text: {
name: "Djokovic, Novak",
title: 1
},
image: "flags/srb.jpg",
HTMLclass: "first-draw",
},
{
text: {
name: "Bye",
title: 2
},
HTMLclass: "first-draw bye"
}
]
},
{
text: {
name: "Youzhny, Mikhail",
desc: "6-4, 6-0"
},
children: [
{
text: {
name: "Youzhny, Mikhail",
title: 3
},
image: "flags/rus.jpg",
HTMLclass: "first-draw"
},
{
text: {
name: "Gimeno-Traver, Daniel",
title: 4
},
image: "flags/esp.jpg",
HTMLclass: "first-draw"
}
]
}
]
},
{
text: {
name: "Monaco, Juan",
desc: "6-0, 3-6, 6-3"
},
children: [
{
text: {
name: "Gulbis, Ernests",
desc: "4-6, 6-2, 6-3"
},
children: [
{
text: {
name: "Gulbis, Ernests",
title: 5
},
image: "flags/lat.jpg",
HTMLclass: "first-draw"
},
{
text: {
name: "Isner, John",
title: 6
},
image: "flags/usa.jpg",
HTMLclass: "first-draw"
}
]
},
{
text: {
name: "Monaco, Juan",
desc: "6-4, 6-0"
},
children: [
{
text: {
name: "Klizan, Martin",
title: 7
},
image: "flags/slo.jpg",
HTMLclass: "first-draw"
},
{
text: {
name: "Monaco, Juan",
title: 8
},
image: "flags/arg.jpg",
HTMLclass: "first-draw"
}
]
}
]
}
]
},
{
text: {
name: "Nieminen, Jarkko",
desc: "6-3, 1-6, 7-6(3)"
},
children: [
{
text: {
name: "Nieminen, Jarkko",
desc: "4-6, 6-1, 6-4"
},
children: [
{
text: {
name: "Raonic, Milos",
desc: "6-1, 6-4"
},
children: [
{
text: {
name: "Raonic, Milos",
title: 9
},
image: "flags/can.jpg",
HTMLclass: "first-draw"
},
{
text: {
name: "Benneteau, Julien",
title: 10
},
image: "flags/fra.jpg",
HTMLclass: "first-draw"
}
]
},
{
text: {
name: "Nieminen, Jarkko",
desc: "6-1, 6-2"
},
children: [
{
text: {
name: "Nieminen, Jarkko",
title: 11
},
image: "flags/fin.jpg",
HTMLclass: "first-draw"
},
{
text: {
name: "Troicki, Viktor",
title: 12
},
image: "flags/srb.jpg",
HTMLclass: "first-draw"
}
]
}
]
},
{
text: {
name: "Del Potro, Juan Martin",
desc: "6-2, 6-4"
},
children: [
{
text: {
name: "Dolgopolov, Alexandr",
desc: "4-6, 6-2, 6-3"
},
children: [
{
text: {
name: "Dolgopolov, Alexandr",
title: 13
},
image: "flags/ukr.jpg",
HTMLclass: "first-draw"
},
{
text: {
name: "Tomic, Bernard",
title: 14
},
image: "flags/aus.jpg",
HTMLclass: "first-draw"
}
]
},
{
text: {
name: "Del Potro, Juan Martin",
desc: "6-4, 6-0"
},
children: [
{
text: {
name: "Bye",
title: 15
},
HTMLclass: "first-draw bye"
},
{
text: {
name: "Del Potro, Juan Martin",
title: 16
},
image: "flags/arg.jpg",
HTMLclass: "first-draw"
}
]
}
]
}
]
}
]
}
};
Binary file not shown.

After

Width:  |  Height:  |  Size: 490 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 519 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 483 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 469 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 478 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 475 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 461 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 482 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 476 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 445 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 442 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 489 B

+22
View File
@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<title> Tennis draw example </title>
<link rel="stylesheet" href="../../Treant.css">
<link rel="stylesheet" href="example7.css">
</head>
<body>
<div class="chart" id="OrganiseChart6"></div>
<script src="../../vendor/raphael.js"></script>
<script src="../../Treant.js"></script>
<script src="example7.js"></script>
<script>
new Treant( tree_structure );
</script>
</body>
</html>
Binary file not shown.

After

Width:  |  Height:  |  Size: 637 B

@@ -0,0 +1,420 @@
// img_examples/example4
var example1 = {
chart: {
container: "#OrganiseChart1",
levelSeparation: 25,
siblingSeparation: 15,
subTeeSeparation: 15
},
nodeStructure: {
text: {
name: "C1"
},
children: [
{
text:{
name: "c1_C1"
},
stackChildren: true,
pseudo: true,
children: [
{
text:{
name: "c2_C1C1"
},
link: {
href: "http://www.google.com"
// target defaults to "_self"
}
},
{
innerHTML: "<ul> \
<li> test </li> \
<li> test </li> \
</ul><img src='slika-manja.jpg' />"
},
{
link: {
href: "http://www.google.com",
target: "_blank"
},
text:{
name: "c3_C1C1"
}
},
{
link: {
href: "http://www.google.com",
target: "_blank"
},
text:{
name: "c3_C1C1"
}
}
]
},
{
text:{
name: "c2_C1"
},
connectors: {
type: 'step',
style: {
'stroke': 'white',
'arrow-end': 'block-wide-long',
'arrow-start': 'block-wide-long',
'stroke-width': 2
}
},
children: [
{
HTMLclass: 'cyan',
text: {
name: "c1_C2C1"
},
connectors: {
type: 'curve',
style: {
'stroke': 'white',
'arrow-end': 'block-wide-long',
'stroke-width': 2
}
},
children: [
{
text:{
name: "c1_C1C2C1"
}
},
{
text:{
name: "c2_C1C2C1"
}
},
{
text:{
name: "c3_C1C2C1"
}
}
]
}
]
},
{
text:{
name: "c3_C1"
},
children: [
{
text:{
name: "c1_C3C1"
},
HTMLid: "NodeID"
},
{
text:{
name: "c2_C3C1"
}
}
]
}
]
}
};
var example1b = {
chart: {
container: "#OrganiseChart1"
// nodeAlign: "BOTTOM"
},
nodeStructure: {
text: {
name: "C1"
},
children: [
{
text:{
name: "c2_C1"
},
connectors: {
type: 'step',
style: {
'stroke': 'white',
'arrow-end': 'block-wide-long',
'arrow-start': 'block-wide-long',
'stroke-width': 2
}
},
children: [
{
HTMLclass: 'cyan',
text: {
name: "c1_C2C1"
},
connectors: {
type: 'curve',
style: {
'stroke': 'white',
'arrow-end': 'block-wide-long',
'stroke-width': 2
}
},
children: [
{
text:{
name: "c1_C1C2C1"
}
},
{
text:{
name: "c2_C1C2C1"
}
},
{
text:{
name: "c3_C1C2C1"
},
stackChildren: true,
children: [
{
text:{
name: "c1_C1C2C1"
}
},
{
text:{
name: "c2_C1C2C1"
}
}
]
}
]
}
]
},
{
text:{
name: "c1_C1"
},
children: [
{
text:{
name: "c1_C1"
},
children: [
{
text:{
name: "c1_C1"
},
stackChildren: true,
children: [
{
text:{
name: "c2_C1C1"
},
link: {
href: "http://www.google.com"
// target defaults to "_self"
}
},
{
innerHTML: "<ul> \
<li> test </li> \
<li> test </li> \
</ul><img src='slika-manja.jpg' />"
},
{
link: {
href: "http://www.google.com",
target: "_blank"
},
text:{
name: "c3_C1C1"
}
},
{
link: {
href: "http://www.google.com",
target: "_blank"
},
text:{
name: "c3_C1C1"
}
}
]
}
]
}
]
},
{
text:{
name: "c3_C1"
},
children: [
{
text:{
name: "c1_C3C1"
},
HTMLid: "NodeID"
},
{
text:{
name: "c2_C3C1"
}
}
]
}
]
}
};
// #####################################
// ########### ALTERNATIVE CONFIG ######
// #####################################
var config = {
container: "#OrganiseChart5"
//rootOrientation: 'NORTH', // NORTH || EAST || WEST || SOUTH
// levelSeparation: 30,
// siblingSeparation: 30,
// subTeeSeparation: 30,
},
rootNode = {
text: {
name: "C1"
}
},
node11 = {
parent: rootNode,
text:{
name: "c1_C1"
},
stackChildren: true
},
node12 = {
parent: rootNode,
text:{
name: "c1_C2"
},
childrenDropLevel: 1
},
node13 = {
parent: rootNode,
text:{
name: "c1_C3"
}
// stackChildren: true,
},
node111 = {
parent: node11,
innerHTML: "<ul> \
<li> test </li> \
<li> test </li> \
</ul>"
},
node112 = {
parent: node11,
text:{
name: "c2_C1C1"
},
link: {
href: "http://www.google.com"
// target defaults to "_self"
}
},
node113 = {
parent: node11,
link: {
href: "http://www.google.com",
target: "_blank"
},
text:{
name: "c3_C1C1",
HTMLclass: 'extra-title'
}
},
node121 = {
parent: node12,
HTMLclass: 'cyan',
text: {
name: "c1_C2C1"
},
stackChildren: true,
connectors: {
type: 'curve',
style: {
'stroke': 'white',
'arrow-end': 'block-wide-long',
'stroke-width': 2
}
}
},
node131 = {
parent: node13,
text:{
name: "c1_C3C1"
},
HTMLid: "NodeID"
},
node132 = {
parent: node13,
text:{
name: "c2_C3C1"
}
},
node1211 = {
parent: node121,
image: "image.png",
text:{
name: "c1_C1C2C1 jos malo textaaaaa"
}
},
node1212 = {
parent: node121,
text:{
name: "c2_C1C2C1"
}
},
node1213 = {
parent: node121,
text:{
name: "c3_C1C2C1"
}
},
ALTERNATIVE = [
config,
rootNode,
node11,
node12,
node13,
node111,
node112,
node113,
node121,
node131,
node132,
node1211,
node1212,
node1213
];
Binary file not shown.

After

Width:  |  Height:  |  Size: 543 B

Some files were not shown because too many files have changed in this diff Show More