2 Dashboards.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<a id=\"dashboard-top\"></a>\n",
    "<div style=\"width: 50px; height: 50px; border-radius: 50%; background: #2E86C1; margin-bottom: 0px; text-align: center;\">\n",
    "    <img src=\"../img/Welcome Page/orbit.png\" style=\"max-width: 150%; max-height: 150%; right: 25%; bottom: 13px; position: relative;\">\n",
    "</div>\n",
    "<h1 style=\"margin-top: 20px; margin-bottom: 5px;\">Dashboards<br><span style=\"color: orange; margin-bottom: 0px;\">Using <code style=\"color: orange; background-color: transparent;\">ipywidgets</code> to Build Interactive Apps</span></h1>\n",
    "<h3 style=\"color: orange; margin-top: 0px;\">(30-min Read)</h3>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "By the end of this document, you will be able to:\n",
    "1. Build several interactive widgets from the `ipywidgets` library\n",
    "1. Understand the basics of Python callback functions\n",
    "1. Use Python callback functions to connect widgets to other UI elements\n",
    "1. Publish an application to your Bloomberg Terminal Launchpad."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Contents\n",
    "- [Intro to `ipywidgets`](#dash-intro)\n",
    "- [Overview of Popular Widgets](#dash-pop)\n",
    "- [Programming Interactivity](#dash-int)\n",
    "- [UI Layout](#dash-layout)\n",
    "- [App Publication](#dash-publish)\n",
    "\n",
    "<a href=\"1 BQL for Asset Classes.ipynb\">&larr; Back to BQL for Asset Classes</a>&emsp; | &emsp;\n",
    "<a href=\"3 Debugging.ipynb\">Continue to Orbit: Debugging & Maintenance &rarr;</a>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "---\n",
    "<a id=\"dash-intro\"></a>\n",
    "<h1>Intro to <code style=\"background-color: transparent;\">ipywidgets</code><br><span style=\"color: orange;\">Interactive HTML Widgets for Jupyter</span></h1>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The `ipywidgets` library is an open-source project allowing you to add buttons, sliders, checkboxes, and a number of other widgets to your Jupyter notebooks. Write Python functions to connect these widgets to other elements in your app's user interface. Use these widgets in combination with BQL queries and data visualization elements to create custom interactive dashboards to improve your workflow.\n",
    "\n",
    "Begin by importing the library. The example below displays an HTML widget and a checkbox."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "3f2c24b3fd894034b2514b00dc1d56a1",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "HTML(value='<h1>ipywidgets Example</h1>')"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "f19473454bee4500b370c06209b4c526",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Checkbox(value=False, description='Checkbox')"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "# Run this cell with the Run button in the Jupyter toolbar\n",
    "# import the libraries\n",
    "import ipywidgets as widgets\n",
    "from IPython.display import display\n",
    "\n",
    "# build the widgets\n",
    "title = widgets.HTML('<h1>ipywidgets Example</h1>')\n",
    "checkbox = widgets.Checkbox(description='Checkbox')\n",
    "\n",
    "# display the widgets\n",
    "display(title)\n",
    "display(checkbox)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "[&uarr; Return to Top](#dashboard-top)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "---\n",
    "<a id=\"dash-pop\"></a>\n",
    "<h1>Overview of Popular Widgets<br><span style=\"color: orange;\">Create Buttons, Sliders, Dropdowns, and More</span></h1>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The examples below give you a glimpse of some of the most popular widgets. A [complete list of widgets](https://ipywidgets.readthedocs.io/en/latest/examples/Widget%20List.html#) is available in the `ipywidgets` documentation online."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<br><h3 style=\"color: orange;\">Slider</h3>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "885fc85e5b274941bf128bd31f5b7746",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "IntSlider(value=5, continuous_update=False, description='Slider:', max=10)"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "# Run this cell with the Run button in the Jupyter toolbar\n",
    "slider = widgets.IntSlider(\n",
    "     value=5,\n",
    "     min=0,\n",
    "     max=10,\n",
    "     step=1,\n",
    "     description='Slider:',\n",
    "     disabled=False,\n",
    "     continuous_update=False,\n",
    "     orientation='horizontal',\n",
    "     readout=True,\n",
    "     readout_format='d',\n",
    ")\n",
    "\n",
    "display(slider)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<br><h3 style=\"color: orange;\">Range Slider</h3>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "6f3f56c862ec47989011fffb37e258a8",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "IntRangeSlider(value=(2, 7), continuous_update=False, description='Range Slider:', max=10)"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "# Run this cell with the Run button in the Jupyter toolbar\n",
    "range_slider = widgets.IntRangeSlider(\n",
    "    value=[2, 7],\n",
    "    min=0,\n",
    "    max=10,\n",
    "    step=1,\n",
    "    description='Range Slider:',\n",
    "    disabled=False,\n",
    "    continuous_update=False,\n",
    "    orientation='horizontal',\n",
    "    readout=True,\n",
    "    readout_format='d',\n",
    ")\n",
    "\n",
    "display(range_slider)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<br><h3 style=\"color: orange;\">Dropdown</h3>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "2cbec0ba96e24ea1b81832f34aaf6bfa",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Dropdown(description='Dropdown:', options=('Item 1', 'Item 2', 'Item 3'), value='Item 1')"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "# Run this cell with the Run button in the Jupyter toolbar\n",
    "dropdown=widgets.Dropdown(\n",
    "    options=['Item 1', 'Item 2', 'Item 3'],\n",
    "    value='Item 1',\n",
    "    description='Dropdown:',\n",
    "    disabled=False,\n",
    ")\n",
    "\n",
    "display(dropdown)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<br><h3 style=\"color: orange;\">Radio Buttons</h3>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "6783eeb011e3479d839b5b0befb1fdbe",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "RadioButtons(description='Radio Buttons:', options=('Item 1', 'Item 2', 'Item 3'), value='Item 1')"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "# Run this cell with the Run button in the Jupyter toolbar\n",
    "radio_buttons = widgets.RadioButtons(\n",
    "    options=['Item 1', 'Item 2', 'Item 3'],\n",
    "    description='Radio Buttons:',\n",
    "    disabled=False\n",
    ")\n",
    "\n",
    "display(radio_buttons)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<br><h3 style=\"color: orange;\">Text</h3>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "db119a08eb224e4e948f127ba06a747b",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Text(value='', description='Text Widget:', placeholder='Type something')"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "# Run this cell with the Run button in the Jupyter toolbar\n",
    "text_widget = widgets.Text(\n",
    "#     value='Hello World',\n",
    "    placeholder='Type something',\n",
    "    description='Text Widget:',\n",
    "    disabled=False\n",
    ")\n",
    "\n",
    "display(text_widget)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<br><h3 style=\"color: orange;\">Button</h3>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "a9d013a0a6534ecfae3bcff762ba1346",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Button(description='Click me', icon='check', style=ButtonStyle(), tooltip='Click me')"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "# Run this cell with the Run button in the Jupyter toolbar\n",
    "button = widgets.Button(\n",
    "    description='Click me',\n",
    "    disabled=False,\n",
    "    button_style='', # 'success', 'info', 'warning', 'danger' or ''\n",
    "    tooltip='Click me',\n",
    "    icon='check' # (FontAwesome names without the `fa-` prefix)\n",
    ")\n",
    "\n",
    "display(button)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "[&uarr; Return to Top](#dashboard-top)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "---\n",
    "<a id=\"dash-int\"></a>\n",
    "<h1>Programming Interactivity<br><span style=\"color: orange;\">Connect Widgets to Data Visualization</span></h1>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<h3 style=\"color: orange;\">Python Callback Functions</h3>\n",
    "<p>In Python, when a function is passed as an argument to another function, we call the passed function a \"callback.\" We use callback functions in our user interface design to connect widgets to other objects. When a button is clicked, for example, we want our app to respond in some way. Behind the scenes, Python will execute a function when the button is clicked, but we have to specify which one.</p>\n",
    "<p>The example below demonstrates the basic structure of the relationship between callbacks and higher-order functions.</p>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "This text came from a callback function\n",
      "1 + 2 = 3\n"
     ]
    }
   ],
   "source": [
    "# Run this cell with the Run button in the Jupyter toolbar\n",
    "def my_callback(a, b):\n",
    "    print('This text came from a callback function')\n",
    "    print(f'{a} + {b} = {a + b}')\n",
    "    \n",
    "def higher_order_func(c, d, callback):\n",
    "    callback(c, d)\n",
    "    \n",
    "# run the higher order function which will run the callback\n",
    "higher_order_func(1, 2, my_callback)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<br><h3 style=\"color: orange;\">Programming a Button Click</h3>\n",
    "<p>Button widgets have a special method named <code>on_click</code> to which we can pass a custom callback function. This callback will be executed whenever the button detects a click. In the example below, we update the value of an HTML widget whenever a button is clicked.</p>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "5a4463f55248470abd59ba35cb7068e5",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "HTML(value='<p>Button Clicks: 0</p>')"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "cf0f0dfd62d141338d51765e31297e3c",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Button(description='Click me', style=ButtonStyle())"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "# Run this cell with the Run button in the Jupyter toolbar\n",
    "button_widget = widgets.Button(description='Click me')\n",
    "html_widget = widgets.HTML('<p>Button Clicks: 0</p>')\n",
    "\n",
    "def update_count(evt):    # <-- the callback function must be able to accept an event argument\n",
    "    # use string splitting methods to get the current value in the HTML\n",
    "    click_count = int(html_widget.value.split(': ')[1].split('<')[0])\n",
    "    click_count += 1\n",
    "    html_widget.value = f'<p>Button Clicks: {click_count}</p>'\n",
    "    \n",
    "# use the updaet_count function as a callback passed to the on_click method\n",
    "button_widget.on_click(update_count)\n",
    "\n",
    "display(html_widget, button_widget)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<br><h3 style=\"color: orange;\">Using the <code style=\"color: orange; background-color: transparent;\">observe()</code> method</h3>\n",
    "<p>While buttons are fairly straightforward, some widgets like the dropdown and slider hold values, and they must respond to changes in those values. In the last example, we passed a callback to the button's <code>on_click</code> method. With dropdowns and sliders, we can use a method called <code>observe</code> to fire a callback when something about the widget is changed. In the example below, we use a dropdown widget to filter a DataGrid. DataGrids have a <code>transform</code> method we can use to programattically filter the table.</p>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "3de1e0709f5341ccbfbd8a3c8cab0e16",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Dropdown(description='Color:', options=('all', 'red', 'blue'), value='all')"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "5d9ceefb73ba40219ad361323a084e76",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "DataGrid(base_column_size=75, column_widths={'Customer': 100}, default_renderer=TextRenderer(), header_rendere…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "# Run this cell with the Run button in the Jupyter toolbar\n",
    "import pandas as pd\n",
    "from ipydatagrid import DataGrid\n",
    "\n",
    "# get sample data\n",
    "data = pd.DataFrame(data={'Sizes': ['small', 'large', 'x-small', 'small', 'large'],\n",
    "                          'Colors': ['red', 'blue', 'red', 'red', 'blue'],\n",
    "                          'Quantity': [1, 2, 1, 5, 3],\n",
    "                          'Paid': [True, True, False, False, True]})\n",
    "data.index = [f'Customer {i}' for i in range(len(data))]\n",
    "data.index.name = 'Customer'\n",
    "\n",
    "# build grid\n",
    "grid = DataGrid(dataframe=data,\n",
    "                layout={'height': '150px'},\n",
    "                base_column_size=75,\n",
    "                column_widths={'Customer': 100})\n",
    "\n",
    "# dropdown widget\n",
    "dropdown = widgets.Dropdown(\n",
    "    options=['all'] + list(set(data['Colors'])),  # <-- use set() to remove duplicates\n",
    "    value='all',\n",
    "    description='Color:'\n",
    ")\n",
    "\n",
    "# define callback\n",
    "def filter_by_color(evt):\n",
    "    if evt['new'] == 'all':\n",
    "        grid.revert()\n",
    "    else:\n",
    "        transformation = {'type': 'filter',\n",
    "                          'columnIndex': data.index.nlevels + 1,   # <-- the number of index levels plus the index of the column\n",
    "                          'operator': '=',\n",
    "                          'value': evt['new']}\n",
    "        grid.transform([transformation])\n",
    "\n",
    "# use observe to connect the callback to changes in the 'value' property\n",
    "dropdown.observe(filter_by_color, 'value')\n",
    "\n",
    "# show dropdown and grid\n",
    "display(dropdown, grid)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<div style=\"border: 1px dotted orange; padding-left: 10px; padding-bottom: 10px;\">\n",
    "    <h3>&#9998; Try it out</h3>\n",
    "    <p>\n",
    "        Practice with widget callbacks\n",
    "        <ol>\n",
    "            <li>Add a new Jupyter code cell below this one</li>\n",
    "            <li>Declare a variable named <code>my_checkbox</code> and set it equal to a checkbox widget. The description for this checkbox should be <code>'Show Only Unpaid'</code>.</li>\n",
    "            <li>Write a callback function that will filter the grid for \"false\" values in the Paid column of the <code>grid</code> declared in the example above.</li>\n",
    "            <li>Use the checkbox's <code>observe()</code> method to filter the grid when the box is checked.</li>\n",
    "            <li>Display both the checkbox and DataGrid.</li>\n",
    "        </ol>\n",
    "    We've written one possible solution to this problem in a hidden Python cell below. When you're ready to get a peek at an answer, click the <img src=\"../img/Controls/hidden_cell.png\"> below.\n",
    "    </p>\n",
    "</div>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<p style=\"color: orange; font-size: 12px;\">&darr; Click below to expand answer</p>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "jupyter": {
     "source_hidden": true
    }
   },
   "outputs": [],
   "source": [
    "my_checkbox = widgets.Checkbox(\n",
    "    description='Show Only Unpaid'\n",
    ")\n",
    "\n",
    "def filter_unpaid(evt):\n",
    "    if not evt['new']:\n",
    "        grid.revert()\n",
    "    else:\n",
    "        transformation = {\n",
    "            'type': 'filter',\n",
    "            'columnIndex': data.index.nlevels + 3,\n",
    "            'operator': '=',\n",
    "            'value': False\n",
    "        }\n",
    "        grid.transform([transformation])\n",
    "        \n",
    "my_checkbox.observe(filter_unpaid, 'value')\n",
    "        \n",
    "display(my_checkbox, grid)\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "[&uarr; Return to Top](#dashboard-top)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "---\n",
    "<a id=\"dash-layout\"></a>\n",
    "<h1>UI Layout<br><span style=\"color: orange;\">Use Box Widgets to Organize Your App</span></h1>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Box widgets are useful tools for organizing busy dashboards. Pass a list of child elements to widgets like `HBox` and `VBox` to create structure in your applications."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<h3 style=\"color: orange;\">Unorganized Dashboard</h3>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 60,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "cabd22ca4ffc4bc691bed709fc3f3b42",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "IntSlider(value=5, description='Slider #0', max=10)"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "eaac196e192c4bf791dcb74741483dd7",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "IntSlider(value=5, description='Slider #1', max=10)"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "4675febd838b421eaf0829e0384ad566",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "IntSlider(value=5, description='Slider #2', max=10)"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "a47da9b1328a437b934d8077c1cf1e73",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "IntSlider(value=5, description='Slider #3', max=10)"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "98274192a3ef46ec9064accce23c9bfd",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "IntSlider(value=5, description='Slider #4', max=10)"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "f670a2a1c32c4c2598fc033d47b32d55",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Checkbox(value=False, description='Checkbox #0')"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "ededc22fbdf242e0aa2a059a043574c5",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Checkbox(value=False, description='Checkbox #1')"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "e245d85ca4144c0682342f9178cc1e86",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Checkbox(value=False, description='Checkbox #2')"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "671baa4e95ed482d802239c28fa175c8",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Checkbox(value=False, description='Checkbox #3')"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "822099bd704c4257a8d1d8b14dae628a",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Checkbox(value=False, description='Checkbox #4')"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "07a612f9334f4e318e7c7b72edff2663",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Button(description='Button #0', style=ButtonStyle())"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "d24c326bdef143049ae9fc11e2f95004",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Button(description='Button #1', style=ButtonStyle())"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "427e09f9e4e84982b553d12ad44741f0",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Button(description='Button #2', style=ButtonStyle())"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "feb3874e420d4c86a7a3372d5873e467",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Button(description='Button #3', style=ButtonStyle())"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "e1aea1daa9194baa8c71af2397d2a1d0",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Button(description='Button #4', style=ButtonStyle())"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "# Run this cell with the Run button in the Jupyter toolbar\n",
    "# create 5 example sliders\n",
    "sliders = [widgets.IntSlider(value=5, max=10, min=0, description=f'Slider #{i}') for i in range(5)]\n",
    "\n",
    "# create 5 example checkboxes\n",
    "checkboxes = [widgets.Checkbox(description=f'Checkbox #{i}') for i in range(5)]\n",
    "\n",
    "# create 5 sample buttons\n",
    "buttons = [widgets.Button(description=f'Button #{i}') for i in range(5)]\n",
    "\n",
    "for item in sliders + checkboxes + buttons:\n",
    "    display(item)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<br><h3 style=\"color: orange;\">Organize Dashboard with Box Widgets</h3>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 64,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "a03f303f8b944ae6a8961b17b3297129",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "HBox(children=(VBox(children=(IntSlider(value=5, description='Slider #0', max=10), IntSlider(value=5, descript…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "# Run this cell with the Run button in the Jupyter toolbar\n",
    "slider_box = widgets.VBox(sliders, layout={'border': '1px solid yellow'})\n",
    "checkbox_box = widgets.VBox(checkboxes, layout={'border': '1px solid red'})\n",
    "button_box = widgets.VBox(buttons, layout={'border': '1px solid green'})\n",
    "\n",
    "all_controls = widgets.HBox([slider_box, checkbox_box, button_box])\n",
    "\n",
    "display(all_controls)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "[&uarr; Return to Top](#dashboard-top)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "---\n",
    "<a id=\"dash-publish\"></a>\n",
    "<h1>App Publication<br><span style=\"color: orange;\">Attach Your App to the Terminal Launchpad</span></h1>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "BQuant leverages a technology called Voilà to transform your Jupyter notebooks into stand-alone apps which can then be published to your Terminal Launchpad. After you've made the final edits to a project, navigate to Project &rarr; Publish to Launchpad in the BQuant toolbar. You can control how your app is shared with others by establishing viewing permissions. \n",
    "\n",
    "<img src=\"../img/Orbit/publish.png\" style=\"max-height: 300px;\">\n",
    "\n",
    "Upon publication, Bloomberg will generate a special Terminal command you can run to view the app in the Launchpad. View and copy this command by navigating to Project &rarr; Update Published Project &rarr; Show Publication Link.\n",
    "\n",
    "<img src=\"../img/Orbit/pub_link.png\" style=\"max-height: 300px;\">\n",
    "\n",
    "<a href=\"https://voila.readthedocs.io/en/stable/\">Read more about Voilà</a> in the open-source documentation."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "[&uarr; Return to Top](#dashboard-top)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "----\n",
    "<p style=\"text-align:center;\">\n",
    "    Click on the links below to continue learning.<br>\n",
    "    <a href=\"1 BQL for Asset Classes.ipynb\">&larr; Back to BQL for Asset Classes</a>&emsp;&emsp;\n",
    "    <a href=\"#dashboard-top\">&uarr; Return to Top</a>&emsp;&emsp;\n",
    "    <a href=\"3 Debugging.ipynb\">Continue to Orbit: Debugging & Maintenance &rarr;</a>\n",
    "    <br>\n",
    "    <br>\n",
    "    <a href=\"../Welcome.ipynb#welcome-top\" style=\"font-size: 12px;\">Return to the Welcome Page</a>\n",
    "</p>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3 (sandboxed)",
   "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.1"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}