import numpy as np

import ipyvuetify as v
import ipywidgets as widgets

from bqplot import pyplot as plt
import bqplot

n = 200

x = np.linspace(0.0, 10.0, n)
y = np.cumsum(np.random.randn(n)*10).astype(int)

fig = plt.figure( title='Histogram')
np.random.seed(0)
hist = plt.hist(y, bins=25)
fig

slider = v.Slider(thumb_label='always', class_="px-4", v_model=30)
widgets.link((slider, 'v_model'), (hist, 'bins'))
slider

fig2 = plt.figure( title='Line Chart')
np.random.seed(0)
p = plt.plot(x, y)
fig2

selector = bqplot.interacts.BrushIntervalSelector(scale=p.scales['x'])

def update_range(*args):
    if selector.selected is not None and selector.selected.shape == (2,):
        mask = (x > selector.selected[0]) & (x < selector.selected[1])
        hist.sample = y[mask]
    
selector.observe(update_range, 'selected')
fig2.interaction = selector

fig.layout.width = 'auto'
fig.layout.height = 'auto'
fig.layout.min_height = '300px' # so it still shows nicely in the notebook

fig2.layout.width = 'auto'
fig2.layout.height = 'auto'
fig2.layout.min_height = '300px' # so it still shows nicely in the notebook


content_main = v.Tabs(_metadata={'mount_id': 'content-main'}, children=[
    v.Tab(children=['Tab1']),
    v.Tab(children=['Tab2']),
    v.TabItem(children=[
        v.Layout(row=True, wrap=True, align_center=True, children=[
            v.Flex(xs12=True, lg6=True, xl4=True, children=[
                fig, slider
            ]),
            v.Flex(xs12=True, lg6=True, xl4=True, children=[
                fig2
            ]),
        ])
    ]),
    v.TabItem(children=[
        v.Container(children=['Lorum ipsum'])
    ])
])
# no need to display content_main for the voila-vuetify template
# but might be useful for debugging
# content_main