#!/usr/bin/env python
# coding: utf-8

# In[ ]:


import numpy as np

import ipyvuetify as v
import ipywidgets as widgets

from bqplot import pyplot as plt
import bqplot


# <!--NAVIGATION-->
# < [So easy, *voilà*!](08.01-voila-basics.ipynb) | [Contents](00.00-index.ipynb) |

# # Deploying voilà
# 
# ## First histogram plot: bqplot

# In[ ]:


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


# In[ ]:


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


# # Line chart

# In[ ]:


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


# In[ ]:


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


# # Set up voila vuetify layout
# The voila vuetify template does not render output from the notebook, it only shows widget with the mount_id metadata.

# In[ ]:


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


# # Running locally with voila
# ```
# $ voila --template vuetify-default --enable_nbextensions=True ./notebooks/08.02-voila-vuetify.ipynb
# ```
# 
# # Run it on mybinder
#  * Put it on a github repo, e.g. https://github.com/maartenbreddels/voila-demo
#    * Add a noteook, e.g. voila-vuetify.ipynb
#    * Make sure the kernelspec name is vanilla "python3" (modify this in the classical notebook under Edit->Edit Notebook Metadata)
#    * put in a requirements.txt, with at least voila and voila-vuetify
#  * Create a mybinder on https://ovh.mybinder.org/
#    * GitHub URL: e.g. https://github.com/maartenbreddels/voila-demo/
#    * Change 'File' to 'URL'
#    * URL to open: e.g. `voila/render/voila-vuetify.ipynb`
#  

# <!--NAVIGATION-->
# < [So easy, *voilà*!](08.01-voila-basics.ipynb) | [Contents](00.00-index.ipynb) |