vis.js is a dynamic, browser-based visualization library
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

130 lines
4.2 KiB

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>React Hello World</title>
  6. </head>
  7. <body>
  8. <div id='root'></div>
  9. <!--
  10. For ease of use, we are including the React, ReactDOM and Babel CDN
  11. builds to make getting started as fast as possible.
  12. In production, you'll want to instead look at using something
  13. like Gulp, Grunt or WebPack (my personal recommendation)
  14. to compile JSX into JavaScript. Also, check out:
  15. http://facebook.github.io/react/docs/tooling-integration.html
  16. -->
  17. <script src="https://fb.me/react-15.0.1.js"></script>
  18. <script src="https://fb.me/react-dom-15.0.1.js"></script>
  19. <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
  20. <script src="../../../dist/vis.js"></script>
  21. <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
  22. <!--
  23. This is where you link to your React code. Can be .js or .jsx
  24. extension, doesn't really matter.
  25. -->
  26. <script type="text/babel">
  27. var timeline;
  28. // create groups
  29. var numberOfGroups = 25;
  30. var groups = new vis.DataSet()
  31. for (var i = 0; i < numberOfGroups; i++) {
  32. groups.add({
  33. id: i,
  34. content: 'Truck ' + i
  35. })
  36. }
  37. // create items
  38. var numberOfItems = 1000;
  39. var items = new vis.DataSet();
  40. var itemsPerGroup = Math.round(numberOfItems/numberOfGroups);
  41. for (var truck = 0; truck < numberOfGroups; truck++) {
  42. var date = new Date();
  43. for (var order = 0; order < itemsPerGroup; order++) {
  44. date.setHours(date.getHours() + 4 * (Math.random() < 0.2));
  45. var start = new Date(date);
  46. date.setHours(date.getHours() + 2 + Math.floor(Math.random()*4));
  47. var end = new Date(date);
  48. items.add({
  49. id: order + itemsPerGroup * truck,
  50. group: truck,
  51. start: start,
  52. end: end,
  53. content: 'Order ' + order
  54. });
  55. }
  56. }
  57. var GroupTemplate = React.createClass({
  58. render: function() {
  59. var { group } = this.props;
  60. return <div>
  61. <label>{group.content}</label>
  62. <button>do stuff</button>
  63. </div>
  64. }
  65. })
  66. var ItemTemplate = React.createClass({
  67. render: function() {
  68. var { item } = this.props;
  69. return <div>
  70. <label>{item.content}</label>
  71. <button>do stuff</button>
  72. </div>
  73. }
  74. })
  75. // specify options
  76. var options = {
  77. rtl: true,
  78. stack: true,
  79. maxHeight: 400,
  80. start: new Date(),
  81. end: new Date(1000*60*60*24 + (new Date()).valueOf()),
  82. editable: true,
  83. margin: {
  84. item: 10, // minimal margin between items
  85. axis: 5 // minimal margin between items and the axis
  86. },
  87. template: function (item, element) {
  88. ReactDOM.unmountComponentAtNode(element);
  89. return ReactDOM.render(<ItemTemplate item={item} />, element);
  90. },
  91. groupTemplate: function (group, element) {
  92. ReactDOM.unmountComponentAtNode(element);
  93. return ReactDOM.render(<GroupTemplate group={group} />, element);
  94. },
  95. orientation: 'top'
  96. }
  97. var VisTimeline = React.createClass({
  98. componentDidMount: function() {
  99. initTimeline()
  100. },
  101. render: function() {
  102. return <div>
  103. <h1>Vis timline with React</h1>
  104. <h2>Using react components for items ang group templates</h2>
  105. <div id="mytimeline"></div>
  106. </div>
  107. }
  108. });
  109. function initTimeline() {
  110. var container = document.getElementById('mytimeline');
  111. timeline = new vis.Timeline(container, items, groups, options);
  112. }
  113. ReactDOM.render(<VisTimeline />, document.getElementById('root'));
  114. </script>
  115. </body>
  116. </html>