Refactor & export pan and zoom functions

[kurkle]

• Simplify the doPan and doZoom interface.
• export doPan, doZoom and resetZoom functions.
• add pan and zoom functions to chart instance.
• Add sample

[etimberg]

One minor point. The only other part I had comments about was removing some of the checks around the enabled option, but I'm guessing that is because they were redundant

[KoalaBear84]

Thanks! Will try it out ASAP 👍

[KoalaBear84]

Thanks @kurkle. Looks like it is only for 'relative' zoom/panning. I think it is not possible to do something like "zoom to last 24 hours" or so. My 'workaround' works, but everytime I call it, it shifts/moves a little. Also, it really becomes a (range) limit instead of a 'suggestion'.

See #444

[kurkle]

@KoalaBear84 I think you can use the scale options directly for "zoom to somewhere" kind of functionality.

yourchart.options.scales.x.min = new Date('2021-04-19');
yourchart.options.scales.x.max = new Date('2021-04-20');
yourchart.update();

[KoalaBear84]

Hmm, didn't knew about that. It does work, as in that it also zooms to this period.

But it also 'locks' the graph, so you cannot zoom out, and the "Reset zoom" button I use doesn't show anymore, probably because it isn't a real zoom command anymore. Hmm, I guess I know now I see my check, it is based on the values we change on the sample you supplied.

Somehow there looks to be a change to the onZoomComplete function.

In 1.0.0-beta.1 I have to use this (with curly brackets):

    onZoomComplete: function ({ chart }) {
        showHideZoomButton(chart);
    }

function showHideZoomButton(chart) {
	document.querySelector('.resetZoomButton').style.display = (chart.scales.x.options.min != 0 || chart.scales.x.options.max != 0 || chart.scales.y.options.min != 0 || chart.scales.y.options.max != 0) ? 'block' : 'none';
}

In 1.0.0-beta.2 I have to use this (without curly brackets):

    onZoomComplete: function (chart) {
        showHideZoomButton(chart);
    }

Is there any logic to this, or am I doing something wrong?