{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import panel as pn\n",
    "import hvplot.pandas\n",
    "\n",
    "from bokeh.sampledata.autompg import autompg_clean\n",
    "\n",
    "pn.extension(sizing_mode=\"stretch_width\")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "This example demonstrates how to combine multiple columns of widgets into an overall layout."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "quant = [None, 'mpg', 'cyl', 'displ', 'hp', 'weight', 'yr']\n",
    "cat = [None, 'origin', 'mfr', 'yr']\n",
    "combined = quant+cat[1:]\n",
    "\n",
    "x = pn.widgets.Select(name='x', value='mpg', options=combined)\n",
    "y = pn.widgets.Select(name='y', value='cyl', options=combined)\n",
    "color = pn.widgets.Select(name='color', options=combined)\n",
    "facet = pn.widgets.Select(name='facet', options=cat)\n",
    "\n",
    "@pn.depends(x, y, color, facet)\n",
    "def plot(x, y, color, facet):\n",
    "    cmap = 'Category10' if color in cat else 'viridis'\n",
    "    return autompg_clean.hvplot.scatter(\n",
    "        x, y, color=color or 'green', by=facet, subplots=True, padding=0.1,\n",
    "        cmap=cmap, responsive=True, min_height=500, size=100\n",
    "    )\n",
    "\n",
    "settings = pn.Row(pn.WidgetBox(x, y, color, facet))\n",
    "pn.Column(\n",
    "    '### Auto MPG Explorer', \n",
    "    settings,\n",
    "    plot,\n",
    "    width_policy='max'\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## App\n",
    "\n",
    "Lets wrap it into nice template that can be served via `panel serve dynamic_widget_values.ipynb`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "pn.template.FastListTemplate(\n",
    "    site=\"Panel\", title=\"Auto MPG Explorer\", sidebar=[settings], \n",
    "    main=[\"This example demonstrates **how to combine multiple columns of components into an overall layout**.\", plot]\n",
    ").servable();"
   ]
  }
 ],
 "metadata": {
  "language_info": {
   "name": "python",
   "pygments_lexer": "ipython3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}