MeasurementPlot, zoom and enhancements

[lpatiny]

Add properties allowing to zoom, scroll, pan

• zoom: 'horizontal' (useAxisZoom), 'vertical' (useAxisZoom), 'rectangular' (useRectangularZoom), default: 'horizontal', could be empty for no zoom
• wheelZoom: 'vertical', useAxisWheelZoom, default 'vertical'
• crossHair: true / false, should we display crosshair (useCrossHair), default: true

Some default behaviour without properties:

• usePan, the component will always allow pan with 'ALT' modifier key
• double click for zoom out (always enabled)

Some other properties:

• showHorizontalAxis (default: true)
• showVerticalAxis (default: true)
• showHorizontalGrid (default: true)
• showVerticalGrid (default: true)
• flipHorizontalAxis (default: false)

[wadjih-bencheikh18]

Using react hooks conditionally is forbidden i couldn't find a solution to implement these functionalities, i only suggest adding a new param in react-plot hooks so the user will be able to use them conditionally or would you please suggest any other possible solutions?

[lpatiny]

I think that the hooks can always be 'active'. However we could think about properties at the level of the hook that disabled it.

For example:

https://github.com/zakodium-oss/react-plot/blob/2c74502a14007959b717d1837372281916dc1a86/src/hooks/useAxisZoom.tsx#L17-L18

Could have direction:'none' to disable the hook.

Same for the wheel and crosshair hooks.

@targos Does this make sense ?

[targos]

Yes, but I would create a general option.

What about usePlotEvents({ disabled: true }) which would not pass the callbacks and can be inherited by all higher-level hooks?

[wadjih-bencheikh18]

which would not pass the callbacks and can be inherited by all higher-level hooks?

I agree with using a general option

[lpatiny]

Please also add small default spaces between the axis values and axis labels (4px ?)

As well as between the title and the chart

Please check also that you deal correctly with the fact that the data may be missing a scale label of the chart title.