RubyGems - visjs-rails - Versions diffs - 4.16.1.0 → 4.21.0.0 - Mend

visjs-rails 4.16.1.0 → 4.21.0.0

Files changed (388) hide show

data/examples_for_vis/timeline/styling/customCss.html ADDED

@@ -0,0 +1,128 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Timeline | Custom styling</title>
+  <script src="../../../vendor/assets/javascripts/vis.js"></script>
+  <link href="../../../vendor/assets/stylesheets/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
+  <style type="text/css">
+    body {
+      font-family: purisa, 'comic sans', cursive;
+    }
+    .vis-timeline {
+      border: 2px solid purple;
+      font-family: purisa, 'comic sans', cursive;
+      font-size: 12pt;
+      background: #ffecea;
+    }
+    .vis-item {
+      border-color: #F991A3;
+      background-color: pink;
+      font-size: 15pt;
+      color: purple;
+      box-shadow: 5px 5px 20px rgba(128, 128, 128, 0.5);
+    }
+    .vis-item,
+    .vis-item.vis-line {
+      border-width: 3px;
+    }
+    .vis-item.vis-dot {
+      border-width: 10px;
+      border-radius: 10px;
+    }
+    .vis-item.vis-selected {
+      border-color: green;
+      background-color: lightgreen;
+    }
+    .vis-time-axis .vis-text {
+      color: purple;
+      padding-top: 10px;
+      padding-left: 10px;
+    }
+    .vis-time-axis .vis-text.vis-major {
+      font-weight: bold;
+    }
+    .vis-time-axis .vis-grid.vis-minor {
+      border-width: 2px;
+      border-color: pink;
+    }
+    .vis-time-axis .vis-grid.vis-major {
+      border-width: 2px;
+      border-color: #F991A3;
+    }
+  </style>
+</head>
+<body>
+  <p>
+    The style of the Timeline can be fully customized via CSS:
+  </p>
+  <div id="visualization"></div>
+  <script type="text/javascript">
+    var container = document.getElementById('visualization');
+    // note that months are zero-based in the JavaScript Date object
+    var items = new vis.DataSet([{
+        start: new Date(2010, 7, 23),
+        content: '<div>Conversation</div><img src="../resources/img/community-users-icon.png" style="width:32px; height:32px;">'
+      },
+      {
+        start: new Date(2010, 7, 23, 23, 0, 0),
+        content: '<div>Mail from boss</div><img src="../resources/img/mail-icon.png" style="width:32px; height:32px;">'
+      },
+      {
+        start: new Date(2010, 7, 24, 16, 0, 0),
+        content: 'Report'
+      },
+      {
+        start: new Date(2010, 7, 26),
+        end: new Date(2010, 8, 2),
+        content: 'Traject A'
+      },
+      {
+        start: new Date(2010, 7, 28),
+        content: '<div>Memo</div><img src="../resources/img/notes-edit-icon.png" style="width:48px; height:48px;">'
+      },
+      {
+        start: new Date(2010, 7, 29),
+        content: '<div>Phone call</div><img src="../resources/img/Hardware-Mobile-Phone-icon.png" style="width:32px; height:32px;">'
+      },
+      {
+        start: new Date(2010, 7, 31),
+        end: new Date(2010, 8, 3),
+        content: 'Traject B'
+      },
+      {
+        start: new Date(2010, 8, 4, 12, 0, 0),
+        content: '<div>Report</div><img src="../resources/img/attachment-icon.png" style="width:32px; height:32px;">'
+      }
+    ]);
+    var options = {
+      editable: true,
+      margin: {
+        item: 20,
+        axis: 40
+      }
+    };
+    var timeline = new vis.Timeline(container, items, options);
+  </script>
+</body>
+</html>

data/examples_for_vis/timeline/styling/gridStyling.html ADDED

