{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "ed7c1d01-d655-4878-a27d-c6d0e330097b",
   "metadata": {},
   "outputs": [],
   "source": [
    "import panel as pn\n",
    "import pandas as pd\n",
    "\n",
    "pn.extension()"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "ea1bc3ca-f83c-48e5-8046-7a4341ed835d",
   "metadata": {},
   "source": [
    "The `Swipe` layout enables you to quickly compare two panels laid out on top of each other with a part of the *before* panel shown on one side of a slider and a part of the *after* panel shown on the other side.\n",
    "\n",
    "#### Parameters:\n",
    "\n",
    "* **`end`** (int): Limits the maximum percentage the swipe handler can be moved to.\n",
    "* **`objects`** (list): The before and after components to lay out.\n",
    "* **`start`** (int): Limits the minimum percentage the swipe handler can be moved to.\n",
    "* **`value`** (int): The percentage of the *after* panel shown. Default is 50.\n",
    "\n",
    "Styling-related parameters:\n",
    "\n",
    "* **`slider_width`** (int): The width of the slider in pixels. Default is 12.\n",
    "* **`slider_color`** (str): The color of the slider. Default is 'black'.\n",
    "\n",
    "For further layout and styling-related parameters see the [Control the size](../../tutorials/basic/size.md), [Align Content](../../tutorials/basic/align.md) and [Style](../../tutorials/basic/style.md) tutorials.\n",
    "\n",
    "---"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "5613561d-d483-45df-8cbb-366abbb96e79",
   "metadata": {},
   "source": [
    "The `Swipe` layout accepts any two objects, which must have identical sizing options to work as intended.\n",
    "\n",
    "Here we compare two images of mean surface temperatures in 1945-1949 and temperatures between 2015-2019:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "07cdc635-9642-4335-9862-d8195dadade7",
   "metadata": {},
   "outputs": [],
   "source": [
    "gis_1945 = 'https://earthobservatory.nasa.gov/ContentWOC/images/globaltemp/global_gis_1945-1949.png'\n",
    "gis_2015 = 'https://earthobservatory.nasa.gov/ContentWOC/images/globaltemp/global_gis_2015-2019.png'\n",
    "\n",
    "pn.Swipe(gis_1945, gis_2015)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "9af72676-c50d-4c61-820d-048daf8872e9",
   "metadata": {},
   "source": [
    "The layout can compare any type of component, e.g. here we will compare two violin plots:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "c6187cb3-21a1-4900-be93-02ce3e480ff4",
   "metadata": {},
   "outputs": [],
   "source": [
    "import hvplot.pandas\n",
    "\n",
    "penguins = pd.read_csv('https://datasets.holoviz.org/penguins/v1/penguins.csv')\n",
    "\n",
    "pn.Swipe(\n",
    "    penguins[penguins.species=='Chinstrap'].hvplot.violin('bill_length_mm', color='#00cde1'),\n",
    "    penguins[penguins.species=='Adelie'].hvplot.violin('bill_length_mm', color='#cd0000'),\n",
    "    value=51\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "8fba9d29-fc6f-4b13-889f-189f10a5ac4c",
   "metadata": {},
   "source": [
    "We may also limit the minimum and maximum percentage the swipe handle can be dragged to using the `start` and `stop` values:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "1ecc584a-fae8-45d8-90f5-22a1d980a065",
   "metadata": {},
   "outputs": [],
   "source": [
    "pn.Swipe(f\"<code>|{'-'*100}|</code>\", f\"<code>|{'='*100}|</code>\", start=20, end=80)"
   ]
  }
 ],
 "metadata": {
  "language_info": {
   "name": "python",
   "pygments_lexer": "ipython3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}