Panning after loading data while zoomed breaks zoom level

[ebencollins]

Description

When zoom is enabled, appending new data to the chart while zoomed causes an unexpected zoom increase after panning.

Steps to check or reproduce

1. Zoom in with wheel zoom (either via API or manually)
2. Append new data with chart.load
3. Pan chart left/right
4. Observe the zoom level is significantly increased, despite no further zoom input

https://stackblitz.com/edit/y1jre1-jkmebv?file=index.ts

import 'billboard.js/dist/billboard.css';
import bb from 'billboard.js';

var chart = bb.generate({
    data: {
        columns: [
            [
                'sample', 30, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 150, 250, 150, 200, 170, 240, 100, 150, 250, 150, 200, 170, 240, 30, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 350, 220, 250, 300, 270, 140, 150, 90, 150, 50, 120, 70, 40,],
        ],
        type: 'line',
    },
    zoom: {
        enabled: true,
    },
    bindto: '#zoom',
});

setTimeout(function () {
    console.log('zoom');
    chart.zoom([30, 40]);
}, 1000);

setTimeout(function () {
    console.log('load');
    chart.load({
        columns: [['sample', 130, 150, 200, 300, 200, 100]],
        append: true,
    });
}, 2000);

[ebencollins]

Possibly related: the same thing seems to happen after toggling a legend while zoomed.

1. Zoom in
2. Toggle a legend off and on
3. Pan or zoom-in one wheel tick

import 'billboard.js/dist/billboard.css';
import bb from 'billboard.js';

var chart = bb.generate({
    data: {
        columns: [
            [
                'sample', 30, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 150, 250, 150, 200, 170, 240, 100, 150, 250, 150, 200, 170, 240, 30, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 350, 220, 250, 300, 270, 140, 150, 90, 150, 50, 120, 70, 40,],
        ],
        type: 'line',
    },
    zoom: {
        enabled: true,
    },
    bindto: '#zoom',
});

setTimeout(() => {
  chart.zoom([30, 40]);
}, 1000);

setTimeout(() => {
  chart.hide('sample');
}, 2000);

setTimeout(() => {
  chart.show('sample');
}, 3000);

[kisyov21]

@netil did you have the chance to look into it? In our team, we are also facing the described issue and it is affecting our users.

I saw in the past same issue was resolved for older versions but it looks like now is back..

[netil]

@kisyov21, will try prioritize on this.

[kisyov21]

@netil looks like you resolved it, thank you! However when should I expect the new version of the package with the fix?

[netil]

@kisyov21, will out within this month.