Be able to draw ticks in a non-linear way

[dereklin]

Hi,

Thanks for this great library. Everything is working so well so far except for ticks.

Here is my plunker: https://plnkr.co/edit/mdlI5HiUWxJ3rbNlBb4g?p=preview

There are two problem:

1. My left handle says 2007 at the bottom, but my date is 2016-12-31
2. The last tick doesn't have legend.

Now, in app.js, if I uncomment line 13, the ticks work as expected.

But that's not my true date range. My true date range is with line 13 commented out.

How can I have accurate ticks with my existing data points?

Can I supply my own ticks? Like:

[
...
{legend: '2011', showTick: true}, 
{legend: '', showTick: false},
{legend: '2013', showTick: true},
...
]

Or, as a compromise, can I uncomment line 13, showing a few "fake" quarters, but have the slider not go into the "fake" quarters -- setting up a boundary?

[ValentinH]

Indeed, the range of your slider should be divisible by the number of ticks.

Currently, there is no way to supply your own ticks but this could actually be a good solution, and quite easy to be done. But this would be for expert users since all the ticks logic should be handle manually (this part). Plus, we could add a getTickVisibility() option to hide a specific tick.

For now, you can use the minLimit and/or maxLimit option to have virtual boundaries.

[dereklin]

@ValentinH
The minLimit is not a good solution the more I think of it. Let's say I want to show a label every 16 ticks, I need to pad up to 15 "fake" data points; if 32 ticks, 31 "fake" data points and so forth.

Moreover, it doesn't really work with range sliding. Here is my plunker: https://plnkr.co/edit/oCYPzK32rrpf8RP1Q4PM?p=preview

If you drag and left handle, the boundary is set correctly.

But if you move the range to the left, it goes all the way to the left, passing the boundary (limit)

[ValentinH]

Actually, the minLimit/maxLimit is bugged for draggableRange! :D I'll fix that asap.

[dereklin]

@ValentinH
I am trying to supply my own ticks. Here is my plunker: https://plnkr.co/edit/8U5gCdNtBvW9w9XY2zR8?p=preview

In rz-slider-decorator.js, I have overridden the updateTicksScale function and use my own ticks when it's there.

In app.js, line 31 to 36, I am just setting up very simple ticks based on my data points.

But the ticks and the actually values are not aligning up towards the end when it gets closer to 2016.

Do you see anything obvious here regarding to the tick alignment?

[dereklin]

@ValentinH
OK. This time I am using opacity instead of display in css. And I am looping from the end to beginning when setting up the ticks. It seems to work as expected. Could you see if this is the right approach? Thanks.

https://plnkr.co/edit/Zqf8hJti5vfPIMS726vP?p=preview

[dereklin]

@ValentinH
Alright. I think this looks nicer: https://plnkr.co/edit/Y6rUhTDdNkGrY13fupn5?p=preview
I am supplier my own ticks with simple settings, then I set the showTicks and showTickValues to 1, then in the decorator, I merge the ticks.

Do you see any issues?

[ValentinH]

You should use visibility: hidden|visible instead of opacity I think. Thus, the hidden ticks are not clickable. Then, I think the custom ticks option should be implemented directly in the library! :)

[dereklin]

@ValentinH
Using visibility is much better: https://plnkr.co/edit/eE6yMIZ1xdCFrESfjyyn?p=preview

However, in my situation, I can no longer click on quarters that are hidden. So I can't go to a particular quarter conveniently.

And for the ticks that ARE visible in between the range, the tooltips are still showing up to block the view. And when I slide the range around, the tooltips in the middle are popping up.

It would be nice to have an option to disable them totally within the range. And then I can use opacity and be able to click on every available tick outside of the range

[ValentinH]

Since you are using a custom ticks array, you can rebuild it at runtime and remove the tooltips that are in the middle of the range...

[dereklin]

@ValentinH

This doesn't look good. What I am looking for is to have the ticks showing and have the tooltips disabled. I need to look deeper into this later...

[ValentinH]

I was not saying to remove ticks but only their tooltip. But for this, you should not use the default updateTicksScale at all but build your custom one.

[ValentinH]

@dereklin I have work on a ticks refactoring that enables to position ticks at specific position: #426. Do you think it would match your needs?

[dereklin]

@ValentinH Thanks for looking into this. Is the new code backward compatible with version 5.4.2? I replaced the library and it doesn't look right: https://plnkr.co/edit/MVRnRlYCOGZEnb74yitT?p=preview

And then I tried to add draggableRange into your fiddle and couldn't make it work: http://jsfiddle.net/dereklin/c7yvtaqd/

[ValentinH]

You need to update the css file as well because it has changed as well: https://plnkr.co/edit/xPyDhHPIhQ0D9fylbisD?p=preview

For the draggableRange, you need to have a range slider for it! ^^ http://jsfiddle.net/drekqr13/

[dereklin]

@ValentinH Wow, this is great! Even without the custom ticks, the edge tick 2006-12-31 is at the right spot! Thank you very much for the enhancement!

[ValentinH]

What do you mean by "without the custom ticks"? Because it's not supposed to change to current behavior 😄

[dereklin]

Compare my original plunk https://plnkr.co/edit/mdlI5HiUWxJ3rbNlBb4g?p=preview vs the new plunk https://plnkr.co/edit/xPyDhHPIhQ0D9fylbisD?p=preview

The only change is using the new slider library. It's already looking like what I want, without using ticksArray.

[ValentinH]

Actually the second one is not correct because the ticks are wrongly positioned: this is due to the change on the handles size that is not updated for the ticks positioning...
This is not a good behavior, I still need to fix that.

[dereklin]

Can you explain a little bit more on why it is not correct? It looks pretty good except that 2016 is not displayed at the end of the lower bottom.

[ValentinH]

By default, this new feature should not change the current behavior but should enable to change it if the user wants to. So by default, your demo should still be broken but you could fix it.

Actually, my previous comment was too quickly written and the current implementation already handles different pointer sizes but your demo was missing a change in your custom CSS: https://plnkr.co/edit/TYcUd2c34flMuKIcrR4z?p=preview

Thus you need to set the correct config to ticksArray ;)

[ValentinH]

The ticksArray should contain the index of the wanted value: https://plnkr.co/edit/o1r6NElxzunA1Uk2d4NT?p=preview . For now, if you want to ticks to be under the slider, you still need to set a numerical value to showTicksValues but I will add an option for this.

[ValentinH]

#426 has been merged so ticksArray is available from 5.6.0.