@@ -0,0 +1,80 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Timeline | Grid styling</title>
+  <script src="../../../vendor/assets/javascripts/vis.js"></script>
+  <link href="../../../vendor/assets/stylesheets/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
+  <style type="text/css">
+    body,
+    html {
+      font-family: sans-serif;
+    }
+    /* alternating column backgrounds */
+    .vis-time-axis .vis-grid.vis-odd {
+      background: #f5f5f5;
+    }
+    /* gray background in weekends, white text color */
+    .vis-time-axis .vis-grid.vis-saturday,
+    .vis-time-axis .vis-grid.vis-sunday {
+      background: gray;
+    }
+    .vis-time-axis .vis-text.vis-saturday,
+    .vis-time-axis .vis-text.vis-sunday {
+      color: white;
+    }
+  </style>
+</head>
+<body>
+  <div id="visualization"></div>
+  <script type="text/javascript">
+    // DOM element where the Timeline will be attached
+    var container = document.getElementById('visualization');
+    // Create a DataSet (allows two way data-binding)
+    var items = new vis.DataSet([{
+        id: 1,
+        content: 'custom',
+        start: '2015-01-01'
+      },
+      {
+        id: 2,
+        content: 'styling',
+        start: '2016-01-01'
+      },
+      {
+        id: 3,
+        content: 'of',
+        start: '2017-01-01'
+      },
+      {
+        id: 4,
+        content: 'background',
+        start: '2018-01-01'
+      },
+      {
+        id: 5,
+        content: 'grid',
+        start: '2019-01-01'
+      }
+    ]);
+    // Configuration for the Timeline
+    var options = {};
+    // Create a Timeline
+    var timeline = new vis.Timeline(container, items, options);
+  </script>
+</body>
+</html>

data/examples_for_vis/timeline/styling/itemClassNames.html ADDED

@@ -0,0 +1,125 @@
+<html>
+<head>
+  <title>Timeline | Item class names</title>
+  <script src="../../../vendor/assets/javascripts/vis.js"></script>
+  <link href="../../../vendor/assets/stylesheets/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
+  <style type="text/css">
+    body,
+    input {
+      font: 12pt verdana;
+    }
+    /* custom styles for individual items, load this after vis.css/vis-timeline-graph2d.min.css */
+    .vis-item.green {
+      background-color: greenyellow;
+      border-color: green;
+    }
+    /* create a custom sized dot at the bottom of the red item */
+    .vis-item.red {
+      background-color: red;
+      border-color: darkred;
+      color: white;
+      font-family: monospace;
+      box-shadow: 0 0 10px gray;
+    }
+    .vis-item.vis-dot.red {
+      border-radius: 10px;
+      border-width: 10px;
+    }
+    .vis-item.vis-line.red {
+      border-width: 5px;
+    }
+    .vis-item.vis-box.red {
+      border-radius: 0;
+      border-width: 2px;
+      font-size: 24pt;
+      font-weight: bold;
+    }
+    .vis-item.orange {
+      background-color: gold;
+      border-color: orange;
+    }
+    .vis-item.vis-selected.orange {
+      /* custom colors for selected orange items */
+      background-color: orange;
+      border-color: orangered;
+    }
+    .vis-item.magenta {
+      background-color: magenta;
+      border-color: purple;
+      color: white;
+    }
+    /* our custom classes overrule the styles for selected events,
+       so lets define a new style for the selected events */
+    .vis-item.vis-selected {
+      background-color: white;
+      border-color: black;
+      color: black;
+      box-shadow: 0 0 10px gray;
+    }
+  </style>
+</head>
+<body>
+  <p>This page demonstrates the Timeline with custom css classes for individual items.</p>
+  <div id="mytimeline"></div>
+  <script type="text/javascript">
+    // create data
+    // note that months are zero-based in the JavaScript Date object
+    var data = new vis.DataSet([{
+        'start': new Date(2012, 7, 19),
+        'content': 'default'
+      },
+      {
+        'start': new Date(2012, 7, 23),
+        'content': 'green',
+        'className': 'green'
+      },
+      {
+        'start': new Date(2012, 7, 29),
+        'content': 'red',
+        'className': 'red'
+      },
+      {
+        'start': new Date(2012, 7, 27),
+        'end': new Date(2012, 8, 1),
+        'content': 'orange',
+        'className': 'orange'
+      },
+      {
+        'start': new Date(2012, 8, 2),
+        'content': 'magenta',
+        'className': 'magenta'
+      }
+    ]);
+    // specify options
+    var options = {
+      editable: true
+    };
+    // create the timeline
+    var container = document.getElementById('mytimeline');
+    timeline = new vis.Timeline(container, data, options);
+  </script>
+</body>
+</html>

