{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import panel as pn\n",
    "\n",
    "pn.extension()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The ``Number`` is a value indicator providing a visual representation of a value, which may be colored according to provided thresholds.\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",
    "* **``colors``** (list): Color thresholds for the Number indicator, specified as a tuple of the absolute thresholds and the color to switch to.\n",
    "* **``default_color``** (str, default='black'): The color of the Number indicator if no `colors` are provided\n",
    "* **``format``** (str, default='{value}'): A formatter string which accepts a {value}.\n",
    "* **``font_size``** (str, default='54pt'): The size of number itself.\n",
    "* **``nan_format``** str(str, default='-'): How to format nan values.\n",
    "* **``title_size``** (str, default='18pt'): The size of number title.\n",
    "* **``value``** (int or float): The value of the number indicator.\n",
    "\n",
    "___"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The `Number` indicator can be used to indicate a simple number and formatted as needed:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "pn.indicators.Number(name='Failure Rate', value=10, format='{value}%')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "If we want to specify specific thresholds at which the indicator changes color:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "number = pn.indicators.Number(\n",
    "    name='Failure Rate', value=72, format='{value}%',\n",
    "    colors=[(33, 'green'), (66, 'gold'), (100, 'red')]\n",
    ")\n",
    "\n",
    "pn.Row(number.clone(value=10), number.clone(value=42), number.clone(value=93))"
   ]
  }
 ],
 "metadata": {
  "language_info": {
   "name": "python",
   "pygments_lexer": "ipython3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}
