almende / vis

⚠️ This project is not maintained anymore! Please go to https://github.com/visjs
7.85k stars 1.48k forks source link

Timeline: data item 'align' has no impact #4134

Open pajryan opened 6 years ago

pajryan commented 6 years ago

JS fiddle here

From the docs, it looks like I should be able align one particular item separately from the rest:

let data = new vis.DataSet([
  {id: 1, content: 'thing 1', start: '2018-01-01'},
  {id: 2, content: 'thing 2', start: '2018-03-01', align: 'left'},   // I expect this item to be left aligned...
  {id: 3, content: 'thing 3', start: '2018-05-01'}
])
let options = {
  align: 'center' // ... while remaining items are centered
}

But the align:left in the data seems to have no effect. I'd expect the 2nd item to be aligned on it's left edge. (Applying align: left in the global options works)

(thanks for the great tool)

jgorene commented 6 years ago

Hello, Probably has no effect because the default type is "box"... try to change one with "range" type... it works well ;)

pajryan commented 6 years ago

Thanks.

I see that it does work for range (in so much as it aligns the text inside the range div). But my timeline items are points-in-time (not ranges), so forcing them to ranges doesn't really work.

It feels like I should be able to independently align boxes (both according to the docs and the fact that global alignment works properly.)

pajryan commented 6 years ago

I'll see if I can put together a PR. But looks like the solution is this line in BoxItem:

var align = this.options.align;

align only looks to the global options.

That line needs to be changed to

var align = this.data.align === undefined ? this.options.align : this.data.align;

That's the pattern used in Range and adopts the alignment from the data.

Changing this locally resolves the issue.

jgorene commented 6 years ago

Ok, great;) maybe take a look also to timeline-plus a new fork maintain by @yotamberk

yotamberk commented 6 years ago

This has been fixed and applied in timeline-plus here: https://github.com/yotamberk/timeline-plus/commit/1df3237ff8ba691c9d03e9f3db4aee6688e02989 And can be found in v2.1.9 https://www.npmjs.com/package/timeline-plus

r3b311i0n commented 6 years ago

@yotamberk I tried the latest (v2.2.2) of timeline-plus and I'm still getting this bug.

yotamberk commented 6 years ago

@r3b311i0n please open an issue in my fork and I will check out the problem