rangeBar bars overlap

[thellimist]

@junedchhipa

Using the demo here, adding the following Test section to Bob, will make the bars looked merged

        {
          x: 'Test',
          y: [
            new Date('2019-03-08').getTime(),
            new Date('2019-03-12').getTime()
          ]
        },

Just in between two ranges. As you can see in the picture it looks like they are merged.

If there are any overlapses, it should show in a new row

[junedchhipa]

What if there are more than 2 items of the same row that overlaps?
Creating n number of new rows for each overlap doesn't seem right.

[thellimist]

Creating n number of new rows for each overlap doesn't seem right.

Wonder what's your thought process? In my opinion losing visibility of data is worse than slightly more data.

// Method 1
11111    222222
    3333333

// Method 2
11111    
         222222
    3333333

// Method 3
111133333332222

where each number represents a bar and it's length. In my opinion Method 1 > Method 2 > Method 3. Currently, rangeBar uses Method 3.

[junedchhipa]

Sure, I was just asking for an opinion.
I was thinking of squeezing everything in 1 row but that will result in loss of data.

Method 1 looks good to me, I will try that one.

[sergkop]

IMHO, it's a question of whether it should be the library or developer who handles such cases. I also see problem of dealing with such overlaps, but in my case I would prefer the overall chart to look nice (with the number rows being defined by the chart options and not changing from one series to another).

If method 1 or 2 gets implemented I think there should still be an option to use method 3.

[junedchhipa]

Yes, giving an option in the config whether to overlap the bars or to split those bars into two is a good way to let the developer control it.

Here is what I am thinking

It looks a bit ugly but the data is not lost.

Adding a new row for the overlapping bars will require a good amount of rewriting the range-bar module.

[julianmcolina]

+1 for method 1 or 2

[thellimist]

https://codepen.io/thellimist/pen/mdypaOO

With commit 2214bfb empty data values are broken.

series: [
          {
            name: 'Bob',
            data: []
          },
          {
            name: 'Joe',
            data: [
              {
                x: 'Design',
                y: [
                  new Date('2019-03-02').getTime(),
                  new Date('2019-03-05').getTime()
                ]
              }
          }
      ]

Would not work anymore

[ccarrascoml]

Hello. This change in the rangeBar bars has completely broken how my layout was showing the information.

The overlap was desirable for me.

Is there an option to toggle the previous behaviour? This is the method 3 that @thellimist commented. If not, would it be hard to add one?

Thank you in advance.

[junedchhipa]

@ccarrascoml Sure, that's a valid point.
As @sergkop suggested, there needs to be an option to toggle the behavior.
I will address it soon.