app.ipynb

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "f11fb0aa-9798-42c4-8045-89a17119a7b5",
   "metadata": {},
   "outputs": [],
   "source": [
    "import manganite\n",
    "%load_ext manganite"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "93cd20ee-490f-449e-8d26-dce9f1940993",
   "metadata": {},
   "source": [
    "# Widget Showcase\n",
    "\n",
    "This notebook presents all widget types available in Manganite. Feel free to copy their code and use it in your own dashboards.\n",
    "\n",
    "The `%%mnn widget` magic command has the following structure:\n",
    "\n",
    "```bash\n",
    "%%mnn widget --type TYPE [PARAMS] --tab TAB [--position ROW COL SPAN] --header HEADER --var VAR_NAME\n",
    "```\n",
    "\n",
    "where `TYPE` and optional `PARAMS` define the widget, `TAB`, `ROW`, `COL` and `SPAN` determine where to place it, and `HEADER` gives it a title above. `VAR_NAME` has to refer to an existing variable (can be defined in the same cell) of matching type (`bool` for a checkbox, `int` or `float` for a slider, etc.)\n",
    "\n",
    "`PARAMS` can take various forms, depending on widget type. Select boxes and radio buttons accept a variable holding their options (a collection of strings, can be any of `list`, `tuple`, `set`). Sliders take three numeric parameters, in the format of `MIN:MAX:STEP`. File pickers accept an optional string describing allowed file types, as defined for the `accept` attribute of the corresponding [HTML element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept)."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "6f124879-338f-4da6-ac9c-ae6a0593d621",
   "metadata": {},
   "outputs": [],
   "source": [
    "import datetime\n",
    "import pandas as pd\n",
    "list_of_options = ['option a', 'option b', 'option c']"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "605179e0-d800-46a8-86ed-f23172d778c3",
   "metadata": {},
   "outputs": [],
   "source": [
    "%%mnn widget --type checkbox --tab \"Options\" --header \"Checkbox\" --var b_1\n",
    "b_1 = True"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "b10f338c-584b-4766-9ee3-268efadaf2f7",
   "metadata": {},
   "outputs": [],
   "source": [
    "%%mnn widget --type switch --tab \"Options\" --header \"Switch\" --var b_2\n",
    "b_2 = False"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "5cd14108-e3a2-4d3f-b319-a2fa908f6735",
   "metadata": {
    "editable": true,
    "slideshow": {
     "slide_type": ""
    },
    "tags": []
   },
   "outputs": [],
   "source": [
    "%%mnn widget --type select list_of_options --tab \"Options\" --header \"Select\" --var s\n",
    "s = list_of_options[0]"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "8ec0923b-8fda-418c-a2b7-a7d9d85cbd2c",
   "metadata": {},
   "outputs": [],
   "source": [
    "%%mnn widget --type radio list_of_options --tab \"Options\" --header \"Radio buttons\" --var r\n",
    "r = list_of_options[1]"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "aa3169ae-6060-45f6-ae92-f7d8869288a0",
   "metadata": {},
   "outputs": [],
   "source": [
    "%%mnn widget --type slider 0:100:1 --tab \"Numbers\" --position 0 0 6 --header \"Int slider\" --var i\n",
    "i = 42"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "1fe24fc2-6db7-46e0-b5bf-7adf4978987a",
   "metadata": {},
   "outputs": [],
   "source": [
    "%%mnn widget --type text --tab \"Numbers\" --header \"Int input\" --var j\n",
    "j = -128"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "94e20a08-e77d-4d15-a299-e69dc1b4a29c",
   "metadata": {},
   "outputs": [],
   "source": [
    "%%mnn widget --type slider -4:4:0.01 --tab \"Numbers\" --position 1 0 6 --header \"Float slider\" --var f\n",
    "f = 3.14"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "892d031c-caad-4430-af09-10e5269368ad",
   "metadata": {
    "editable": true,
    "slideshow": {
     "slide_type": ""
    },
    "tags": []
   },
   "outputs": [],
   "source": [
    "%%mnn widget --type text --tab \"Numbers\" --header \"Float input\" --var g\n",
    "g = 9.99"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "6a7ecf24",
   "metadata": {},
   "outputs": [],
   "source": [
    "%%mnn widget --type text --tab \"Strings\" --header \"String input\" --var st\n",
    "st = 'Hello manganite'"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "cd7001ff-f6dc-4286-9794-d3666dec0a90",
   "metadata": {},
   "outputs": [],
   "source": [
    "%%mnn widget --type date --tab \"Dates\" --header \"Date\" --var d\n",
    "d = datetime.date.today()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "20734b96-2c9c-46d9-8547-d717ce8f5c13",
   "metadata": {},
   "outputs": [],
   "source": [
    "%%mnn widget --type datetime --tab \"Dates\" --header \"Datetime\" --var dt\n",
    "dt = datetime.datetime.now()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "fffdb0a9-8115-4675-952d-5983545dc478",
   "metadata": {},
   "outputs": [],
   "source": [
    "%%mnn widget --type table --tab \"Pandas\" --position 0 0 6 --header \"DataFrame\" --var df\n",
    "df = pd.read_excel('SupplierSourcing.xlsx',index_col=0)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "9b40f9b7-7f04-4702-9ee7-097fb171e01e",
   "metadata": {},
   "outputs": [],
   "source": [
    "%%mnn widget --type file --tab \"Files\" --position 0 0 3 --header \"File picker (any file)\" --var file_path\n",
    "file_path = '' # initial value is ignored"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "723ee2a1-39ce-4f3a-99ea-f10eebccae1a",
   "metadata": {},
   "outputs": [],
   "source": [
    "%%mnn widget --type file '.csv' --tab \"Files\" --position 0 3 3 --header \"File picker (only CSV)\" --var csv_path\n",
    "csv_path = '' # initial value is ignored"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "cd9d0f32-d91c-4ac7-bc32-a81fb91697c4",
   "metadata": {},
   "outputs": [],
   "source": [
    "%%mnn widget --type table --tab \"Files\" --position 1 0 6 --header \"CSV preview\" --var csv_df\n",
    "csv_df = pd.read_csv(csv_path) if csv_path else pd.DataFrame() # show empty DataFrame if no file selected"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "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.9.0"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}