_Example Interactive.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Interactive Data Visualization\n",
    "\n",
    "<img style=\"float:left;\" src=\"dataviz.jpg\" width=\"500\" height=\"500\" />"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Autocomplete"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "76522adf1b084497b4a2d4c1b643b0bd",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "TickerAutoComplete(value='IBM US Equity', description='Security', max_results=5, yellow_keys=['Equity'])"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "from bqwidgets import TickerAutoComplete\n",
    "from IPython.display import display\n",
    "\n",
    "# Pick up a ticker -> Auto complete\n",
    "ticker_ac = TickerAutoComplete(description='Security', yellow_keys=['Equity'], max_results=5, value='IBM US Equity')\n",
    "\n",
    "display(ticker_ac)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Date Picker"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "2935d254753446fc9061ee38589fdeaf",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "DatePicker(date_format='%Y-%m-%d', description='Date', value='2020-09-09')"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "from bqwidgets import DatePicker\n",
    "from IPython.display import display\n",
    "\n",
    "# Datepicker\n",
    "date_picker = DatePicker(description='Date', date_format='%Y-%m-%d')\n",
    "\n",
    "display(date_picker)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Dropdown"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "18e092c2ce3c467c81c7e2f683836ae7",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Dropdown(description='Periodicity', options=('Annual', 'Semi-Annual', 'Quarterly'), value='Annual')"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "from ipywidgets import Dropdown\n",
    "from IPython.display import display\n",
    "\n",
    "# Dropdown\n",
    "dropdown = Dropdown(options=['Annual', 'Semi-Annual','Quarterly'],value='Annual',description='Periodicity')\n",
    "\n",
    "display(dropdown)\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Textbox"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "178f710308454de382c862f7cab9a854",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Text(value='Report Hello World', description='Report Name', placeholder='Some text...')"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "import ipywidgets as ipw\n",
    "from IPython.display import display\n",
    "\n",
    "# Textbox\n",
    "textbox = ipw.Text(value='Report Hello World', placeholder='Some text...', description='Report Name')\n",
    "\n",
    "display(textbox)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Interactive Button"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "9c7e18ff61854195a54b834a9e24375c",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "HBox(children=(TickerAutoComplete(value='IBM US Equity', description='Security', max_results=5, yellow_keys=['…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "from ipywidgets import *\n",
    "from bqwidgets import *\n",
    "from IPython.display import display\n",
    "\n",
    "import bql\n",
    "import pandas as pd\n",
    "\n",
    "# Link UI and bql service\n",
    "ticker_ac = TickerAutoComplete(description='Security', yellow_keys=['Equity'], max_results=5, value='IBM US Equity')\n",
    "button = widgets.Button(description='Get Price', button_style='')\n",
    "\n",
    "display(HBox([ticker_ac, button]))\n",
    "\n",
    "def on_button_click(btn):\n",
    "    ticker = ticker_ac.value.split(':')[0].strip()\n",
    "    bq = bql.Service()\n",
    "    response = bq.execute(\"get(PX_LAST) for(['{}'])\".format(ticker)) #https://pyformat.info/\n",
    "    print(response[0].df())\n",
    "    \n",
    "button.on_click(on_button_click)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "d01ad42340ff496098cd3152d8ad5ca6",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "HBox(children=(TickerAutoComplete(value='INDU Index', description='Index', max_results=5, yellow_keys=['Index'…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "from ipywidgets import Button\n",
    "from bqwidgets import TickerAutoComplete\n",
    "from IPython.display import display, clear_output\n",
    "\n",
    "import bql\n",
    "import pandas as pd\n",
    "\n",
    "# A bit better display of the table but need more imporvement\n",
    "\n",
    "ticker_ac = TickerAutoComplete(description='Index', yellow_keys=['Index'], max_results=5, value='INDU Index')\n",
    "button = Button(description='Get Price', button_style='')\n",
    "\n",
    "display(HBox([ticker_ac, button]))\n",
    "\n",
    "def on_button_click(btn):\n",
    "    \n",
    "    ticker = ticker_ac.value.split(':')[0].strip()\n",
    "    bq = bql.Service()\n",
    "    response = bq.execute(\"get(PX_LAST, INDUSTRY_SECTOR) for(Members(['{}']))\".format(ticker))\n",
    "    \n",
    "    data = response[0].df().reset_index()\n",
    "    \n",
    "    data = data.round({'PX_LAST': 2})[['ID', 'PX_LAST']]\n",
    "    \n",
    "    clear_output()\n",
    "    display(data.head(4))\n",
    "    \n",
    "    data = response[1].df()\n",
    "    #print(type(list(data['INDUSTRY_SECTOR'].unique())))\n",
    "    display(list(data['INDUSTRY_SECTOR'].unique()))\n",
    "    \n",
    "button.on_click(on_button_click)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Simple Price Chart"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "6c259fd26e86466fb28e7d6dae8cac24",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "HBox(children=(TickerAutoComplete(value='NDX Index', description='Index', max_results=5, yellow_keys=['Index']…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "47814a39543d4b24a183574098fddb52",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Figure(axes=[Axis(label='Date', scale=DateScale()), Axis(label='Price', orientation='vertical', scale=LinearSc…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "from ipywidgets import Button, HBox\n",
    "from bqwidgets import TickerAutoComplete\n",
    "from IPython.display import display\n",
    "\n",
    "import bql\n",
    "import pandas as pd\n",
    "\n",
    "from bqplot import DateScale, LinearScale, Axis, Lines, Figure\n",
    "\n",
    "DEFAULT_TICKER = 'NDX Index'\n",
    "\n",
    "ticker_ac = TickerAutoComplete(description='Index', yellow_keys=['Index'], max_results=5, value=DEFAULT_TICKER)\n",
    "button = Button(description='Get Price', button_style='')\n",
    "\n",
    "display(HBox([ticker_ac, button]))\n",
    "\n",
    "def getSixMonthPrice(ticker):\n",
    "    bq = bql.Service()\n",
    "    \n",
    "    data = bq.execute(\"get(dropna(px_last(start=-6M))) for (['{}'])\".format(ticker))\n",
    "    data = data[0].df()\n",
    "    \n",
    "    data.rename(\n",
    "        columns={\"DATE\": \"Date\", \n",
    "        \"CURRENCY\": \"Currency\", \n",
    "        data.columns[-1]: \"Last Price\"}, \n",
    "        inplace=True)\n",
    "    \n",
    "    return data\n",
    "\n",
    "\n",
    "def on_button_click(btn):\n",
    "    ticker = ticker_ac.value.split(':')[0].strip()\n",
    "    data = getSixMonthPrice(ticker)\n",
    "    line.y = data['Last Price'].values\n",
    "    fig.title = '{} Price'.format(ticker)\n",
    "    \n",
    "button.on_click(on_button_click)\n",
    "\n",
    "# Get data for the default ticker\n",
    "data = getSixMonthPrice(DEFAULT_TICKER)\n",
    "\n",
    "# Initialize the chart with default ticker\n",
    "x_sc = DateScale()\n",
    "y_sc = LinearScale()\n",
    "\n",
    "ax_x = Axis(label='Date', scale=x_sc, grid_lines='solid')\n",
    "ax_y = Axis(label='Price', scale=y_sc, orientation='vertical', grid_lines='solid')\n",
    "\n",
    "line = Lines(x=data['Date'].values, y=data['Last Price'].values, scales={'x': x_sc, 'y': y_sc}, display_legend=True, labels=['Price']) # Note labels takes python list!!!\n",
    "fig = Figure(axes=[ax_x, ax_y], marks=[line], title='{} Price'.format(DEFAULT_TICKER))\n",
    "\n",
    "\n",
    "\n",
    "\n",
    "display(fig)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# <font color = 'hotpink'>Interactivity (Callback) </font>\n",
    "\n",
    "#### We'll define a callback function that will get triggered when the user clicks the button. In the case of this particular application, it’s ultimately going to pull down BQL data as a data frame, construct a plot, and then display that plot. \n",
    "#### Later on we will amend this callback function to pull in the BQL data. We’ll leave the basic structure in place, but with just simple tweaks we can dramatically change the behavior. For the time being we'll just use our function to use generate the canned random data.\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {},
   "outputs": [],
   "source": [
    "#import libraries\n",
    "import ipywidgets as widgets\n",
    "import bqviz as bqv\n",
    "import bqplot as bqp\n",
    "import pandas as pd\n",
    "import numpy as np\n",
    "\n",
    "def pull_med_eps_chg(index_name, months_back):\n",
    "    df = pd.DataFrame(np.random.randn(10))\n",
    "    return df\n",
    "\n",
    "def construct_bar_plot(df):\n",
    "    plot = bqv.BarPlot(df)\n",
    "    return plot.show()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "209d8a64360d40e69ef63ed684804571",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "VBox(children=(Dropdown(options=('SPX Index', 'IBOV Index', 'INDU Index'), value='SPX Index'), IntSlider(value…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "#GUI\n",
    "index_picker = widgets.Dropdown(options=['SPX Index','IBOV Index', 'INDU Index'])\n",
    "months_back_picker = widgets.IntSlider(description='Months Back', value=3,min=1,max=24)\n",
    "button = widgets.Button(description='Click to Compute',button_style='success')\n",
    "output_area = widgets.HBox([])\n",
    "gui = widgets.VBox([index_picker, months_back_picker, button, output_area])\n",
    "gui"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### Define the callback function to do three things:\n",
    "- Pull the (canned) median eps change data by passing in the index and months back stripped from the GUI widgets\n",
    "- Feed the data frame into the function to construct a bar plot\n",
    "- Put the bar plot into the \"output area\" placeholder"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 10,
   "metadata": {},
   "outputs": [],
   "source": [
    "def button_callback(btn):\n",
    "    df = pull_med_eps_chg(index_picker.value, months_back_picker.value)\n",
    "#    p = construct_bar_plot(df)\n",
    "#    output_area.children=[p]\n",
    "    return df\n",
    "    "
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### We need to tie the callback to the button, so that when the button is clicked, the chart gets produced and placed in the output_area"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 11,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "209d8a64360d40e69ef63ed684804571",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "VBox(children=(Dropdown(options=('SPX Index', 'IBOV Index', 'INDU Index'), value='SPX Index'), IntSlider(value…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "a = button.on_click(button_callback)\n",
    "gui"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 12,
   "metadata": {},
   "outputs": [],
   "source": [
    "a"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "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
}