Skip to content

S
Satpam
Commit 61d58f25 by Andre Sihombing
Options

Merge branch 'feature_xdev' of https://gitlab.del.ac.id/itd-x/cis-lite into ubux_feature

parents e2949847 4beba5ad
Showing with 2038 additions and 0 deletions
backend/config/params.php
...@@ -25,5 +25,47 @@ return [ ...@@ -25,5 +25,47 @@ return [
'icon' => 'fa fa-dashboard', 'icon' => 'fa fa-dashboard',
'url' => '/test' 'url' => '/test'
], ],
[
'label' => 'Institusi',
'icon' => 'fa fa-institution',
'childs' => [
[
'label' => 'Instansi & Jabatan',
'url' => '/inst/inst-manager',
'icon' => 'fa fa-building-o',
],
[
'label' => 'Unit',
'url' => '/inst/unit',
'icon' => 'fa fa-group',
],
[
'label' => 'Manajemen Pejabat',
'url' => '/inst/pejabat',
'icon' => 'fa fa-certificate',
],
[
'label' => 'Tree View',
'url' => '/inst/inst-manager/tree-view',
'icon' => 'fa fa-sitemap',
],
]
],
[
'label' => 'Developer Tools',
'icon' => 'fa fa-wrench',
'childs' => [
[
'label' => 'Gii',
'url' => '/gii',
'icon' => 'fa fa-bug',
],
[
'label' => 'UX Patterns',
'url' => '/xdev/ux/patterns',
'icon' => 'fa fa-desktop',
]
]
],
], ],
]; ];
backend/modules/inst/Inst.php 0 → 100644
<?php
namespace backend\modules\inst;
class Inst extends \yii\base\Module
{
public $controllerNamespace = 'backend\modules\inst\controllers';
public function init()
{
parent::init();
// custom initialization code goes here
}
}
backend/modules/inst/assets/InstAsset.php 0 → 100644
<?php
namespace backend\modules\inst\assets;
use yii\web\AssetBundle;
class InstAsset extends AssetBundle {
public $sourcePath = '@backend/modules/inst/assets/web';
public $css = ['Treant/Treant.css', 'css/treeView.css', 'css/strukturs.css', 'css/pejabat.css'];
public $js = ['Treant/Treant.js', 'Treant/vendor/raphael.js'];
public $depends = [
'backend\themes\v2\assets\V2Asset'
];
public $publishOptions = [
'forceCopy' => true
];
}
\ No newline at end of file
backend/modules/inst/assets/web/Treant/LICENSE 0 → 100644
The MIT License (MIT) Copyright © 2016 Fran Peručić
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
backend/modules/inst/assets/web/Treant/README.md 0 → 100644
<pre>
_______ _ _
|__ __| | | (_)
| |_ __ ___ __ _ _ __ | |_ ______ _ ___
| | '__/ _ \/ _` | '_ \| __|______| / __|
| | | | __/ (_| | | | | |_ | \__ \
|_|_| \___|\__,_|_| |_|\__| | |___/
_/ |
|__/
</pre>
Treant-js is an SVG based JS library for drawing tree diagrams.
It relies on Raphael for handling SVG and animations.
For Docs, Examples, and everything else see:
http://fperucic.github.io/treant-js
backend/modules/inst/assets/web/Treant/Treant.css 0 → 100644
/* 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; }
\ No newline at end of file
backend/modules/inst/assets/web/Treant/build 0 → 100644
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
backend/modules/inst/assets/web/Treant/examples/basic-example/basic-example.css 0 → 100644
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;
}
\ No newline at end of file
backend/modules/inst/assets/web/Treant/examples/basic-example/basic-example.js 0 → 100644
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"
}
]
}
]
}
};
*/
\ No newline at end of file
backend/modules/inst/assets/web/Treant/examples/basic-example/index.html 0 → 100644
<!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>
\ No newline at end of file
backend/modules/inst/assets/web/Treant/examples/collapsable/collapsable.css 0 → 100644
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; }
\ No newline at end of file
backend/modules/inst/assets/web/Treant/examples/collapsable/collapsable.js 0 → 100644
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];
*/
\ No newline at end of file
backend/modules/inst/assets/web/Treant/examples/collapsable/index.html 0 → 100644
<!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 );
console.log(tree);
</script>
</body>
</html>
\ No newline at end of file
backend/modules/inst/assets/web/Treant/examples/comments/example8.css 0 → 100644
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; }
\ No newline at end of file
backend/modules/inst/assets/web/Treant/examples/comments/example8.js 0 → 100644
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"
}
]
}
]
}
};
*/
backend/modules/inst/assets/web/Treant/examples/comments/index.html 0 → 100644
<!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>
\ No newline at end of file
backend/modules/inst/assets/web/Treant/examples/connectors/connectors.css 0 → 100644
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);
}
\ No newline at end of file
backend/modules/inst/assets/web/Treant/examples/connectors/connectors.js 0 → 100644
// 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"}
}
]
}
]
}
};
backend/modules/inst/assets/web/Treant/examples/connectors/index.html 0 → 100644
<!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>
\ No newline at end of file
backend/modules/inst/assets/web/Treant/examples/custom-color-plus-scrollbar/custom-color-plus-scrollbar.css 0 → 100644
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;
}
\ No newline at end of file
backend/modules/inst/assets/web/Treant/examples/custom-color-plus-scrollbar/custom-color-plus-scrollbar.js 0 → 100644
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
];
\ No newline at end of file
backend/modules/inst/assets/web/Treant/examples/custom-color-plus-scrollbar/index.html 0 → 100644
<!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>
\ No newline at end of file
backend/modules/inst/assets/web/Treant/examples/custom-colored/custom-colored.css 0 → 100644
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;
}
\ No newline at end of file
backend/modules/inst/assets/web/Treant/examples/custom-colored/custom-colored.js 0 → 100644
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"
}
]
}
]
}
};
*/
\ No newline at end of file
backend/modules/inst/assets/web/Treant/examples/custom-colored/index.html 0 → 100644
<!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>
\ No newline at end of file
backend/modules/inst/assets/web/Treant/examples/evolution-tree/example6.css 0 → 100644
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; }
\ No newline at end of file
backend/modules/inst/assets/web/Treant/examples/evolution-tree/index.html 0 → 100644
<!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>
\ No newline at end of file
backend/modules/inst/assets/web/Treant/examples/no-parent/index.html 0 → 100644
<!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>
\ No newline at end of file
backend/modules/inst/assets/web/Treant/examples/no-parent/no-parent.css 0 → 100644
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;
}
\ No newline at end of file
backend/modules/inst/assets/web/Treant/examples/no-parent/no-parent.js 0 → 100644
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
];
\ No newline at end of file
backend/modules/inst/assets/web/Treant/examples/simple-scrollbar/index.html 0 → 100644
<!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>
\ No newline at end of file
backend/modules/inst/assets/web/Treant/examples/simple-scrollbar/simple-scrollbar.css 0 → 100644
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;
}
\ No newline at end of file
backend/modules/inst/assets/web/Treant/examples/simple-scrollbar/simple-scrollbar.js 0 → 100644
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
];
\ No newline at end of file
backend/modules/inst/assets/web/Treant/examples/super-simple/index.html 0 → 100644
<!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>
\ No newline at end of file
backend/modules/inst/assets/web/Treant/examples/super-simple/super-simple.css 0 → 100644
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; }
\ No newline at end of file
backend/modules/inst/assets/web/Treant/examples/super-simple/super-simple.js 0 → 100644
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
];
backend/modules/inst/assets/web/Treant/examples/tennis-draw/example7.css 0 → 100644
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; }
backend/modules/inst/assets/web/Treant/examples/tennis-draw/index.html 0 → 100644
<!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>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment