{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import numpy as np\n",
    "\n",
    "import ipyvuetify as v\n",
    "import ipywidgets as widgets\n",
    "\n",
    "from bqplot import pyplot as plt\n",
    "import bqplot"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<!--NAVIGATION-->\n",
    "< [So easy, *voilà*!](08.01-voila-basics.ipynb) | [Contents](00.00-index.ipynb) |"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Deploying voilà\n",
    "\n",
    "## First histogram plot: bqplot"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "n = 200\n",
    "\n",
    "x = np.linspace(0.0, 10.0, n)\n",
    "y = np.cumsum(np.random.randn(n)*10).astype(int)\n",
    "\n",
    "fig = plt.figure( title='Histogram')\n",
    "np.random.seed(0)\n",
    "hist = plt.hist(y, bins=25)\n",
    "fig"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "slider = v.Slider(thumb_label='always', class_=\"px-4\", v_model=30)\n",
    "widgets.link((slider, 'v_model'), (hist, 'bins'))\n",
    "slider"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Line chart"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "fig2 = plt.figure( title='Line Chart')\n",
    "np.random.seed(0)\n",
    "p = plt.plot(x, y)\n",
    "fig2"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "selector = bqplot.interacts.BrushIntervalSelector(scale=p.scales['x'])\n",
    "\n",
    "def update_range(*args):\n",
    "    if selector.selected is not None and selector.selected.shape == (2,):\n",
    "        mask = (x > selector.selected[0]) & (x < selector.selected[1])\n",
    "        hist.sample = y[mask]\n",
    "    \n",
    "selector.observe(update_range, 'selected')\n",
    "fig2.interaction = selector"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Set up voila vuetify layout\n",
    "The voila vuetify template does not render output from the notebook, it only shows widget with the mount_id metadata."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "scrolled": true
   },
   "outputs": [],
   "source": [
    "fig.layout.width = 'auto'\n",
    "fig.layout.height = 'auto'\n",
    "fig.layout.min_height = '300px' # so it still shows nicely in the notebook\n",
    "\n",
    "fig2.layout.width = 'auto'\n",
    "fig2.layout.height = 'auto'\n",
    "fig2.layout.min_height = '300px' # so it still shows nicely in the notebook\n",
    "\n",
    "\n",
    "content_main = v.Tabs(_metadata={'mount_id': 'content-main'}, children=[\n",
    "    v.Tab(children=['Tab1']),\n",
    "    v.Tab(children=['Tab2']),\n",
    "    v.TabItem(children=[\n",
    "        v.Layout(row=True, wrap=True, align_center=True, children=[\n",
    "            v.Flex(xs12=True, lg6=True, xl4=True, children=[\n",
    "                fig, slider\n",
    "            ]),\n",
    "            v.Flex(xs12=True, lg6=True, xl4=True, children=[\n",
    "                fig2\n",
    "            ]),\n",
    "        ])\n",
    "    ]),\n",
    "    v.TabItem(children=[\n",
    "        v.Container(children=['Lorum ipsum'])\n",
    "    ])\n",
    "])\n",
    "# no need to display content_main for the voila-vuetify template\n",
    "# but might be useful for debugging\n",
    "# content_main"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Running locally with voila\n",
    "```\n",
    "$ voila --template vuetify-default --enable_nbextensions=True ./notebooks/08.02-voila-vuetify.ipynb\n",
    "```\n",
    "\n",
    "# Run it on mybinder\n",
    " * Put it on a github repo, e.g. https://github.com/maartenbreddels/voila-demo\n",
    "   * Add a noteook, e.g. voila-vuetify.ipynb\n",
    "   * Make sure the kernelspec name is vanilla \"python3\" (modify this in the classical notebook under Edit->Edit Notebook Metadata)\n",
    "   * put in a requirements.txt, with at least voila and voila-vuetify\n",
    " * Create a mybinder on https://ovh.mybinder.org/\n",
    "   * GitHub URL: e.g. https://github.com/maartenbreddels/voila-demo/\n",
    "   * Change 'File' to 'URL'\n",
    "   * URL to open: e.g. `voila/render/voila-vuetify.ipynb`\n",
    " "
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<!--NAVIGATION-->\n",
    "< [So easy, *voilà*!](08.01-voila-basics.ipynb) | [Contents](00.00-index.ipynb) |"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "widgets-tutorial",
   "language": "python",
   "name": "widgets-tutorial"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.8.3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}