<div id="vizzu-container" style="width: 720px; height: 430px"></div>

import Vizzu from 'https://cdn.jsdelivr.net/npm/vizzu@latest/dist/vizzu.min.js';
import { data } from 'https://lib.vizzuhq.com/0.7/assets/data/chart_types_eu.js'   

class Zoomer {
  constructor(min, max) {
    this.min = min;
    this.max = max;
    this.finalMin = min;
    this.finalMax = max;
    this.pos = null;
  }

  trackPos(pos) {
    this.pos = pos;
  }

  zoom(factor) {
    let ref = this.min + this.pos * (this.max - this.min);
    this.min = ref - (1 + factor) * (ref - this.min);
    this.max = ref + (1 + factor) * (this.max - ref);
    if (this.min < this.finalMin) this.min = this.finalMin;
    if (this.max > this.finalMax) this.max = this.finalMax;
  }
};

class Throttle {
  constructor() {
    this.finished = true;
    this.next = null;
  }
  call(func) {
    if (!this.finished) {
      this.next = func;
      return;
    }
    else {
      this.finished = false;
      func().then(() => {
        this.finished = true;
        if (this.next !== null) {
          let f = this.next;
          this.next = null;
          this.call(f);
        }
      })
    }
  }
}

let zoomer = new Zoomer(0.5, 20.5);

let throttle = new Throttle();

let chart = await (new Vizzu('vizzu-container', { data })).initializing;

let container = document.getElementById('vizzu-container');

container.addEventListener('wheel', event => {
  event.preventDefault();
})

chart.on('wheel', event => {
  zoomer.zoom(- event.data.delta / 200);
  throttle.call(() => 
                chart.animate(
    { x: { range: { 
      min: zoomer.min, 
      max: zoomer.max 
    } } },
    { duration: '50ms', easing: 'linear' })
               );
});

chart.on('mousemove', event => {
  zoomer.trackPos(event.data.coords.x);
});

chart.animate({
  data: data,
  config: {
    x: {
      set: 'Year',
      range: {
        min: zoomer.min,
        max: zoomer.max
      }
    },
    y: 'Value 5 (+/-)',
    title: 'Mouse Wheel Zoom',
    geometry: 'line'
  }
}, 0);