diff options
| author | Pliable Pixels <pliablepixels@gmail.com> | 2017-09-27 12:42:48 -0400 |
|---|---|---|
| committer | Pliable Pixels <pliablepixels@gmail.com> | 2017-09-27 12:42:48 -0400 |
| commit | 210e8feae2fb4842bfb2de38666e6c41671fef3c (patch) | |
| tree | cbdafa34b1a6260bb20236d7e9de9eb1b690a1c5 /www/lib/vis/examples/timeline/other/usingReact.html | |
| parent | e7e7baeaad90229ccb3e0f45f4ebd77be7d79b14 (diff) | |
removed lib
Diffstat (limited to 'www/lib/vis/examples/timeline/other/usingReact.html')
| -rw-r--r-- | www/lib/vis/examples/timeline/other/usingReact.html | 123 |
1 files changed, 0 insertions, 123 deletions
diff --git a/www/lib/vis/examples/timeline/other/usingReact.html b/www/lib/vis/examples/timeline/other/usingReact.html deleted file mode 100644 index f6d1e1f7..00000000 --- a/www/lib/vis/examples/timeline/other/usingReact.html +++ /dev/null @@ -1,123 +0,0 @@ -<!DOCTYPE HTML> -<html> - <head> - <meta charset="utf-8"> - <title>React Components in templates</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://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script> - <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.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> - </div> - } - }) - - var ItemTemplate = React.createClass({ - render: function() { - var { item } = this.props; - return <div> - <label>{item.content}</label> - </div> - } - }) - - // specify options - var options = { - orientation: 'top', - maxHeight: 400, - start: new Date(), - end: new Date(1000*60*60*24 + (new Date()).valueOf()), - editable: true, - 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); - } - } - - - var VisTimeline = React.createClass({ - componentDidMount: function() { - return initTimeline(); - }, - render: function() { - return <div> - <h1>Vis timline with React</h1> - <h2>Using react components for items and 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> |