Merge remote-tracking branch 'upstream/develop' into develop

10 years ago · 77c4140e45
--- a/HISTORY.md
+++ b/HISTORY.md
@ -35,6 +35,7 @@ http://visjs.org

 ### Timeline

 - Implemented support for styling of the vertical grid.
 - Support for custom date formatting of the labels on the time axis.
 - added show major/minor lines options to timeline.
 - Added a check so only one 'activator' overlay is created on clickToUse.
--- a/dist/vis.css
+++ b/dist/vis.css
@ -320,8 +320,7 @@

 .vis.timeline .timeaxis .grid.vertical {
  position: absolute;
  width: 0;
  border-right: 1px solid;
  border-left: 1px solid;
 }

 .vis.timeline .timeaxis .grid.minor {
--- a/dist/vis.js
+++ b/dist/vis.js
--- a/dist/vis.map
+++ b/dist/vis.map
--- a/dist/vis.min.css
+++ b/dist/vis.min.css
--- a/dist/vis.min.js
+++ b/dist/vis.min.js
--- a/docs/timeline.html
+++ b/docs/timeline.html
@ -1326,6 +1326,67 @@ To load a locale into the Timeline not supported by default, one can add a new l
 &lt;/style&gt;
 </pre>

 <h3 id="Grid_Backgrounds">Grid Backgrounds</h3>
 <p>
  The background grid of the time axis can be styled, for example to highlight
  weekends or to create grids with an alternating white/lightgray background.
 </p>
 <p>
  Depending on the zoom level, the grids get certain css classes attached.
  The following classes are available:
 </p>

 <table>
  <tr>
    <th>Description</th><th>values</th>
  </tr>
  <tr>
    <td>Alternating columns</td><td><code>even</code>, <code>odd</code></td>
  </tr>
  <tr>
    <td>Current date</td><td><code>today</code>, <code>tomorrow</code>, <code>yesterday</code>, <code>current-week</code>, <code>current-month</code>, <code>current-year</code></td>
  </tr>
  <tr>
    <td>Hours</td><td><code>0h</code>, <code>1h</code>, ..., <code>23h</code></td>
  </tr>
  <tr>
    <td>Grouped hours</td><td><code>0-4h</code> to <code>20-24h</code></td>
  </tr>
  <tr>
    <td>Weekday</td><td><code>monday</code>, <code>tuesday</code>, <code>wednesday</code>, <code>thursday</code>, <code>friday</code>, <code>saturday</code>, <code>sunday</code></td>
  </tr>
  <tr>
    <td>Days</td><td><code>date1</code>, <code>date2</code>, ..., <code>date31</code></td>
  </tr>
  <tr>
    <td>Months</td><td><code>januari</code>, <code>februari</code>, <code>march</code>, <code>april</code>, <code>may</code>, <code>june</code>, <code>july</code>, <code>august</code>, <code>september</code>, <code>october</code>, <code>november</code>, <code>december</code></td>
  </tr>
  <tr>
    <td>Years</td><td><code>year2014</code>, <code>year2015</code>, ...</td>
  </tr>
 </table>

 <p>Examples:</p>

  <pre class="prettyprint lang-html">&lt;style&gt;
  /* alternating column backgrounds */
  .vis.timeline .timeaxis .grid.odd {
    background: #f5f5f5;
  }

  /* gray background in weekends, white text color */
  .vis.timeline .timeaxis .grid.saturday,
  .vis.timeline .timeaxis .grid.sunday {
    background: gray;
  }
  .vis.timeline .timeaxis .text.saturday,
  .vis.timeline .timeaxis .text.sunday {
    color: white;
  }
 &lt;/style&gt;
 </pre>


 <h2 id="Data_Policy">Data Policy</h2>
 <p>
  All code and data is processed and rendered in the browser.
--- a/examples/timeline/32_grid_styling.html
+++ b/examples/timeline/32_grid_styling.html
@ -0,0 +1,53 @@
 <!DOCTYPE HTML>
 <html>
 <head>
  <title>Timeline | Grid styling</title>

  <script src="../../dist/vis.js"></script>
  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />

  <style type="text/css">
    body, html {
      font-family: sans-serif;
    }

    /* alternating column backgrounds */
    .vis.timeline .timeaxis .grid.odd {
      background: #f5f5f5;
    }

    /* gray background in weekends, white text color */
    .vis.timeline .timeaxis .grid.saturday,
    .vis.timeline .timeaxis .grid.sunday {
      background: gray;
    }
    .vis.timeline .timeaxis .text.saturday,
    .vis.timeline .timeaxis .text.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>
--- a/examples/timeline/index.html
+++ b/examples/timeline/index.html
@ -42,6 +42,7 @@
  <p><a href="29_hiding_times.html">29_hiding_times.html</a></p>
  <p><a href="30_subgroups.html">30_subgroups.html</a></p>
  <p><a href="31_background_areas_with_groups.html">31_background_areas_with_groups.html</a></p>
  <p><a href="32_grid_styling.html">32_grid_styling.html</a></p>

  <p><a href="requirejs/requirejs_example.html">requirejs_example.html</a></p>

--- a/lib/timeline/TimeStep.js
+++ b/lib/timeline/TimeStep.js
@ -526,4 +526,76 @@ TimeStep.prototype.getLabelMajor = function(date) {
  return (format && format.length > 0) ? moment(date).format(format) : '';
 };

 TimeStep.prototype.getClassName = function() {
  var date = moment(this.current).locale('en');
  var step = this.step;

  function even(value) {
    return (value / step % 2 == 0) ? ' even' : ' odd';
  }

  function today(date) {
    if (date.isSame(new Date(), 'day')) {
      return ' today';
    }
    if (date.isSame(moment().add(1, 'day'), 'day')) {
      return ' tomorrow';
    }
    if (date.isSame(moment().add(-1, 'day'), 'day')) {
      return ' yesterday';
    }
    return '';
  }

  function currentWeek(date) {
    return date.isSame(new Date(), 'week') ? ' current-week' : '';
  }

  function currentMonth(date) {
    return date.isSame(new Date(), 'month') ? ' current-month' : '';
  }

  function currentYear(date) {
    return date.isSame(new Date(), 'year') ? ' current-year' : '';
  }

  switch (this.scale) {
    case 'millisecond':
      return even(date.milliseconds()).trim();

    case 'second':
      return even(date.seconds()).trim();

    case 'minute':
      return even(date.minutes()).trim();

    case 'hour':
      var hours = date.hours();
      if (this.step == 4) {
        hours = hours + '-' + (hours + 4);
      }
      return hours + 'h' + today(date) + even(date.hours());

    case 'weekday':
      return date.format('dddd').toLowerCase() +
          today(date) + currentWeek(date) + even(date.date());

    case 'day':
      var day = date.date();
      var month = date.format('MMMM').toLowerCase();
      return 'day' + day + ' ' + month + currentMonth(date) + even(day - 1);

    case 'month':
      return date.format('MMMM').toLowerCase() +
          currentMonth(date) + even(date.month());

    case 'year':
      var year = date.year();
      return 'year' + year + currentYear(date)+ even(year);

    default:
      return '';
  }
 };

 module.exports = TimeStep;
--- a/lib/timeline/component/TimeAxis.js
+++ b/lib/timeline/component/TimeAxis.js
@ -15,14 +15,12 @@ var moment = require('../../module/moment');
 function TimeAxis (body, options) {
  this.dom = {
    foreground: null,
    majorLines: [],
    lines: [],
    majorTexts: [],
    minorLines: [],
    minorTexts: [],
    redundant: {
      majorLines: [],
      lines: [],
      majorTexts: [],
      minorLines: [],
      minorTexts: []
    }
  };
@ -198,29 +196,40 @@ TimeAxis.prototype._repaintLabels = function () {
  // can be picked for re-use, and clear the lists with lines and texts.
  // At the end of the function _repaintLabels, left over elements will be cleaned up
  var dom = this.dom;
  dom.redundant.majorLines = dom.majorLines;
  dom.redundant.lines = dom.lines;
  dom.redundant.majorTexts = dom.majorTexts;
  dom.redundant.minorLines = dom.minorLines;
  dom.redundant.minorTexts = dom.minorTexts;
  dom.majorLines = [];
  dom.lines = [];
  dom.majorTexts = [];
  dom.minorLines = [];
  dom.minorTexts = [];

  step.first();
  var cur;
  var x = 0;
  var isMajor;
  var xPrev = 0;
  var width = 0;
  var prevLine;
  var xFirstMajorLabel = undefined;
  var max = 0;
  var className;

  step.first();
  while (step.hasNext() && max < 1000) {
    max++;
    var cur = step.getCurrent();
    var x = this.body.util.toScreen(cur);
    var isMajor = step.isMajor();

    cur = step.getCurrent();
    isMajor = step.isMajor();
    className = step.getClassName();

    // TODO: lines must have a width, such that we can create css backgrounds
    xPrev = x;
    x = this.body.util.toScreen(cur);
    width = x - xPrev;
    if (prevLine) {
      prevLine.style.width = width + 'px';
    }

    if (this.options.showMinorLabels) {
      this._repaintMinorText(x, step.getLabelMinor(), orientation);
      this._repaintMinorText(x, step.getLabelMinor(), orientation, className);
    }

    if (isMajor && this.options.showMajorLabels) {
@ -228,12 +237,12 @@ TimeAxis.prototype._repaintLabels = function () {
        if (xFirstMajorLabel == undefined) {
          xFirstMajorLabel = x;
        }
        this._repaintMajorText(x, step.getLabelMajor(), orientation);
        this._repaintMajorText(x, step.getLabelMajor(), orientation, className);
      }
      this._repaintMajorLine(x, orientation);
      prevLine = this._repaintMajorLine(x, orientation, className);
    }
    else {
      this._repaintMinorLine(x, orientation);
      prevLine = this._repaintMinorLine(x, orientation, className);
    }

    step.next();
@ -246,7 +255,7 @@ TimeAxis.prototype._repaintLabels = function () {
        widthText = leftText.length * (this.props.majorCharWidth || 10) + 10; // upper bound estimation

    if (xFirstMajorLabel == undefined || widthText < xFirstMajorLabel) {
      this._repaintMajorText(0, leftText, orientation);
      this._repaintMajorText(0, leftText, orientation, className);
    }
  }

@ -266,9 +275,10 @@ TimeAxis.prototype._repaintLabels = function () {
 * @param {Number} x
 * @param {String} text
 * @param {String} orientation   "top" or "bottom" (default)
 * @param {String} className
 * @private
 */
 TimeAxis.prototype._repaintMinorText = function (x, text, orientation) {
 TimeAxis.prototype._repaintMinorText = function (x, text, orientation, className) {
  // reuse redundant label
  var label = this.dom.redundant.minorTexts.shift();

@ -277,7 +287,6 @@ TimeAxis.prototype._repaintMinorText = function (x, text, orientation) {
    var content = document.createTextNode('');
    label = document.createElement('div');
    label.appendChild(content);
    label.className = 'text minor';
    this.dom.foreground.appendChild(label);
  }
  this.dom.minorTexts.push(label);
@ -286,6 +295,7 @@ TimeAxis.prototype._repaintMinorText = function (x, text, orientation) {

  label.style.top = (orientation == 'top') ? (this.props.majorLabelHeight + 'px') : '0';
  label.style.left = x + 'px';
  label.className = 'text minor ' + className;
  //label.title = title;  // TODO: this is a heavy operation
 };

@ -294,9 +304,10 @@ TimeAxis.prototype._repaintMinorText = function (x, text, orientation) {
 * @param {Number} x
 * @param {String} text
 * @param {String} orientation   "top" or "bottom" (default)
 * @param {String} className
 * @private
 */
 TimeAxis.prototype._repaintMajorText = function (x, text, orientation) {
 TimeAxis.prototype._repaintMajorText = function (x, text, orientation, className) {
  // reuse redundant label
  var label = this.dom.redundant.majorTexts.shift();

@ -304,13 +315,13 @@ TimeAxis.prototype._repaintMajorText = function (x, text, orientation) {
    // create label
    var content = document.createTextNode(text);
    label = document.createElement('div');
    label.className = 'text major';
    label.appendChild(content);
    this.dom.foreground.appendChild(label);
  }
  this.dom.majorTexts.push(label);

  label.childNodes[0].nodeValue = text;
  label.className = 'text major ' + className;
  //label.title = title; // TODO: this is a heavy operation

  label.style.top = (orientation == 'top') ? '0' : (this.props.minorLabelHeight  + 'px');
@ -321,19 +332,19 @@ TimeAxis.prototype._repaintMajorText = function (x, text, orientation) {
 * Create a minor line for the axis at position x
 * @param {Number} x
 * @param {String} orientation   "top" or "bottom" (default)
 * @param {String} className
 * @return {Element} Returns the created line
 * @private
 */
 TimeAxis.prototype._repaintMinorLine = function (x, orientation) {
 TimeAxis.prototype._repaintMinorLine = function (x, orientation, className) {
  // reuse redundant line
  var line = this.dom.redundant.minorLines.shift();

  var line = this.dom.redundant.lines.shift();
  if (!line) {
    // create vertical line
    line = document.createElement('div');
    line.className = 'grid vertical minor';
    this.dom.background.appendChild(line);
  }
  this.dom.minorLines.push(line);
  this.dom.lines.push(line);

  var props = this.props;
  if (orientation == 'top') {
@ -344,25 +355,29 @@ TimeAxis.prototype._repaintMinorLine = function (x, orientation) {
  }
  line.style.height = props.minorLineHeight + 'px';
  line.style.left = (x - props.minorLineWidth / 2) + 'px';

  line.className = 'grid vertical minor ' + className;

  return line;
 };

 /**
 * Create a Major line for the axis at position x
 * @param {Number} x
 * @param {String} orientation   "top" or "bottom" (default)
 * @param {String} className
 * @return {Element} Returns the created line
 * @private
 */
 TimeAxis.prototype._repaintMajorLine = function (x, orientation) {
 TimeAxis.prototype._repaintMajorLine = function (x, orientation, className) {
  // reuse redundant line
  var line = this.dom.redundant.majorLines.shift();

  var line = this.dom.redundant.lines.shift();
  if (!line) {
    // create vertical line
    line = document.createElement('DIV');
    line.className = 'grid vertical major';
    line = document.createElement('div');
    this.dom.background.appendChild(line);
  }
  this.dom.majorLines.push(line);
  this.dom.lines.push(line);

  var props = this.props;
  if (orientation == 'top') {
@ -373,6 +388,10 @@ TimeAxis.prototype._repaintMajorLine = function (x, orientation) {
  }
  line.style.left = (x - props.majorLineWidth / 2) + 'px';
  line.style.height = props.majorLineHeight + 'px';

  line.className = 'grid vertical major ' + className;

  return line;
 };

 /**
--- a/lib/timeline/component/css/timeaxis.css
+++ b/lib/timeline/component/css/timeaxis.css
@ -35,8 +35,7 @@

 .vis.timeline .timeaxis .grid.vertical {
  position: absolute;
  width: 0;
  border-right: 1px solid;
  border-left: 1px solid;
 }

 .vis.timeline .timeaxis .grid.minor {
--- a/test/timeline.html
+++ b/test/timeline.html
@ -19,6 +19,20 @@
    #visualization .itemset {
      /*background: rgba(255, 255, 0, 0.5);*/
    }

    #visualization .grid.vertical.odd {
      background: #f5f5f5;
    }

    #visualization .grid.vertical.saturday,
    #visualization .grid.vertical.sunday {
      background: gray;
    }

    #visualization .text.saturday,
    #visualization .text.sunday {
      color: white;
    }
  </style>

 </head>
@ -103,12 +117,12 @@
        'minute':     'dddd D MMMM',
        'hour':       'dddd D MMMM'
      }
    },
    }
    //clickToUse: true,
    //min: moment('2013-01-01'),
    //max: moment('2013-12-31'),
    //zoomMin: 1000 * 60 * 60 * 24,            // 1 day
    zoomMax: 1000 * 60 * 60 * 24 * 30 * 6     // 6 months
    //zoomMax: 1000 * 60 * 60 * 24 * 30 * 6     // 6 months
  };

  console.timeEnd('create dataset');