{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Example of jupyterlab-dash extension"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Imports\n",
    "import dash\n",
    "import dash_core_components as dcc\n",
    "import dash_html_components as html\n",
    "import pandas as pd\n",
    "import plotly.graph_objs as go"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Load and preprocess data\n",
    "df = pd.read_csv(\n",
    "    'https://gist.githubusercontent.com/chriddyp/'\n",
    "    'cb5392c35661370d95f300086accea51/raw/'\n",
    "    '8e0768211f6b747c0db42a9ce9a0937dafcbd8b2/'\n",
    "    'indicators.csv')\n",
    "\n",
    "available_indicators = df['Indicator Name'].unique()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Build AppViewer \n",
    "from jupyterlab_dash import AppViewer\n",
    "viewer = AppViewer()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Build App\n",
    "external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']\n",
    "app = dash.Dash(__name__, external_stylesheets=external_stylesheets)\n",
    "\n",
    "app.layout = html.Div([\n",
    "    html.Div([\n",
    "\n",
    "        html.Div([\n",
    "            dcc.Dropdown(\n",
    "                id='xaxis-column',\n",
    "                options=[{'label': i, 'value': i} for i in available_indicators],\n",
    "                value='Fertility rate, total (births per woman)'\n",
    "            ),\n",
    "            dcc.RadioItems(\n",
    "                id='xaxis-type',\n",
    "                options=[{'label': i, 'value': i} for i in ['Linear', 'Log']],\n",
    "                value='Linear',\n",
    "                labelStyle={'display': 'inline-block'}\n",
    "            )\n",
    "        ],\n",
    "        style={'width': '48%', 'display': 'inline-block'}),\n",
    "\n",
    "        html.Div([\n",
    "            dcc.Dropdown(\n",
    "                id='yaxis-column',\n",
    "                options=[{'label': i, 'value': i} for i in available_indicators],\n",
    "                value='Life expectancy at birth, total (years)'\n",
    "            ),\n",
    "            dcc.RadioItems(\n",
    "                id='yaxis-type',\n",
    "                options=[{'label': i, 'value': i} for i in ['Linear', 'Log']],\n",
    "                value='Linear',\n",
    "                labelStyle={'display': 'inline-block'}\n",
    "            )\n",
    "        ],style={'width': '48%', 'float': 'right', 'display': 'inline-block'})\n",
    "    ]),\n",
    "\n",
    "    dcc.Graph(id='indicator-graphic'),\n",
    "\n",
    "    dcc.Slider(\n",
    "        id='year--slider',\n",
    "        min=df['Year'].min(),\n",
    "        max=df['Year'].max(),\n",
    "        value=df['Year'].max(),\n",
    "        marks={str(year): str(year) for year in df['Year'].unique()}\n",
    "    )\n",
    "])\n",
    "\n",
    "# Callbacks\n",
    "@app.callback(\n",
    "    dash.dependencies.Output('indicator-graphic', 'figure'),\n",
    "    [dash.dependencies.Input('xaxis-column', 'value'),\n",
    "     dash.dependencies.Input('yaxis-column', 'value'),\n",
    "     dash.dependencies.Input('xaxis-type', 'value'),\n",
    "     dash.dependencies.Input('yaxis-type', 'value'),\n",
    "     dash.dependencies.Input('year--slider', 'value')])\n",
    "def update_graph(xaxis_column_name, yaxis_column_name,\n",
    "                 xaxis_type, yaxis_type,\n",
    "                 year_value):\n",
    "    dff = df[df['Year'] == year_value]\n",
    "    return {\n",
    "        'data': [go.Scatter(\n",
    "            x=dff[dff['Indicator Name'] == xaxis_column_name]['Value'],\n",
    "            y=dff[dff['Indicator Name'] == yaxis_column_name]['Value'],\n",
    "            text=dff[dff['Indicator Name'] == yaxis_column_name]['Country Name'],\n",
    "            mode='markers',\n",
    "            marker={\n",
    "                'size': 15,\n",
    "                'opacity': 1,\n",
    "                'color': 'blue',\n",
    "                'line': {'width': 2}\n",
    "            }\n",
    "        )],\n",
    "        'layout': go.Layout(\n",
    "            xaxis={\n",
    "                'title': xaxis_column_name,\n",
    "                'type': 'linear' if xaxis_type == 'Linear' else 'log'\n",
    "            },\n",
    "            yaxis={\n",
    "                'title': yaxis_column_name,\n",
    "                'type': 'linear' if yaxis_type == 'Linear' else 'log'\n",
    "            },\n",
    "            margin={'l': 40, 'b': 40, 't': 10, 'r': 0},\n",
    "            hovermode='closest',\n",
    "        )\n",
    "    }\n",
    "\n",
    "viewer.show(app)"
   ]
  },
  {
   "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.2"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}