data/examples_for_vis/timeline/styling/itemTemplates.html ADDED

@@ -0,0 +1,264 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Timeline | Templates</title>
+  <!-- load handlebars for templating, and create a template -->
+  <script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
+  <script id="item-template" type="text/x-handlebars-template">
+    <table class="score">
+      <tr>
+        <td colspan="3" class="description">{{description}}</td>
+      </tr>
+      <tr>
+        <td>{{player1}}</td>
+        <th>{{score1}} - {{score2}}</th>
+        <td>{{player2}}</td>
+      </tr>
+      <tr>
+        <td>
+          <img src="http://flagpedia.net/data/flags/mini/{{abbr1}}.png" width="31" height="20" alt="{{abbr1}}">
+        </td>
+        <th></th>
+        <td>
+          <img src="http://flagpedia.net/data/flags/mini/{{abbr2}}.png" width="31" height="20" alt="{{abbr2}}">
+        </td>
+      </tr>
+    </table>
+  </script>
+  <script src="../../../vendor/assets/javascripts/vis.js"></script>
+  <link href="../../../vendor/assets/stylesheets/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
+  <style type="text/css">
+    body,
+    html {
+      font-family: sans-serif;
+      font-size: 10pt;
+    }
+    .vis.timeline .item {
+      border-color: #acacac;
+      background-color: #efefef;
+      box-shadow: 5px 5px 10px rgba(128, 128, 128, 0.3);
+    }
+    table .description {
+      font-style: italic;
+    }
+    #visualization {
+      position: relative;
+      overflow: hidden;
+    }
+    .logo {
+      position: absolute;
+      right: 10px;
+      top: 10px;
+    }
+    .logo img {
+      width: 120px;
+    }
+  </style>
+</head>
+<body>
+  <h1>WK 2014</h1>
+  <p style="max-width: 600px;">
+    This example demonstrates using templates to format item contents. In this case
+    <a href="http://handlebarsjs.com">handlebars</a> is used as template engine, but you can just use your favorite template engine or manually craft HTML
+    from the data of an item.
+  </p>
+  <div id="visualization">
+    <div class="logo">
+      <img src="http://upload.wikimedia.org/wikipedia/en/e/e8/WC-2014-Brasil.svg">
+    </div>
+  </div>
+  <script type="text/javascript">
+    // create a handlebars template
+    var source = document.getElementById('item-template').innerHTML;
+    var template = Handlebars.compile(document.getElementById('item-template').innerHTML);
+    // DOM element where the Timeline will be attached
+    var container = document.getElementById('visualization');
+    // Create a DataSet (allows two way data-binding)
+    var items = new vis.DataSet([
+      // round of 16
+      {
+        player1: 'Brazil',
+        abbr1: 'br',
+        score1: '1 (3)',
+        player2: 'Chile',
+        abbr2: 'cl',
+        score2: '1 (2)',
+        description: 'round of 16',
+        start: '2014-06-28T13:00:00'
+      },
+      {
+        player1: 'Colombia',
+        abbr1: 'co',
+        score1: 2,
+        player2: 'Uruguay',
+        abbr2: 'uy',
+        score2: 0,
+        description: 'round of 16',
+        start: '2014-06-28T17:00:00'
+      },
+      {
+        player1: 'Netherlands',
+        abbr1: 'nl',
+        score1: 2,
+        player2: 'Mexico',
+        abbr2: 'mx',
+        score2: 1,
+        description: 'round of 16',
+        start: '2014-06-29T13:00:00'
+      },
+      {
+        player1: 'Costa Rica',
+        abbr1: 'cr',
+        score1: '1 (5)',
+        player2: 'Greece',
+        abbr2: 'gr',
+        score2: '1 (3)',
+        description: 'round of 16',
+        start: '2014-06-29T17:00:00'
+      },
+      {
+        player1: 'France',
+        abbr1: 'fr',
+        score1: 2,
+        player2: 'Nigeria',
+        abbr2: 'ng',
+        score2: 0,
+        description: 'round of 16',
+        start: '2014-06-30T13:00:00'
+      },
+      {
+        player1: 'Germany',
+        abbr1: 'de',
+        score1: 2,
+        player2: 'Algeria',
+        abbr2: 'dz',
+        score2: 1,
+        description: 'round of 16',
+        start: '2014-06-30T17:00:00'
+      },
+      {
+        player1: 'Argentina',
+        abbr1: 'ar',
+        score1: 1,
+        player2: 'Switzerland',
+        abbr2: 'ch',
+        score2: 0,
+        description: 'round of 16',
+        start: '2014-07-01T13:00:00'
+      },
+      {
+        player1: 'Belgium',
+        abbr1: 'be',
+        score1: 2,
+        player2: 'USA',
+        abbr2: 'us',
+        score2: 1,
+        description: 'round of 16',
+        start: '2014-07-01T17:00:00'
+      },
+      // quarter-finals
+      {
+        player1: 'France',
+        abbr1: 'fr',
+        score1: 0,
+        player2: 'Germany',
+        abbr2: 'de',
+        score2: 1,
+        description: 'quarter-finals',
+        start: '2014-07-04T13:00:00'
+      },
+      {
+        player1: 'Brazil',
+        abbr1: 'br',
+        score1: 2,
+        player2: 'Colombia',
+        abbr2: 'co',
+        score2: 1,
+        description: 'quarter-finals',
+        start: '2014-07-04T17:00:00'
+      },
+      {
+        player1: 'Argentina',
+        abbr1: 'ar',
+        score1: 1,
+        player2: 'Belgium',
+        abbr2: 'be',
+        score2: 0,
+        description: 'quarter-finals',
+        start: '2014-07-05T13:00:00'
+      },
+      {
+        player1: 'Netherlands',
+        abbr1: 'nl',
+        score1: '0 (4)',
+        player2: 'Costa Rica',
+        abbr2: 'cr',
+        score2: '0 (3)',
+        description: 'quarter-finals',
+        start: '2014-07-05T17:00:00'
+      },
+      // semi-finals
+      {
+        player1: 'Brazil',
+        abbr1: 'br',
+        score1: 1,
+        player2: 'Germany',
+        abbr2: 'de',
+        score2: 7,
+        description: 'semi-finals',
+        start: '2014-07-08T17:00:00'
+      },
+      {
+        player1: 'Netherlands',
+        abbr1: 'nl',
+        score1: '0 (2)',
+        player2: 'Argentina',
+        abbr2: 'ar',
+        score2: '0 (4)',
+        description: 'semi-finals',
+        start: '2014-07-09T17:00:00'
+      },
+      // final
+      {
+        player1: 'Germany',
+        score1: 1,
+        abbr1: 'de',
+        player2: 'Argentina',
+        abbr2: 'ar',
+        score2: 0,
+        description: 'final',
+        start: '2014-07-13T16:00:00'
+      }
+    ]);
+    // Configuration for the Timeline
+    var options = {
+      // specify a template for the items
+      template: template
+    };
+    // Create a Timeline
+    var timeline = new vis.Timeline(container, items, options);
+  </script>
+</body>
+</html>