paco

2019-12-13 22:20:23 +00:00
parent 3c32a4b96c
commit 1a4d72f145
136 changed files with 7187 additions and 138 deletions
@@ -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 emulation </title>
+	<link rel="stylesheet" href="../../Treant.css">
+	<link rel="stylesheet" href="timeline.css">
+	
+</head>
+<body>
+	<div class="chart" id="OrganiseChart-simple"> 
+	</div>
+	
+    <script src="../../vendor/jquery.min.js"></script>
+    <script src="../../vendor/jquery.easing.js"></script>
+
+	<script src="../../vendor/raphael.js"></script>
+	<script src="../../Treant.js"></script>
+	<script src="timeline.js"></script>
+
+	<script>
+		new Treant( simple_chart_config );
+	</script>
+
+</body>
+</html>
@@ -0,0 +1,19 @@
+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: 400px; width: 900px; margin: 5px; margin: 5px auto; border: 3px solid #DDD; border-radius: 3px; }
+.node { color: #9CB5ED; border: 2px solid #C8C8C8; border-radius: 3px; background: #fff; transition: background 0.7s, color 0.7s; }
+.node p { font-size: 17px; line-height: 20px; height: 20px; font-weight: bold; padding: 3px; margin: 0; }
+
+.node.main-date { width: 10px; height: 10px; border-radius: 50%; }
+.node.main-date p.node-name { top: -15px; font-size: 15px; position: absolute; opacity: 0; z-index: -1; left: -30px; transition: top 1s, opacity 1s; }
+.node.main-date:hover p.node-name { opacity: 1; top: -25px; }
+
+.Treant .collapse-switch { width: 100%; height: 100%; border: none; }
+.Treant .node.collapsed { background-color: #D7F5FF; color: #827A7A; }
+.Treant .node.collapsed .collapse-switch { background: none; }
+
+.timeline .node-desc { position: absolute; left: -999px; width: 2000px; background: #665B57; height: 3px; padding: 0; z-index: -1; top: 3px; }
@@ -0,0 +1,71 @@
+
+var simple_chart_config = {
+	chart: {
+		container: "#OrganiseChart-simple",
+		hideRootNode: true,
+		connectors: {
+			type: 'step',
+			style: {
+				"arrow-end": "classic-wide-long",
+				"stroke-width": 2,
+				"stroke": "#665B57"
+			}
+		},
+		node: {
+			collapsable: true
+		},
+		animation: {
+			nodeAnimation: "easeOutBounce",
+			nodeSpeed: 700,
+			connectorsAnimation: "bounce",
+			connectorsSpeed: 700
+		}
+	},
+	
+	nodeStructure: {
+		text: { name: "Parent node" },
+		children: [
+			{	
+				HTMLclass: "timeline main-date",
+				text: { desc: "", name: "01.01.2014" },
+				children: [
+					{
+						text: { name: "Event 1" },
+					},
+					{
+						text: { name: "Event 2" }
+					}
+				]
+			},
+			{	
+				HTMLclass: "main-date",
+				text: { name: "12.02.2014" },
+				collapsed: true,
+				children: [
+					{
+						text: { name: "Event 1" }
+					},
+					{
+						text: { name: "Event 2" }
+					}
+				]
+			},
+			{
+				HTMLclass: "main-date",
+				text: { name: "23.02.2014" },
+				children: [
+					{
+						text: { name: "Event 1" }
+					},
+					{
+						text: { name: "Event 2" }
+					}
+				]
+			},
+			{
+				HTMLclass: "main-date",
+				text: { name: "03.06.2014" }
+			}
+		]
+	}
+};