from bqplot.interacts import PanZoom
import ipywidgets as widgets
import bqplot as bq
from traitlets import link
from collections import OrderedDict
import ipyvue

import numpy as np

x_sc = bq.LinearScale()
y_sc = bq.LinearScale()

x_data = np.arange(500)
y_data = np.random.randn(3, 500)

line_chart = bq.Lines(x=x_data, y=y_data, scales= {'x': x_sc, 'y': y_sc}, 
                       display_legend=True, labels=["line 1", "line 2", "line 3"] )

ax_x = bq.Axis(scale=x_sc)
ax_y = bq.Axis(scale=y_sc, orientation='vertical', tick_format='0.2f')

fig = bq.Figure(marks=[line_chart], axes=[ax_x, ax_y])
fig.layout.width = '95%'

pz = PanZoom(scales={'x': [x_sc], 'y': [y_sc]})
pzx = PanZoom(scales={'x': [x_sc]})
pzy = PanZoom(scales={'y': [y_sc], })

zoom_interacts = widgets.ToggleButtons(
                                        options=OrderedDict([
                                            ('xy ', pz), 
                                            ('x ', pzx), 
                                            ('y ', pzy),   
                                            (' ', None)]),
                                        )

link((zoom_interacts, 'value'), (fig, 'interaction'))
ipyvue.Html(
    tag="div",
    style_= "transform: rotate(45deg)",
    children=[fig]
)