From 06c264e5b627c320f2d7474b251b1ccaa285e04c Mon Sep 17 00:00:00 2001
From: Yotam Berkowitz <yotamberk@gmail.com>
Date: Sat, 22 Oct 2016 13:07:29 +0300
Subject: [PATCH] add react example

---
 examples/timeline/other/usingReact.html | 131 ++++++++++++++++++++++++
 1 file changed, 131 insertions(+)
 create mode 100644 examples/timeline/other/usingReact.html
diff --git a/examples/timeline/other/usingReact.html b/examples/timeline/other/usingReact.html
new file mode 100644
index 00000000..2e59d418
--- /dev/null
+++ b/examples/timeline/other/usingReact.html
@@ -0,0 +1,131 @@
+<!DOCTYPE HTML>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>React Hello World</title>
+  </head>
+  <body>
+
+    <div id='root'></div>
+    
+    <!--
+    For ease of use, we are including the React, ReactDOM and Babel CDN
+    builds to make getting started as fast as possible.
+    
+    In production, you'll want to instead look at using something 
+    like Gulp, Grunt or WebPack (my personal recommendation) 
+    to compile JSX into JavaScript. Also, check out:
+    http://facebook.github.io/react/docs/tooling-integration.html
+    -->
+    <script src="https://fb.me/react-15.0.1.js"></script>
+    <script src="https://fb.me/react-dom-15.0.1.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
+
+    <script src="../../../dist/vis.js"></script>
+    <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
+    
+    <!--
+    This is where you link to your React code. Can be .js or .jsx 
+    extension, doesn't really matter.
+    -->
+    <script type="text/babel">
+        var timeline;
+        
+        // create groups
+        var numberOfGroups = 25; 
+        var groups = new vis.DataSet()
+        for (var i = 0; i < numberOfGroups; i++) {
+            groups.add({
+              id: i,
+              content: 'Truck ' + i
+            })
+        }
+          
+        // create items
+        var numberOfItems = 1000;
+        var items = new vis.DataSet();
+        var itemsPerGroup = Math.round(numberOfItems/numberOfGroups);
+        for (var truck = 0; truck < numberOfGroups; truck++) {
+            var date = new Date();
+            for (var order = 0; order < itemsPerGroup; order++) {
+              date.setHours(date.getHours() +  4 * (Math.random() < 0.2));
+              var start = new Date(date);
+              date.setHours(date.getHours() + 2 + Math.floor(Math.random()*4));
+              var end = new Date(date);
+              items.add({
+                id: order + itemsPerGroup * truck,
+                group: truck,
+                start: start,
+                end: end,
+                content: 'Order ' + order
+              });
+            }
+        }
+
+        var GroupTemplate = React.createClass({
+          render: function() {
+            var { group } = this.props;
+            return <div>
+              <label>{group.content}</label>
+              <button>do stuff</button>
+            </div>
+          }
+        })
+
+        var ItemTemplate = React.createClass({
+          render: function() {
+            var { item } = this.props;
+            return <div>
+              <label>{item.content}</label>
+              <button>do stuff</button>
+            </div>
+          }
+        })
+
+        // specify options
+        var options = {
+          rtl: true,
+          stack: true,
+          maxHeight: 400,
+          start: new Date(),
+          end: new Date(1000*60*60*24 + (new Date()).valueOf()),
+          editable: true,
+          margin: {
+            item: 10, // minimal margin between items
+            axis: 5   // minimal margin between items and the axis
+          },
+          template: function (item, element) {
+            ReactDOM.unmountComponentAtNode(element);
+            return ReactDOM.render(<ItemTemplate item={item} />, element);
+          },
+          groupTemplate: function (group, element) {
+            ReactDOM.unmountComponentAtNode(element);
+            return ReactDOM.render(<GroupTemplate group={group} />, element);
+          },
+          orientation: 'top'
+        }
+     
+
+        var VisTimeline = React.createClass({
+            componentDidMount: function() {
+                initTimeline()
+            },
+            render: function() {
+                return <div>
+                    <h1>Vis timline with React</h1>
+                    <h2>Using react components for items ang group templates</h2>      
+
+                    <div id="mytimeline"></div>
+                </div>
+            }
+        });
+
+        function initTimeline() {
+            var container = document.getElementById('mytimeline');
+            timeline = new vis.Timeline(container, items, groups, options);
+        } 
+
+        ReactDOM.render(<VisTimeline />, document.getElementById('root'));
+    </script>
+  </body>
+</html>
\ No newline at end of file
