{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import panel as pn\n",
    "\n",
    "pn.extension('deckgl', 'echarts', 'plotly', 'vega')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "This example demonstrates how to use the `Tabs` panel to render a number of complex components without rendering them all at once by enabling the `dynamic` parameter."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Altair"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import altair as alt\n",
    "from vega_datasets import data\n",
    "\n",
    "cars = data.cars()\n",
    "\n",
    "chart = alt.Chart(cars).mark_circle(size=60).encode(\n",
    "    x='Horsepower',\n",
    "    y='Miles_per_Gallon',\n",
    "    color='Origin',\n",
    "    tooltip=['Name', 'Origin', 'Horsepower', 'Miles_per_Gallon']\n",
    ").properties(width='container', height='container').interactive()\n",
    "\n",
    "altair_pane = pn.panel(chart)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Bokeh"
   ]
  },
  {
   "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(sizing_mode='stretch_both', title=\"Pie Chart\", toolbar_location=None,\n",
    "           tools=\"hover\", tooltips=\"@country: @value\", x_range=(-0.5, 1.0), min_height=800)\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, sizing_mode=\"stretch_both\", max_width=1300)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## DeckGL"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "MAPBOX_KEY = (\n",
    "    \"pk.eyJ1IjoibWFyY3Nrb3ZtYWRzZW4iLCJhIjoiY2s1anMzcG5rMDYzazNvcm10NTFybTE4cSJ9.\"\n",
    "    \"TV1XBgaMfR-iTLvAXM_Iew\"\n",
    ")\n",
    "\n",
    "json_spec = {\n",
    "    \"initialViewState\": {\n",
    "        \"bearing\": -27.36,\n",
    "        \"latitude\": 52.2323,\n",
    "        \"longitude\": -1.415,\n",
    "        \"maxZoom\": 15,\n",
    "        \"minZoom\": 5,\n",
    "        \"pitch\": 40.5,\n",
    "        \"zoom\": 6\n",
    "    },\n",
    "    \"layers\": [{\n",
    "        \"@@type\": \"HexagonLayer\",\n",
    "        \"autoHighlight\": True,\n",
    "        \"coverage\": 1,\n",
    "        \"data\": \"https://raw.githubusercontent.com/uber-common/deck.gl-data/master/examples/3d-heatmap/heatmap-data.csv\",\n",
    "        \"elevationRange\": [0, 3000],\n",
    "        \"elevationScale\": 50,\n",
    "        \"extruded\": True,\n",
    "        \"getPosition\": \"@@=[lng, lat]\",\n",
    "        \"id\": \"8a553b25-ef3a-489c-bbe2-e102d18a3211\", \"pickable\": True\n",
    "    }],\n",
    "    \"mapStyle\": \"mapbox://styles/mapbox/dark-v9\",\n",
    "    \"views\": [{\"@@type\": \"MapView\", \"controller\": True}]\n",
    "}\n",
    "\n",
    "deck_gl = pn.pane.DeckGL(json_spec, mapbox_api_key=MAPBOX_KEY, sizing_mode='stretch_width', height=800)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Echarts"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "echart = {\n",
    "        'title': {\n",
    "            'text': 'ECharts entry example'\n",
    "        },\n",
    "        'tooltip': {},\n",
    "        'legend': {\n",
    "            'data':['Sales']\n",
    "        },\n",
    "        'xAxis': {\n",
    "            'data': [\"shirt\",\"cardign\",\"chiffon shirt\",\"pants\",\"heels\",\"socks\"]\n",
    "        },\n",
    "        'yAxis': {},\n",
    "        'series': [{\n",
    "            'name': 'Sales',\n",
    "            'type': 'bar',\n",
    "            'data': [5, 20, 36, 10, 10, 20]\n",
    "        }],\n",
    "    }\n",
    "    \n",
    "echarts_pane = pn.pane.ECharts(echart, height=800, width=800)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## HoloViews"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import pandas as pd\n",
    "import holoviews as hv\n",
    "import hvplot.pandas\n",
    "import holoviews.plotting.bokeh\n",
    "\n",
    "def sine(frequency=1.0, amplitude=1.0, function='sin'):\n",
    "    xs = np.arange(200)/200*20.0\n",
    "    ys = amplitude*getattr(np, function)(frequency*xs)\n",
    "    return pd.DataFrame(dict(y=ys), index=xs).hvplot(responsive=True)\n",
    "\n",
    "dmap = hv.DynamicMap(sine, kdims=['frequency', 'amplitude', 'function']).redim.range(\n",
    "    frequency=(0.1, 10), amplitude=(1, 10)).redim.values(function=['sin', 'cos', 'tan']).opts(height=800, line_width=4)\n",
    "\n",
    "hv_panel = pn.pane.HoloViews(dmap, widgets={\n",
    "    'amplitude': pn.widgets.LiteralInput(value=1., type=(float, int)),\n",
    "    'function': pn.widgets.RadioButtonGroup,\n",
    "    'frequency': {'value': 5},    \n",
    "}, center=True, sizing_mode='stretch_both').layout"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "\n",
    "## Matplotlib"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import numpy as np\n",
    "import matplotlib\n",
    "\n",
    "matplotlib.use('agg')\n",
    "\n",
    "import matplotlib.pyplot as plt\n",
    "\n",
    "Y, X = np.mgrid[-3:3:100j, -3:3:100j]\n",
    "U = -1 - X**2 + Y\n",
    "V = 1 + X - Y**2\n",
    "speed = np.sqrt(U*U + V*V)\n",
    "\n",
    "fig0, ax0 = plt.subplots()\n",
    "strm = ax0.streamplot(X, Y, U, V, color=U, linewidth=2, cmap=plt.cm.autumn)\n",
    "fig0.colorbar(strm.lines)\n",
    "\n",
    "mpl_pane = pn.pane.Matplotlib(fig0, dpi=144, height=800)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Plotly"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import numpy as np\n",
    "import plotly.graph_objs as go\n",
    "\n",
    "xx = np.linspace(-3.5, 3.5, 100)\n",
    "yy = np.linspace(-3.5, 3.5, 100)\n",
    "x, y = np.meshgrid(xx, yy)\n",
    "z = np.exp(-(x-1)**2-y**2)-(x**3+y**4-x/5)*np.exp(-(x**2+y**2))\n",
    "\n",
    "surface = go.Surface(z=z)\n",
    "layout = go.Layout(\n",
    "    title='Plotly 3D Plot',\n",
    "    autosize=True,\n",
    "    margin=dict(t=50, b=50, r=50, l=50)\n",
    ")\n",
    "fig = dict(data=[surface], layout=layout)\n",
    "\n",
    "plotly_pane = pn.pane.Plotly(fig)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Dynamic Tabs"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "tabs = pn.Tabs(\n",
    "    ('Altair', altair_pane),\n",
    "    ('Bokeh', bokeh_pane),\n",
    "    ('deck.GL', deck_gl),\n",
    "    ('Echarts', echarts_pane),\n",
    "    ('HoloViews', hv_panel),\n",
    "    ('Matplotlib', mpl_pane),\n",
    "    ('Plotly', plotly_pane),\n",
    "    dynamic=True\n",
    ")\n",
    "tabs"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## App\n",
    "\n",
    "Lets wrap it into nice template that can be served via `panel serve dynamic_tabs.ipynb`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "pn.template.FastListTemplate(site=\"Panel\", title=\"Dynamic Tabs\", main=[\"This example demonstrates **how to efficiently render a number of complex components in ``Tabs``** by using the `dynamic` parameter.\", tabs]).servable();"
   ]
  }
 ],
 "metadata": {
  "language_info": {
   "name": "python",
   "pygments_lexer": "ipython3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}
