chapter-5.ipynb

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [],
   "source": [
    "from jupyter_dash import JupyterDash\n",
    "import dash_core_components as dcc \n",
    "import dash_html_components as html \n",
    "import pandas as pd\n",
    "import plotly.express as px\n",
    "from datetime import date\n",
    "\n",
    "from dash.dependencies import Input, Output, State, ALL, MATCH, ALLSMALLER"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### HELLO WEB+DB PRESS APP"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "        <iframe\n",
       "            width=\"100%\"\n",
       "            height=\"650\"\n",
       "            src=\"http://127.0.0.1:8050/\"\n",
       "            frameborder=\"0\"\n",
       "            allowfullscreen\n",
       "        ></iframe>\n",
       "        "
      ],
      "text/plain": [
       "<IPython.lib.display.IFrame at 0x211234a9a00>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "app = JupyterDash(__name__)\n",
    "\n",
    "app.layout = html.H1('HELLO WEB+DB PRESS')\n",
    "\n",
    "app.run_server(mode='inline')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### With Image App"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "        <iframe\n",
       "            width=\"100%\"\n",
       "            height=\"650\"\n",
       "            src=\"http://127.0.0.1:8050/\"\n",
       "            frameborder=\"0\"\n",
       "            allowfullscreen\n",
       "        ></iframe>\n",
       "        "
      ],
      "text/plain": [
       "<IPython.lib.display.IFrame at 0x211126d7c40>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "app = JupyterDash(__name__)\n",
    "\n",
    "app.layout = html.Div([\n",
    "    html.P('Show Image', style={'backgroundColor': 'red', 'color': 'white'}),\n",
    "    html.Img(src='assets/kyoto2.png')\n",
    "])\n",
    "app.run_server(mode='inline')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### グラフの表示"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "        <iframe\n",
       "            width=\"100%\"\n",
       "            height=\"650\"\n",
       "            src=\"http://127.0.0.1:8050/\"\n",
       "            frameborder=\"0\"\n",
       "            allowfullscreen\n",
       "        ></iframe>\n",
       "        "
      ],
      "text/plain": [
       "<IPython.lib.display.IFrame at 0x2112368a4c0>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "df = pd.read_csv('data/kakei_data.csv', index_col=0, parse_dates=['date'])\n",
    "\n",
    "app = JupyterDash(__name__)\n",
    "\n",
    "app.layout = html.Div([\n",
    "    html.H1('Graphコンポーネントの利用'),\n",
    "    \n",
    "    dcc.Graph(\n",
    "        figure=px.line(df, x='date', y='スポーツ', title='スポーツ支出')\n",
    "    )\n",
    "])\n",
    "\n",
    "app.run_server(mode='inline')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### MARKDOWN"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "        <iframe\n",
       "            width=\"100%\"\n",
       "            height=\"650\"\n",
       "            src=\"http://127.0.0.1:8050/\"\n",
       "            frameborder=\"0\"\n",
       "            allowfullscreen\n",
       "        ></iframe>\n",
       "        "
      ],
      "text/plain": [
       "<IPython.lib.display.IFrame at 0x21123500eb0>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "app = JupyterDash(__name__)\n",
    "\n",
    "app.layout = dcc.Markdown('''\n",
    "    # Markdownを使います\n",
    "    ## Dash Components\n",
    "    ### dash html components\n",
    "    - htmlタグを提供します\n",
    "    ### dash core components \n",
    "    - 様々なツールを提供します\n",
    "''', style={\"color\": 'green', 'backgroundColor': 'black', 'padding': '2%'})\n",
    "\n",
    "app.run_server(mode='inline')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "        <iframe\n",
       "            width=\"100%\"\n",
       "            height=\"650\"\n",
       "            src=\"http://127.0.0.1:8050/\"\n",
       "            frameborder=\"0\"\n",
       "            allowfullscreen\n",
       "        ></iframe>\n",
       "        "
      ],
      "text/plain": [
       "<IPython.lib.display.IFrame at 0x21124e58b20>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "from datetime import date\n",
    "\n",
    "app = JupyterDash(__name__)\n",
    "\n",
    "four_styles = {'margin': '3%',\n",
    "                'width': '40%',\n",
    "                'display': 'inline-block',\n",
    "                'verticalAlign': 'top'}\n",
    "selection = ['tokyo', 'osaka', 'fukuoka']\n",
    "\n",
    "app.layout = html.Div([    \n",
    "    html.Div([dcc.Dropdown(options=[{'value': i, 'label': i} for i in selection],\n",
    "                value='tokyo')], style=four_styles),\n",
    "    html.Div([\n",
    "        dcc.Input(placeholder='文字を入力してください'),\n",
    "        ], style=four_styles),\n",
    "    html.Div([\n",
    "        dcc.DatePickerRange(start_date=date(2017, 12, 18), end_date=date(2020, 6,22),),\n",
    "        ],style=four_styles),\n",
    "    html.Div([\n",
    "            html.Button('HELLO PUSH ME')\n",
    "        ], style=four_styles)\n",
    "])\n",
    "\n",
    "app.run_server(mode='inline')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "        <iframe\n",
       "            width=\"100%\"\n",
       "            height=\"650\"\n",
       "            src=\"http://127.0.0.1:8050/\"\n",
       "            frameborder=\"0\"\n",
       "            allowfullscreen\n",
       "        ></iframe>\n",
       "        "
      ],
      "text/plain": [
       "<IPython.lib.display.IFrame at 0x21124e584f0>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "app = JupyterDash(__name__)\n",
    "\n",
    "graph_type_list = [px.line, px.scatter, px.bar]\n",
    "\n",
    "app.layout = html.Div([\n",
    "    dcc.Dropdown(\n",
    "        id = 'my_dropdown',\n",
    "        options = [{'label': type_.__name__, 'value': num} for num, type_ in enumerate(graph_type_list)],\n",
    "        value = 0\n",
    "    ),\n",
    "    html.Button(\n",
    "        id='my_button',\n",
    "        children='Update Graph'\n",
    "    ),\n",
    "    dcc.Graph(\n",
    "        id='my_graph',\n",
    "    ),\n",
    "])\n",
    "\n",
    "@app.callback(Output('my_graph', 'figure'),\n",
    "             [Input('my_button', 'n_clicks')],\n",
    "            [State('my_dropdown', 'value')]\n",
    "            )\n",
    "def update_graph(n_clicks, selected_value):\n",
    "    return graph_type_list[selected_value](x=[1,2,3,4,5], y=[1,2,3,4,5])\n",
    "\n",
    "app.run_server(mode='inline')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "        <iframe\n",
       "            width=\"100%\"\n",
       "            height=\"650\"\n",
       "            src=\"http://127.0.0.1:8050/\"\n",
       "            frameborder=\"0\"\n",
       "            allowfullscreen\n",
       "        ></iframe>\n",
       "        "
      ],
      "text/plain": [
       "<IPython.lib.display.IFrame at 0x21124e588b0>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "df = pd.read_csv('data/kakei_data.csv', index_col=0, parse_dates=['date'])\n",
    "df.iloc[:, :-1] = df.iloc[:, :-1].astype('float')\n",
    "\n",
    "app = JupyterDash(__name__)\n",
    "\n",
    "app.layout = html.Div([    \n",
    "    html.Button(id='my_button', children='PUSH ME'),\n",
    "    html.Div(id='my_div', children=[])\n",
    "])\n",
    "\n",
    "\n",
    "@app.callback(Output('my_div', 'children'),\n",
    "            [Input('my_button', 'n_clicks')],\n",
    "            [State('my_div', 'children')],\n",
    "            prevent_initial_call=True)\n",
    "def add_components(n_clicks, children):\n",
    "    new_components = html.Div([\n",
    "        dcc.Dropdown(id={'type': 'graph_dropdown',\n",
    "                        'index': n_clicks\n",
    "                        },\n",
    "                    options = [{'label': c, 'value': c} for c in list(df.columns[:-1])],\n",
    "                    value = [df.columns[:-1][n_clicks]],\n",
    "                    multi=True\n",
    "                    ),\n",
    "        dcc.Graph(id={'type':'my_graph', 'index': n_clicks})\n",
    "    ])\n",
    "    children.append(new_components)\n",
    "    return children\n",
    "\n",
    "@app.callback(Output({'type': 'my_graph', 'index': MATCH}, 'figure'),\n",
    "            [Input({'type': 'graph_dropdown', 'index': MATCH}, 'value')])\n",
    "def update_graph(selected_value):\n",
    "    return px.line(df, x='date', y=selected_value)\n",
    "\n",
    "app.run_server(mode='inline')"
   ]
  },
  {
   "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.8.3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}