Add a number of ValueIndicators

examples/reference/indicators/BooleanStatus.ipynb

@@ -73,29 +73,9 @@
   }
  ],
  "metadata": {
-  "kernelspec": {
-   "display_name": "Python 3",
-   "language": "python",
-   "name": "python3"
-  },
   "language_info": {
-   "codemirror_mode": {
-    "name": "ipython",
-    "version": 3
-   },
-   "file_extension": ".py",
-   "mimetype": "text/x-python",
    "name": "python",
-   "nbconvert_exporter": "python",
-   "pygments_lexer": "ipython3",
-   "version": "3.7.5"
-  },
-  "widgets": {
-   "application/vnd.jupyter.widget-state+json": {
-    "state": {},
-    "version_major": 2,
-    "version_minor": 0
-   }
+   "pygments_lexer": "ipython3"
   }
  },
  "nbformat": 4,

examples/reference/indicators/Dial.ipynb

@@ -0,0 +1,86 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import panel as pn\n",
+    "\n",
+    "from panel.widgets.indicators import Dial\n",
+    "\n",
+    "pn.extension()"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "The ``Dial`` is a value indicator providing a visual representation of a value as a simple radial dial.\n",
+    "\n",
+    "#### Parameters:\n",
+    "\n",
+    "For layout and styling related parameters see the [customization user guide](../../user_guide/Customization.ipynb).\n",
+    "\n",
+    "* **``annulus_width``** (int, default=10): Width of the gauge annulus.\n",
+    "* **``bounds``** (tuple, default=(0, 100)): The upper and lower bound of the dial.\n",
+    "* **``colors``** (list): Color thresholds for the Gauge, specified as a list of tuples of the fractional threshold and the color to switch to.\n",
+    "* **``default_color``** (str, default='lightblue'): Color to use if no color threshold are supplied to the `color` parameter\n",
+    "* **``end_angle``** (float or int, default=-45) Angle at which the gauge ends.\n",
+    "* **``format``** str(str, default='{value}%'): Formatting string for the value indicator.\n",
+    "* **``needle_color``** (str, default='black): Color of the needle.\n",
+    "* **``needle_width``** (float, default=0.1): Radial width of needle in radians.\n",
+    "* **``start_angle``** (float or int, default=225): Angle at which the gauge starts.\n",
+    "* **``tick_size``** (int): Font size of the tick labels.\n",
+    "* **``title_size``** (int): Font size of the title.\n",
+    "* **``unfilled_color``** (str, default='whitesmoke'): Color of the unfilled region of the Dial\n",
+    "* **``value``** (float or int, default=25): Value to indicate on the dial a value within the declared bounds.\n",
+    "* **``value_size``** (str): Font size of value label.\n",
+    "\n",
+    "___"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "The simplest form of a Gauge just requires setting a `value` which must be within the `bounds`. The default formatter and bounds assume you are providing a percentage:"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "Dial(name='Failure Rate', value=10, bounds=(0, 100))"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "If we want to display some other value such as the revolutions per minute of an engine we can set a different `bounds` value and override the `format`. Additionally we may also provide a different set of colors defining the threshold points at which the color should change as a fraction of the provided bounds. The `colors` accepts a list of tuples defining the fractions and the color:"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "Dial(name='Engine', value=2500, bounds=(0, 3000), format='{value} rpm',\n",
+    "      colors=[(0.2, 'green'), (0.8, 'gold'), (1, 'red')])"
+   ]
+  }
+ ],
+ "metadata": {
+  "language_info": {
+   "name": "python",
+   "pygments_lexer": "ipython3"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 4
+}

examples/reference/indicators/Gauge.ipynb

@@ -0,0 +1,85 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import panel as pn\n",
+    "\n",
+    "from panel.widgets.indicators import Gauge\n",
+    "\n",
+    "pn.extension('echarts')"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "The ``Gauge`` is a value indicator providing a visual representation of a value as a gauge or speed-o-meter. The `Gauge` is rendered using the ECharts library so when working in the notebook, ensure you load 'echarts' in `pn.extension`.\n",
+    "\n",
+    "#### Parameters:\n",
+    "\n",
+    "For layout and styling related parameters see the [customization user guide](../../user_guide/Customization.ipynb).\n",
+    "\n",
+    "* **``annulus_width``** (int, default=10): Width of the gauge annulus.\n",
+    "* **``bounds``** (tuple, default=(0, 100)): The upper and lower bound of the dial.\n",
+    "* **``colors``** (list): Color thresholds for the Gauge, specified as a list of tuples of the fractional threshold and the color to switch to.\n",
+    "* **``custom_opts``** (dict): Additional options to pass to the ECharts Gauge definition.\n",
+    "* **``end_angle``** (float or int, default=-45) Angle at which the gauge ends.\n",
+    "* **``format``** str(str, default='{value}%'): Formatting string for the value indicator.\n",
+    "* **``num_splits``** (int, default=10): Number of splits along the gauge.\n",
+    "* **``show_ticks``** (boolean, default=True): Whether to show ticks along the dials.\n",
+    "* **``show_labels``** (boolean, default=True): Whether to show tick labels along the dials.\n",
+    "* **``start_angle``** (float or int, default=225): Angle at which the gauge starts.\n",
+    "* **``tooltip_format``** (str, default='{b} : {c}%'): Formatting string for the hover tooltip.\n",
+    "* **``title_size``** (int, default=18): Size of title font.\n",
+    "* **``value``** (float or int, default=25): Value to indicate on the gauge a value within the declared bounds.\n",
+    "\n",
+    "___"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "The simplest form of a Gauge just requires setting a `value` which must be within the `bounds`. The default formatter and bounds assume you are providing a percentage:"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "Gauge(name='Failure Rate', value=10, bounds=(0, 100))"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "If we want to display some other value such as the revolutions per minute of an engine we can set a different `bounds` value and override the `format`. Additionally we may also provide a different set of colors defining the threshold points at which the color should change as a fraction of the provided bounds. The `colors` accepts a list of tuples defining the fractions and the color:"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "Gauge(name='Engine', value=2500, bounds=(0, 3000), format='{value} rpm',\n",
+    "      colors=[(0.2, 'green'), (0.8, 'gold'), (1, 'red')])"
+   ]
+  }
+ ],
+ "metadata": {
+  "language_info": {
+   "name": "python",
+   "pygments_lexer": "ipython3"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 4
+}

examples/reference/indicators/LoadingSpinner.ipynb

@@ -9,7 +9,6 @@
     "import panel as pn\n",
     "from panel.widgets.indicators import LoadingSpinner\n",
     "\n",
-    "\n",
     "pn.extension()"
    ]
   },
@@ -74,29 +73,9 @@
   }
  ],
  "metadata": {
-  "kernelspec": {
-   "display_name": "Python 3",
-   "language": "python",
-   "name": "python3"
-  },
   "language_info": {
-   "codemirror_mode": {
-    "name": "ipython",
-    "version": 3
-   },
-   "file_extension": ".py",
-   "mimetype": "text/x-python",
    "name": "python",
-   "nbconvert_exporter": "python",
-   "pygments_lexer": "ipython3",
-   "version": "3.7.5"
-  },
-  "widgets": {
-   "application/vnd.jupyter.widget-state+json": {
-    "state": {},
-    "version_major": 2,
-    "version_minor": 0
-   }
+   "pygments_lexer": "ipython3"
   }
  },
  "nbformat": 4,

examples/reference/indicators/Number.ipynb

@@ -0,0 +1,80 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import panel as pn\n",
+    "\n",
+    "from panel.widgets.indicators import Number\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 layout and styling related parameters see the [customization user guide](../../user_guide/Customization.ipynb).\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",
+    "* **``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": [
+    "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 = Number(name='Failure Rate', value=72, format='{value}%',\n",
+    "                colors=[(33, 'green'), (66, 'gold'), (100, 'red')])\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
+}