Since #9 it is possible to exclude external libraries (e.g. moment) from the build. The question is should be exclude e.g. moment by default? This would be a breaking change because than the user would always need to import moment manually.

What do you folks think?

This morning, I logged into a few internal tools I wrote that use vis-timeline, and utilise the https://unpkg.com/vis-timeline@latest/standalone/umd/vis-timeline-graph2d.min.js to import the package. Two different apps started displaying the timeline wrong. Meaning it must be pulling in a newer version that is now broken. Broken in the sense that I set the "content" attribute of a timeline item with a lot of HTML code to render quite a bit of data in the timeline items. The content appears to be "STRIPPED" of certain html code now resulting in a broken render of the timeline item.

I have been digging around and have not found any reference to this behaviour or change. Can someone help me out here, is there a way around this new bug, or maybe it's an intentional sanitization of the content? No idea. but there must be a way to fix this.

I would consider this a major issue that needs to be addressed quickly as any tool leveraging the public unpkg version above is likely now broken. (Like my tools).

Thanks James

This PR should merge all the work done in https://github.com/yotamberk/timeline-plus in to this repo. Unfortunately I could not preserve the amazing original contributors of some of the features implemented.

We use both network and 2d charts in the same app. This worked fine in vis 4.x but no longer works. I get the following error:

TypeError: vis.Network is not a constructor

If the load order is

        <!--Vis-->
        <script src="dist/vis-network.min.js"></script>
        <script src="dist/vis-timeline-graph2d.min.js"></script>

and

TypeError: vis.Graph2d is not a constructor

if the graph2d module loads first. It appears like the one module overwrites the other. The last module in the load order is the one that works.

According to the "latest" documentation there should be a way to define a tooltip template. Unfortunately, every time I try to define a template for tooltips I get an error that template is not a valid option for tooltip. I verified I have the latest version

• @version 5.1.0
• @date 2019-08-02T15:25:33Z

According to the new documentation found here https://visjs.github.io/vis-timeline/docs/timeline/

"tooltip.template | Function | none | A template function used to generate the contents of the tooltip. The function is called by the Timeline with an item's data as the first argument, and the edited data as the second argument. It must return HTML code, a string or a template as result. See section Templates for a detailed explanation. See also: tooltipOnItemUpdateTime.template"

This is what I see when I try to use the documented option.

Unknown option detected: "template" in options = { tooltip: { template }}

Am I missing something? It appears that the template is supposed to be new; however, it doesn't appear to be implemented as of 2019-08-02.

Thank you for your time and consideration.

Replicable here: https://visjs.github.io/vis-timeline/examples/timeline/

Extend the Order 251's start to 10:00 AM, after this, do as follows:

Why does the Order 251 item appear after a certain threshold, Is this a normal behavior or a bug?

This occurs only with particularly large items.

Squash preferered, HEAD is a revert of a commit that added a demo

Fixes #113

checkout https://github.com/visjs/vis-timeline/commit/1a8fd7e26ffe7c198584a660524253cee63531e7 to see demonstration, head doesn't include this as the example isn't intended for production, and I want to expedite the review.

I'm getting the following log printing to my console whenever I update the timeline's DataSet with dataSet.update()

backend.js:6 Type coercion has been deprecated. Please, use data pipes instead. See https://visjs.github.io/vis-data/data/datapipe.html#TypeCoercion for more details with working migration example.

r | @ | backend.js:6
  | warnTypeCorectionDeprecation | @ | esm.js:14
  | _getItem | @ | esm.js:14
  | get | @ | esm.js:14
  | (anonymous) | @ | ItemSet.js:1146
  | _onUpdate | @ | ItemSet.js:1145
  | update | @ | ItemSet.js:165
  | (anonymous) | @ | esm.js:14
  | _trigger | @ | esm.js:14
  | update | @ | esm.js:14

I'm on the latest version of vis-timeline.

After adding the NPM package to my composer file (require > "vis-timeline": "5.1.0"). composer is unable to find it. However it does find the vis-network NPM package. Composer search cannot find it either, it only returns "cliffparnitzky/vis.js-timeline". Am I the only one experiencing this issue?

I'm using the VisJs timeline from the 'almende/vis' repo and come across an issue where if you change the zoom level (80% causes the most problems) then the redraw function gets stuck in a infinite loop. There is a repeated warning in the console 'WARNING: infinite loop in redraw?'.

There is an issue raised in the old repo: Timeline Issue: Sometimes the redraw cycle can become stuck in an infinite loop #450

I've gone through the examples for this repo and i can see is it still occurring. If the old issues are still being tracked then i apologise and feel free to close this one.

Fixes #422

