billboard.js icon indicating copy to clipboard operation
billboard.js copied to clipboard

Zoom extent/min/max do not work with drag type

Open dnlbaines opened this issue 4 years ago • 2 comments

Description

When setting zoom to the type drag, setting the extent and x.min/x.max properties seems to have no effect. They work when using the wheel type of zoom.

Steps to check or reproduce

Try using this with a chart (e.g. the one in https://naver.github.io/billboard.js/demo/#Interaction.Zoom) and you will see you are still able to zoom in as far as you like with the drag type, but are correctly limited with the wheel type:

    zoom: {
      enabled: {
        type: "drag"
      },
      extent: [1, 10]
    }

If this is just a limitation of the type, it should be documented. But it would be useful for this to work and prevent you from dragging after a certain point, or even just not zooming in when you drag to an out of bounds level.

dnlbaines avatar Dec 19 '19 12:12 dnlbaines

The drag action consist on:

User drags area and the dragged area is represented with the colored selection background. If extent is enabled, how the action should be limited?

  • a) Limit the selection dragging?
  • b) Or let the selection drag background happens, even though it passes the extent. But the result of zooming area should be limited?

The approach looks simple, but there's ambiguity and is not really straight forward. I need to look for how to make this as a clear action.

netil avatar Dec 23 '19 02:12 netil

The drag action consist on:

User drags area and the dragged area is represented with the colored selection background. If extent is enabled, how the action should be limited?

  • a) Limit the selection dragging?
  • b) Or let the selection drag background happens, even though it passes the extent. But the result of zooming area should be limited?

The approach looks simple, but there's ambiguity and is not really straight forward. I need to look for how to make this as a clear action.

Yeah I can see it being complicated to implement it well.

The main reason I feel it is needed is currently you can pretty much infinitely zoom in further than even a single point on the chart, which causes issues for me using it to dynamically update other elements on a page, it can also cause some visual bugs on the chart. Just some way of limiting this would be useful.

dnlbaines avatar Jan 06 '20 09:01 dnlbaines