nb_pretty_investment.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Making it pretty using Vuetify components and ipyvuetify\n",
    "\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from typing import List\n",
    "from download_listing import get_listing\n",
    "from mortgage import mortgage\n",
    "from home_value import home_value, letting_cash_flow\n",
    "from charts import altair_outcomes_chart, altair_wealth_chart, altair_format\n",
    "from charts import bokeh_outcomes_chart, bokeh_wealth_chart, show"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Generate an investment scenario"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import pandas as pd\n",
    "import numpy as np\n",
    "\n",
    "def scenario(price=500_000, transaction_cost = 0.05, downpayment = 0.05,\n",
    "             years = 20, inflation = .018, inflation_houseprice = 0.045,\n",
    "             rate_mortgage = 0.028, rental_rate = 0, interest_only = False):\n",
    "    \n",
    "    # Report input assumptions\n",
    "    scenario_conditions = [\n",
    "        f'House price: £{price}',\n",
    "        f'transaction_cost: £{transaction_cost*price:.0f} ({100*transaction_cost:.2f}%)',\n",
    "        f'downpayment: £{downpayment*price:.0f} ({100*downpayment:.2f}%)',\n",
    "        f'term (years): {years}',\n",
    "        f'inflation {100*inflation:.2f}%',\n",
    "        f'house price appreciation: {100*inflation_houseprice:.2f}%',\n",
    "        f'rate_mortgage: {100*rate_mortgage:.2f}%',\n",
    "        f'monthly rental income: £{rental_rate:.2f}',\n",
    "        f'interest-only: {\"yes\" if interest_only else \"no\"}'\n",
    "    ]\n",
    "    transaction_cost *= price\n",
    "    downpayment *= price \n",
    "\n",
    "    # Schedule and outcomes over time\n",
    "    loan_schedule = mortgage(price, downpayment, rate_mortgage, years, interest_only=interest_only)\n",
    "    debt_balance = loan_schedule.debt_balance.resample('Y').last()\n",
    "    interest_paid = loan_schedule.interest_payments.resample('Y').sum().cumsum()\n",
    "\n",
    "    # Home value and letting income\n",
    "    home = home_value(price, inflation_houseprice, years)\n",
    "    letting_income = letting_cash_flow(rental_rate, years, inflation).cumsum()\n",
    "\n",
    "    # Actual cash flow\n",
    "    cash_flow = (\n",
    "        loan_schedule.full_payments.resample('Y').sum()\n",
    "        + letting_income\n",
    "    )\n",
    "    cash_flow.iloc[0] -= transaction_cost\n",
    "    cash_flow.iloc[0] -= downpayment\n",
    "    cash_flow = cash_flow.cumsum()\n",
    "\n",
    "    # Real situation\n",
    "    wealth = home + letting_income - downpayment - debt_balance - transaction_cost\n",
    "\n",
    "    # Discounted value at time T - discounting by inflation\n",
    "    df = pd.DataFrame(\n",
    "        data = [debt_balance, interest_paid, cash_flow, wealth],\n",
    "        index = 'debt_balance, interest_payments, cash_flow, wealth'.split(', ')\n",
    "    ).T.dropna()\n",
    "\n",
    "    discounting_factor = np.pv(inflation, np.arange(len(df)), 0, fv=-1)\n",
    "    df = df.mul(discounting_factor, axis=0)\n",
    "    \n",
    "    # Charts\n",
    "    adf = altair_format(df)\n",
    "    outcomes_c = altair_outcomes_chart(adf)\n",
    "    wealth_c = altair_wealth_chart(adf)\n",
    "    \n",
    "    return df, scenario_conditions, outcomes_c, wealth_c"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Trying Vuetify"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from IPython.display import display, clear_output\n",
    "import ipywidgets\n",
    "import ipyvuetify as v\n",
    "import traitlets\n",
    "from traitlets import Int, Float, Unicode, Bool"
   ]
  },
  {
   "cell_type": "raw",
   "metadata": {},
   "source": [
    "v.*?"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "v.Slider(v_model=55, min=10, max=95, step=5, thumb_label='always', class_='ma-5 pa-5')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "v.Checkbox(v_model=True, label='Hi there')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "scrolled": true
   },
   "outputs": [],
   "source": [
    "v.Col(md='6', children=[\n",
    "           v.Slider(v_model=100000, min=10, max=100000, step=5, thumb_label='always', class_='ma-5 pa-5')\n",
    "])"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Creating the app"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Model"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "class Model(traitlets.HasTraits):\n",
    "    price = Int(500_000)\n",
    "    transaction_cost = Float(0.05)\n",
    "    downpayment = Float(0.05)\n",
    "    years = Int(20)\n",
    "    inflation = Float(.018)\n",
    "    inflation_houseprice = Float(0.045)\n",
    "    rate_mortgage = Float(0.028)\n",
    "    rental_rate = Int(0)\n",
    "    interest_only = Bool(False)\n",
    "    \n",
    "model = Model()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## View\n",
    "\n",
    "### Inputs"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "price_slider = v.Slider(v_model=250_000, \n",
    "                        min=50_000, max=1_000_000, \n",
    "                        step=25_000\n",
    "                       )\n",
    "price_field = v.TextField(v_model=250_000, outlined=True, dense=True, prefix='£')\n",
    "\n",
    "\n",
    "term_slider = v.Slider(v_model=20, min=5, max=30, step=5, thumb_label='always')\n",
    "\n",
    "interest_only_checkbox = v.Checkbox(v_model=False, label='interest-only loan')\n",
    "\n",
    "inflation_slider = v.Slider(v_model=0.02, min=0.0, max=0.15, step=0.0025, thumb_label='always')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Layout elements"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "def make_card(title=\"Title\", children=[]):\n",
    "    card_content = v.CardText(children=children)\n",
    "    return (\n",
    "        v.Card(outlined=True, tile=True, #class_='ma-1 pa-2', \n",
    "            children=[\n",
    "                v.CardTitle(children=[title]),\n",
    "                card_content\n",
    "            ]),\n",
    "        card_content\n",
    "    )\n",
    "\n",
    "def make_control(title, children):\n",
    "    return (\n",
    "        v.Card(flat=True, tile=True, #class_='ma-1 pa-2', \n",
    "            children=[\n",
    "                v.CardText(children=[title]),\n",
    "                v.CardText(children=children)\n",
    "            ])\n",
    "        )\n",
    "\n",
    "# To be used in the presentation section\n",
    "def make_infobox(scenario_conditions: List[str]):\n",
    "    return [\n",
    "        v.List(dense=True, children=[\n",
    "            v.ListItem(children=[line])\n",
    "            for line in scenario_conditions\n",
    "        ])\n",
    "    ]\n",
    "\n",
    "controls_box, cbc = make_card('Controls', children=[\n",
    "    make_control('Price', [price_slider, price_field]),\n",
    "    make_control('Term', [term_slider]),\n",
    "    make_control('Inflation', [inflation_slider])\n",
    "])\n",
    "conditions_infobox, cic = make_card('Scenario assumptions')\n",
    "wealth_chart_box, wcc = make_card('Wealth over time', [ipywidgets.Output()])\n",
    "outcomes_chart_box, obc = make_card('Financial outcomes', [ipywidgets.Output()])"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Layout arrangement"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "center_content = v.Container(fluid=True, children=[\n",
    "    v.Row(dense=True, children=[\n",
    "        v.Col(cols=\"12\", children=[\n",
    "            v.Row(align='start', justify='left', dense=True, children=[\n",
    "                v.Col(cols=\"9\", md=\"9\", children=[\n",
    "                    wealth_chart_box\n",
    "                ]),\n",
    "                v.Col(cols=\"9\", md=\"9\", children=[\n",
    "                    outcomes_chart_box\n",
    "                ])\n",
    "            ])\n",
    "        ]),\n",
    "        v.Col(cols=\"12\", children=[\n",
    "            v.Row(align='start', justify='left', dense=True, children=[\n",
    "#                 v.Col(cols=\"6\", md=\"6\", children=[\n",
    "#                     controls_box\n",
    "#                 ]),\n",
    "                v.Col(cols=\"9\", md=\"9\", children=[\n",
    "                    conditions_infobox\n",
    "                ])\n",
    "            ])\n",
    "        ])\n",
    "    ])\n",
    "])\n",
    "navbar = v.NavigationDrawer(absolute=True, permanent=True, right=True, raised=True, \n",
    "                            class_='ma-3 pa-6', children=[\n",
    "      controls_box\n",
    "])\n",
    "\n",
    "app = v.Container(_metadata={'mount_id': 'content-main'}, children=[\n",
    "      center_content, navbar\n",
    "])"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Presentation"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### On-refresh"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "def render_scenario(change):\n",
    "    with model.hold_trait_notifications():\n",
    "        (\n",
    "             schedule_df, \n",
    "             scenario_conditions, \n",
    "             outcomes_c, \n",
    "             wealth_c\n",
    "        ) = scenario(\n",
    "                price                = model.price,\n",
    "                downpayment          = model.downpayment,\n",
    "                inflation            = model.inflation,\n",
    "                inflation_houseprice = model.inflation_houseprice,\n",
    "                interest_only        = model.interest_only,\n",
    "                rate_mortgage        = model.rate_mortgage,\n",
    "                rental_rate          = model.rental_rate,\n",
    "                transaction_cost     = model.transaction_cost,\n",
    "                years                = model.years)\n",
    "\n",
    "        cic.children = make_infobox(scenario_conditions)\n",
    "\n",
    "        with obc.children[0]:\n",
    "            clear_output(wait=True)\n",
    "            display(outcomes_c)\n",
    "\n",
    "        with wcc.children[0]:\n",
    "            clear_output(wait=True)\n",
    "            display(wealth_c)\n",
    "    \n",
    "model.observe(render_scenario, traitlets.All)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Link inputs to model"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "ipywidgets.jslink((price_slider, 'v_model'), (price_field, 'v_model'))\n",
    "\n",
    "traitlets.link(\n",
    "    (model, 'price'), (price_slider, 'v_model')\n",
    ")\n",
    "traitlets.link(\n",
    "    (model, 'years'), (term_slider, 'v_model')\n",
    ")\n",
    "traitlets.link(\n",
    "    (model, 'inflation'), (inflation_slider, 'v_model')\n",
    ")\n",
    "traitlets.link(\n",
    "    (model, 'interest_only'), (interest_only_checkbox, 'v_model')\n",
    ");"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Show the app"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "render_scenario('')\n",
    "\n",
    "app"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Exercise: Add a slider!"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "model.trait_names()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "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.4"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}