If vertical scrolling is enabled, scrolling on the left group panel scrolls the left and right part out of sync (see the GIF in #433). I found the following line to be the reason for this:

if (me._isProgramaticallyScrolled) {
        me._isProgramaticallyScrolled = false;
        return;
}

I removed this code and then saw a behavior I guess was the reason for this: When I scrolled down to the end of the group panel, the panel started flickering for some seconds. The reason for this flickering was that the following boundary check

// limit the scrollTop to the feasible scroll range
...
if (this.props.scrollTop < scrollTopMin) this.props.scrollTop = scrollTopMin;

used a scrollTopMin 2 (pixels) higher than the actual .scrollTop at the last scroll position.This updated the scrollTop property in the opposite direction the mouse scrolling did.

The reason for these 2 pixel difference is the how the container heights are calculated. Instead of rewriting this calculation, I found it safer to just improve the scrollTopMin calculation to also consider the borders.

The issue may be reproduced by the Update data on event example by simply changing the line 42 from

data.update(item);

... to ...

data.updateOnly(item);

The item.end that is filled in few lines above in the sample is somehow wiped out by the code inside updateOnly and when the code comes to the value conversion, instead of the Date object, there is an empty object {} that obviously fails to convert:

	    case "Date":
	      try {
	        return convert(object, "Moment").toDate();
	      } catch (e) {
	        if (e instanceof TypeError) {
	          throw new TypeError("Cannot convert object of type " + getType(object) + " to type " + type);
	        } else {
	          throw e;
	        }
	      }

Adding the notes and examples from https://github.com/visjs/vis-timeline/pull/1010 to the template() option function documentation (https://github.com/visjs/vis-timeline/blob/master/docs/timeline/index.html#LL2071C15) would help prevent a lot of confusion as to why it doesn't work according to the current documentation.

Unsure if a bug, but I've tried a lot of CSS trickery now and cannot seem to resolve....

using a Vis.js Timeline, I have a group timeline wherein I'm setting the background color of one of the groups, but the color is over-riding the vis-grid minor/major gridlines such that they don't show.

Repeatable example below wherein you can see the gridlines don't show on both timelines (one group with a className and one without). My group classroom is "baseline" and I've tried CSS .vis-time-axis.baseline .vis-grid.vis-minor.baseline with no luck... among lots of other variations.

<!DOCTYPE HTML>
<html>
<head>
    <script src="https://visjs.github.io/vis-timeline/standalone/umd/vis-timeline-graph2d.min.js"></script>
    <link href="https://visjs.github.io/vis-timeline/styles/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        body,
        html {
            font-family: sans-serif;
            background-color: black;

        }
        .vis-item .vis-item-overflow {
            overflow: visible;
        }
        .vis-group.baseline {
            font-family: sans-serif;
            font-style: italic;
            font-size: 11pt;
            background-color: #b1a3a3;
        }
        .baseline {
            font-family: sans-serif;
            font-style: italic;
            font-size: 11pt;
        }
        .vis-time-axis .vis-text {
            box-sizing: border-box;
            color: #ffffff;
            overflow: hidden;
            padding: 3px;
            position: absolute;
            white-space: nowrap
        }
        .vis-time-axis .vis-grid.vis-minor {
            border-color: #ececee
        }
    </style>
</head>
<body>
    <div id="visualization"></div>
    <script>
        var groups = new vis.DataSet([
            { id: 0, content: 'Solution #0', value: 0, className: "baseline" },
            { id: 1, content: 'Solution #1', value: 1 },
        ]);
        var items = new vis.DataSet([
            { id: 0, group: 0, content: 'AAA', start: new Date(2020, 04, 06), end: new Date(2020, 06, 01), type: 'range' },
            { id: 1, group: 0, content: 'BBB', start: new Date(2020, 04, 06), end: new Date(2020, 04, 06), type: 'point' },
            { id: 2, group: 0, content: 'CCC', start: new Date(2020, 06, 15), end: new Date(2021, 09, 22), type: 'range' },
            { id: 22, group: 1, content: 'AAA', start: new Date(2020, 04, 06), end: new Date(2020, 06, 01), type: 'range' },
            { id: 23, group: 1, content: 'BBB', start: new Date(2020, 06, 15), end: new Date(2021, 09, 22), type: 'range' },
            { id: 24, group: 1, content: 'CCC', start: new Date(2021, 09, 22), end: new Date(2021, 09, 27), type: 'range' },
        ]);
        var container = document.getElementById('visualization');
        var options = {};
        var timeline = new vis.Timeline(container,items,groups,options);
    </script>
</body>
</html>

Hello,

please check this JSFiddle: https://jsfiddle.net/kc7h43w2/

It demonstrates that a point would apply the className-property but not the style-property.

Please check if this would be considered a bug or if the behavior is intended.

Many Thanks.

Best Regards, René

Hi there,

i've extend the drag&drop behavior of the timeline elements. if item is moved and than the ctrl key is hold down, i create a placeholder of the "sourceitem" on the old position and on move stopped (still ctrl down) i create a new item as copy of the "sourceitem". this works if the user select a item, starts dragging and THAN hold down ctrl.

As soon as the user select an item, hold down CTRL and than start moving, timeline creates a range-object. i successfully blocked the creation of a new item based on this range, but I cant prevent this range selection at all. Any way to block this? i need to move the item even if the ctrl key is hold down befor moving started.

we are using "vis-timeline-graph2d.min.7.7.0.js"

Greetings!

Hello, I suppose this 'is by design', but IMHO it is a flaw. Each time _redraw (in Core.js) is called classes on the container are reset. It makes it hard to customize that lib - I would like to add my own class on each item, not to mention that these components natively are rather generic - no way to customize it straight (vis-left/right/center are rather not specific).

You may use classList.toggle(<class name>, true/false).

same here: dom.rightContainer.className.replace(new RegExp('(?:^|\\s)' + 'vis-vertical-scroll' + '(?:\\s|$)'), ' ') - you may use classList.toggle(..., false)