{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import panel as pn\n",
    "pn.extension()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The ``Bokeh`` pane allows displaying any displayable [Bokeh](http://bokeh.org) model inside a Panel app. Since Panel is built on Bokeh internally, the Bokeh model is simply inserted into the plot. Since Bokeh models are ordinarily only displayed once, some Panel-related functionality such as syncing multiple views of the same model may not work. Nonetheless this pane type is very useful for combining raw Bokeh code with the higher-level Panel API.\n",
    "\n",
    "#### Parameters:\n",
    "\n",
    "* **``object``** (bokeh.layouts.LayoutDOM): The Bokeh model to be displayed\n",
    "\n",
    "___"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from math import pi\n",
    "import pandas as pd\n",
    "\n",
    "from bokeh.palettes import Category20c, Category20\n",
    "from bokeh.plotting import figure\n",
    "from bokeh.transform import cumsum\n",
    "\n",
    "x = {\n",
    "    'United States': 157,\n",
    "    'United Kingdom': 93,\n",
    "    'Japan': 89,\n",
    "    'China': 63,\n",
    "    'Germany': 44,\n",
    "    'India': 42,\n",
    "    'Italy': 40,\n",
    "    'Australia': 35,\n",
    "    'Brazil': 32,\n",
    "    'France': 31,\n",
    "    'Taiwan': 31,\n",
    "    'Spain': 29\n",
    "}\n",
    "\n",
    "data = pd.Series(x).reset_index(name='value').rename(columns={'index':'country'})\n",
    "data['angle'] = data['value']/data['value'].sum() * 2*pi\n",
    "data['color'] = Category20c[len(x)]\n",
    "\n",
    "p = figure(plot_height=350, title=\"Pie Chart\", toolbar_location=None,\n",
    "           tools=\"hover\", tooltips=\"@country: @value\", x_range=(-0.5, 1.0))\n",
    "\n",
    "r = p.wedge(x=0, y=1, radius=0.4,\n",
    "        start_angle=cumsum('angle', include_zero=True), end_angle=cumsum('angle'),\n",
    "        line_color=\"white\", fill_color='color', legend_field='country', source=data)\n",
    "\n",
    "p.axis.axis_label=None\n",
    "p.axis.visible=False\n",
    "p.grid.grid_line_color = None\n",
    "\n",
    "bokeh_pane = pn.pane.Bokeh(p)\n",
    "bokeh_pane"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "To update a plot with a live server, we can simply modify the underlying model and then ``trigger`` an update on the pane's object parameter:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "r.data_source.data['color'] = Category20[len(x)]\n",
    "bokeh_pane.param.trigger('object')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Alternatively the model may also be replaced entirely, in a live server:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from bokeh.models import Div\n",
    "\n",
    "bokeh_pane.object = Div(text='<h2>This text replaced the pie chart</h2>')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Controls\n",
    "\n",
    "The `Bokeh` pane exposes a number of options which can be changed from both Python and Javascript. Try out the effect of these parameters interactively:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "pn.Row(bokeh_pane.controls(jslink=True), bokeh_pane)"
   ]
  }
 ],
 "metadata": {
  "language_info": {
   "name": "python",
   "pygments_lexer": "ipython3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}
