{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "89880d24-facb-4442-b4c6-0f892fdd695b",
   "metadata": {},
   "outputs": [],
   "source": [
    "import panel as pn\n",
    "pn.extension()"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "8c688161-e1a0-440c-8890-afb350a5709e",
   "metadata": {},
   "source": [
    "The `ColorMap` widget allows selecting a `value` from a dictionary containing color palettes. The widget is similar to a [`Select` widget](./Select.ipynb) except it allows only valid color palettes, i.e. lists of hex or named colors or matplotlib colormaps. \n",
    "\n",
    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.html).\n",
    "\n",
    "#### Parameters:\n",
    "\n",
    "For details on other options for customizing the component see the [layout](../../how_to/layout/index.md) and [styling](../../how_to/styling/index.md) how-to guides.\n",
    "\n",
    "##### Core\n",
    "\n",
    "* **`options`** (list or dict): A list or dictionary of options to select from\n",
    "* **`ncols`** (int, default=1): Number of columns.\n",
    "* **`swatch_height`** (int, default=20): Height of colormap swatch.\n",
    "* **`swatch_width`** (int, default=100): Width of colormap swatch.\n",
    "* **`value`** (list[str]): The current value; must be one of the option values\n",
    "* **`value_name`** (str): The name of the selected colormap.\n",
    "\n",
    "##### Display\n",
    "\n",
    "* **`disabled`** (boolean): Whether the widget is editable\n",
    "* **`name`** (str): The title of the widget\n",
    "\n",
    "___\n",
    "\n",
    "The `options` of a `ColorMap` must be a dictionary containing a list of colors specified as hex values, named colors or `rgba()` CSS color specifications. You may provide either the concrete colormap as the `value` or the name of the colormap in the dictionary using the `value_name`:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "1ff44f03-dc1d-4326-a4fb-c02d8dbec597",
   "metadata": {},
   "outputs": [],
   "source": [
    "cmaps = {\n",
    "    'Reds': ['lightpink', 'red', 'darkred'],\n",
    "    'Blues': ['rgba(0, 0, 255, 1)', 'rgba(0, 0, 170, 1)', 'rgba(0, 0, 85, 1)'],\n",
    "    'Greens': ['#00ff00', '#00aa00', '#004400']\n",
    "}\n",
    "\n",
    "color_map = pn.widgets.ColorMap(options=cmaps, value_name='Reds', width=200, margin=(0, 0, 100, 0))\n",
    "\n",
    "color_map"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "e43b4b6a-3235-437d-9046-38c968eab67f",
   "metadata": {},
   "source": [
    "When rendering many colormaps you can enable `ncols` and control the size of the color swatches using the `swatch_width` and `swatch_height` options:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "4777c5b4-4e0a-421e-83b0-cd1c0cd710e7",
   "metadata": {},
   "outputs": [],
   "source": [
    "import colorcet as cc\n",
    "\n",
    "pn.widgets.ColorMap(options=cc.palette, ncols=3, swatch_width=100, margin=(0, 0, 200, 0))"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "3214ba3f-50ee-40fd-8adb-e0316b6b3929",
   "metadata": {},
   "source": [
    "The widget also supports matplotlib colormaps:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "f5ee1263-82b8-4270-97dc-5df3b78848f9",
   "metadata": {},
   "outputs": [],
   "source": [
    "from matplotlib.cm import Reds, Blues, Greens\n",
    "\n",
    "pn.widgets.ColorMap(options={'Reds': Reds, 'Blues': Blues, 'Greens': Greens}, margin=(0, 0, 100, 0))"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "d73e1bcd-9116-4aa9-9ceb-e4ffe1261b9e",
   "metadata": {},
   "source": [
    "### Controls\n",
    "\n",
    "The `ColorMap` widget 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,
   "id": "6e12b87e-f461-411f-88f5-5f67f68c1921",
   "metadata": {},
   "outputs": [],
   "source": [
    "pn.Row(color_map.controls(jslink=True), color_map)"
   ]
  }
 ],
 "metadata": {
  "language_info": {
   "name": "python",
   "pygments_lexer": "ipython3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}