Streamlit.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "2b04209f-265b-454f-ace5-6e71eb1c4f5b",
   "metadata": {},
   "source": [
    "<img src=\"https://uploads-ssl.webflow.com/614b1fe22fa8b90ef41aeffe/6265cb48f9496b1cefc9ab75_logotipo-mbit-39.png\" width=\"200px\" align=\"right\" CLASS=\"TextWrap\" style=\"background-color:#2a3f3f;\">\n",
    "\n",
    "</br>\n",
    "</br>\n",
    "\n",
    "## Cómo crear aplicaciones visuales para interactuar con tus datos\n",
    "\n",
    "---\n",
    "\n",
    "### Streamlit\n",
    "\n",
    "---\n",
    "\n",
    "#### Javier Cózar (javier.cozar@mbitschool.com)\n",
    "\n",
    "---"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "658c3b63-5245-43ad-b316-4cc0d904190e",
   "metadata": {},
   "source": [
    "## Datos\n",
    "\n",
    "En esta libreta vamos a trabajar con unos datos obtenidos de [Kaggle](https://www.kaggle.com/datasets/carrie1/ecommerce-data?select=data.csv) relacionados con datos del un e-commerce, y datos de latitud y longitud obtenidos a partir de [Google](https://developers.google.com/public-data/docs/canonical/countries_csv). Estos datos han sido combinados y transformados a formato parquet."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "14d33da4-303f-40ae-a329-2d812a2d4631",
   "metadata": {},
   "source": [
    "[Streamlit](https://streamlit.io/) es una librería de Python que nos permite desarrollar aplicaciones visuales con un mínimo de código. No requiere experiencia en front-end, ya que encapsula la estructura visual de la aplicación en funciones interpretables de Python."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "3b876b06-121b-48ea-9f2d-1cd369410d1e",
   "metadata": {},
   "source": [
    "## st.write\n",
    "\n",
    "Esta funcionalidad de streamlit permite visualizar cualquier cosa en la aplicación, desde un texto hasta una tabla de pandas o un plot! Vamos a comprobarlo.\n",
    "\n",
    "**Nota**: para lanzar nuestra aplicación basta con escribir `streamlit run <script.py>`, donde script.py es un fichero escrito en python (copiaremos el código de las celdas al script de python)."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "id": "09654bf5-1691-4e7a-a715-7e3f8651d5dd",
   "metadata": {},
   "outputs": [],
   "source": [
    "import streamlit as st\n",
    "import pandas as pd\n",
    "\n",
    "df = pd.read_parquet(\"ecommerce.parquet\")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "id": "0874f4df-0dcf-49ae-a7de-5289f15c3c1e",
   "metadata": {},
   "outputs": [],
   "source": [
    "df_plot = (\n",
    "    df\n",
    "    .groupby(\"Country\")\n",
    "    .agg({\n",
    "        \"Quantity\": \"sum\"\n",
    "    })\n",
    "    .reset_index()\n",
    ")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "61714a10-3c82-400b-98b1-4a4dd01fe151",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div>\n",
       "<style scoped>\n",
       "    .dataframe tbody tr th:only-of-type {\n",
       "        vertical-align: middle;\n",
       "    }\n",
       "\n",
       "    .dataframe tbody tr th {\n",
       "        vertical-align: top;\n",
       "    }\n",
       "\n",
       "    .dataframe thead th {\n",
       "        text-align: right;\n",
       "    }\n",
       "</style>\n",
       "<table border=\"1\" class=\"dataframe\">\n",
       "  <thead>\n",
       "    <tr style=\"text-align: right;\">\n",
       "      <th></th>\n",
       "      <th>Country</th>\n",
       "      <th>Quantity</th>\n",
       "    </tr>\n",
       "  </thead>\n",
       "  <tbody>\n",
       "    <tr>\n",
       "      <th>0</th>\n",
       "      <td>Australia</td>\n",
       "      <td>83653</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>1</th>\n",
       "      <td>Austria</td>\n",
       "      <td>4827</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>2</th>\n",
       "      <td>Bahrain</td>\n",
       "      <td>260</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>3</th>\n",
       "      <td>Belgium</td>\n",
       "      <td>23152</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>4</th>\n",
       "      <td>Brazil</td>\n",
       "      <td>356</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>5</th>\n",
       "      <td>Canada</td>\n",
       "      <td>2763</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>6</th>\n",
       "      <td>Cyprus</td>\n",
       "      <td>6317</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>7</th>\n",
       "      <td>Czech Republic</td>\n",
       "      <td>592</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>8</th>\n",
       "      <td>Denmark</td>\n",
       "      <td>8188</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>9</th>\n",
       "      <td>Finland</td>\n",
       "      <td>10666</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>10</th>\n",
       "      <td>France</td>\n",
       "      <td>109848</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>11</th>\n",
       "      <td>Germany</td>\n",
       "      <td>117448</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>12</th>\n",
       "      <td>Greece</td>\n",
       "      <td>1556</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>13</th>\n",
       "      <td>Iceland</td>\n",
       "      <td>2458</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>14</th>\n",
       "      <td>Ireland</td>\n",
       "      <td>136329</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>15</th>\n",
       "      <td>Israel</td>\n",
       "      <td>3990</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>16</th>\n",
       "      <td>Italy</td>\n",
       "      <td>7999</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>17</th>\n",
       "      <td>Japan</td>\n",
       "      <td>25218</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>18</th>\n",
       "      <td>Lebanon</td>\n",
       "      <td>386</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>19</th>\n",
       "      <td>Lithuania</td>\n",
       "      <td>652</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>20</th>\n",
       "      <td>Malta</td>\n",
       "      <td>944</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>21</th>\n",
       "      <td>Netherlands</td>\n",
       "      <td>200128</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>22</th>\n",
       "      <td>Norway</td>\n",
       "      <td>19247</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>23</th>\n",
       "      <td>Poland</td>\n",
       "      <td>3653</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>24</th>\n",
       "      <td>Portugal</td>\n",
       "      <td>16044</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>25</th>\n",
       "      <td>Russia</td>\n",
       "      <td>352</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>26</th>\n",
       "      <td>Saudi Arabia</td>\n",
       "      <td>75</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>27</th>\n",
       "      <td>Singapore</td>\n",
       "      <td>5234</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>28</th>\n",
       "      <td>Spain</td>\n",
       "      <td>26824</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>29</th>\n",
       "      <td>Sweden</td>\n",
       "      <td>35637</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>30</th>\n",
       "      <td>Switzerland</td>\n",
       "      <td>29778</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>31</th>\n",
       "      <td>United Arab Emirates</td>\n",
       "      <td>982</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>32</th>\n",
       "      <td>United Kingdom</td>\n",
       "      <td>4018012</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>33</th>\n",
       "      <td>United States</td>\n",
       "      <td>1034</td>\n",
       "    </tr>\n",
       "  </tbody>\n",
       "</table>\n",
       "</div>"
      ],
      "text/plain": [
       "                 Country  Quantity\n",
       "0              Australia     83653\n",
       "1                Austria      4827\n",
       "2                Bahrain       260\n",
       "3                Belgium     23152\n",
       "4                 Brazil       356\n",
       "5                 Canada      2763\n",
       "6                 Cyprus      6317\n",
       "7         Czech Republic       592\n",
       "8                Denmark      8188\n",
       "9                Finland     10666\n",
       "10                France    109848\n",
       "11               Germany    117448\n",
       "12                Greece      1556\n",
       "13               Iceland      2458\n",
       "14               Ireland    136329\n",
       "15                Israel      3990\n",
       "16                 Italy      7999\n",
       "17                 Japan     25218\n",
       "18               Lebanon       386\n",
       "19             Lithuania       652\n",
       "20                 Malta       944\n",
       "21           Netherlands    200128\n",
       "22                Norway     19247\n",
       "23                Poland      3653\n",
       "24              Portugal     16044\n",
       "25                Russia       352\n",
       "26          Saudi Arabia        75\n",
       "27             Singapore      5234\n",
       "28                 Spain     26824\n",
       "29                Sweden     35637\n",
       "30           Switzerland     29778\n",
       "31  United Arab Emirates       982\n",
       "32        United Kingdom   4018012\n",
       "33         United States      1034"
      ]
     },
     "execution_count": 10,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "df_plot"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "id": "3b24fda0-ef65-4ff0-bb2b-0bd6187a31b1",
   "metadata": {},
   "outputs": [],
   "source": [
    "import altair as alt"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "id": "270e207d-12ed-447e-8cbb-5e51bb555a06",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<div id=\"altair-viz-a535b628a1e141ff8de97fc5f6a0a580\"></div>\n",
       "<script type=\"text/javascript\">\n",
       "  var VEGA_DEBUG = (typeof VEGA_DEBUG == \"undefined\") ? {} : VEGA_DEBUG;\n",
       "  (function(spec, embedOpt){\n",
       "    let outputDiv = document.currentScript.previousElementSibling;\n",
       "    if (outputDiv.id !== \"altair-viz-a535b628a1e141ff8de97fc5f6a0a580\") {\n",
       "      outputDiv = document.getElementById(\"altair-viz-a535b628a1e141ff8de97fc5f6a0a580\");\n",
       "    }\n",
       "    const paths = {\n",
       "      \"vega\": \"https://cdn.jsdelivr.net/npm//vega@5?noext\",\n",
       "      \"vega-lib\": \"https://cdn.jsdelivr.net/npm//vega-lib?noext\",\n",
       "      \"vega-lite\": \"https://cdn.jsdelivr.net/npm//vega-lite@4.17.0?noext\",\n",
       "      \"vega-embed\": \"https://cdn.jsdelivr.net/npm//vega-embed@6?noext\",\n",
       "    };\n",
       "\n",
       "    function maybeLoadScript(lib, version) {\n",
       "      var key = `${lib.replace(\"-\", \"\")}_version`;\n",
       "      return (VEGA_DEBUG[key] == version) ?\n",
       "        Promise.resolve(paths[lib]) :\n",
       "        new Promise(function(resolve, reject) {\n",
       "          var s = document.createElement('script');\n",
       "          document.getElementsByTagName(\"head\")[0].appendChild(s);\n",
       "          s.async = true;\n",
       "          s.onload = () => {\n",
       "            VEGA_DEBUG[key] = version;\n",
       "            return resolve(paths[lib]);\n",
       "          };\n",
       "          s.onerror = () => reject(`Error loading script: ${paths[lib]}`);\n",
       "          s.src = paths[lib];\n",
       "        });\n",
       "    }\n",
       "\n",
       "    function showError(err) {\n",
       "      outputDiv.innerHTML = `<div class=\"error\" style=\"color:red;\">${err}</div>`;\n",
       "      throw err;\n",
       "    }\n",
       "\n",
       "    function displayChart(vegaEmbed) {\n",
       "      vegaEmbed(outputDiv, spec, embedOpt)\n",
       "        .catch(err => showError(`Javascript Error: ${err.message}<br>This usually means there's a typo in your chart specification. See the javascript console for the full traceback.`));\n",
       "    }\n",
       "\n",
       "    if(typeof define === \"function\" && define.amd) {\n",
       "      requirejs.config({paths});\n",
       "      require([\"vega-embed\"], displayChart, err => showError(`Error loading script: ${err.message}`));\n",
       "    } else {\n",
       "      maybeLoadScript(\"vega\", \"5\")\n",
       "        .then(() => maybeLoadScript(\"vega-lite\", \"4.17.0\"))\n",
       "        .then(() => maybeLoadScript(\"vega-embed\", \"6\"))\n",
       "        .catch(showError)\n",
       "        .then(() => displayChart(vegaEmbed));\n",
       "    }\n",
       "  })({\"config\": {\"view\": {\"continuousWidth\": 400, \"continuousHeight\": 300}}, \"data\": {\"name\": \"data-576026537473d4c25fd76d91bc9ec076\"}, \"mark\": \"bar\", \"encoding\": {\"x\": {\"field\": \"Quantity\", \"type\": \"quantitative\"}, \"y\": {\"field\": \"Country\", \"type\": \"nominal\"}}, \"$schema\": \"https://vega.github.io/schema/vega-lite/v4.17.0.json\", \"datasets\": {\"data-576026537473d4c25fd76d91bc9ec076\": [{\"Country\": \"Australia\", \"Quantity\": 83653}, {\"Country\": \"Austria\", \"Quantity\": 4827}, {\"Country\": \"Bahrain\", \"Quantity\": 260}, {\"Country\": \"Belgium\", \"Quantity\": 23152}, {\"Country\": \"Brazil\", \"Quantity\": 356}, {\"Country\": \"Canada\", \"Quantity\": 2763}, {\"Country\": \"Cyprus\", \"Quantity\": 6317}, {\"Country\": \"Czech Republic\", \"Quantity\": 592}, {\"Country\": \"Denmark\", \"Quantity\": 8188}, {\"Country\": \"Finland\", \"Quantity\": 10666}, {\"Country\": \"France\", \"Quantity\": 109848}, {\"Country\": \"Germany\", \"Quantity\": 117448}, {\"Country\": \"Greece\", \"Quantity\": 1556}, {\"Country\": \"Iceland\", \"Quantity\": 2458}, {\"Country\": \"Ireland\", \"Quantity\": 136329}, {\"Country\": \"Israel\", \"Quantity\": 3990}, {\"Country\": \"Italy\", \"Quantity\": 7999}, {\"Country\": \"Japan\", \"Quantity\": 25218}, {\"Country\": \"Lebanon\", \"Quantity\": 386}, {\"Country\": \"Lithuania\", \"Quantity\": 652}, {\"Country\": \"Malta\", \"Quantity\": 944}, {\"Country\": \"Netherlands\", \"Quantity\": 200128}, {\"Country\": \"Norway\", \"Quantity\": 19247}, {\"Country\": \"Poland\", \"Quantity\": 3653}, {\"Country\": \"Portugal\", \"Quantity\": 16044}, {\"Country\": \"Russia\", \"Quantity\": 352}, {\"Country\": \"Saudi Arabia\", \"Quantity\": 75}, {\"Country\": \"Singapore\", \"Quantity\": 5234}, {\"Country\": \"Spain\", \"Quantity\": 26824}, {\"Country\": \"Sweden\", \"Quantity\": 35637}, {\"Country\": \"Switzerland\", \"Quantity\": 29778}, {\"Country\": \"United Arab Emirates\", \"Quantity\": 982}, {\"Country\": \"United Kingdom\", \"Quantity\": 4018012}, {\"Country\": \"United States\", \"Quantity\": 1034}]}}, {\"mode\": \"vega-lite\"});\n",
       "</script>"
      ],
      "text/plain": [
       "alt.Chart(...)"
      ]
     },
     "execution_count": 9,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "alt.Chart(df_plot).mark_bar().encode(x=\"Quantity\", y=\"Country\")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 99,
   "id": "521d1474-aa37-4aad-8f8b-704eee94d736",
   "metadata": {},
   "outputs": [],
   "source": [
    "import streamlit as st\n",
    "import pandas as pd\n",
    "\n",
    "df = pd.read_parquet(\"ecommerce.parquet\")\n",
    "\n",
    "st.write(\"This is a pandas dataframe:\")\n",
    "st.write(df.head())"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "9d99d215-2a48-4a81-836d-7ba351bc009f",
   "metadata": {},
   "source": [
    "## Develompent mode\n",
    "\n",
    "Cada vez que se altera el script de python que streamlit está ejecutando, éste lo detecta y permite recargar la página automáticamente. Esta opción está en el menú superior derecho, en _Settings_, y en _Run on save_."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 11,
   "id": "7f137d02-fef7-4004-8fef-0d0b9fd70661",
   "metadata": {},
   "outputs": [],
   "source": [
    "import streamlit as st\n",
    "import pandas as pd\n",
    "\n",
    "df = pd.read_parquet(\"ecommerce.parquet\")"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "47498ce2-ed25-4555-9672-9bba2531611e",
   "metadata": {},
   "source": [
    "## Funciones específicas\n",
    "\n",
    "La función `st.write` es mágica, en el sentido de que renderiza lo que sea que le pasemos (texto, dataframes, e incluso plots como podemos ver a continuación!"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 16,
   "id": "4b737445-b50d-4900-be0a-f1ff59497fd7",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<div id=\"altair-viz-2ab13cee7a044a3dba18c3cd8acabc19\"></div>\n",
       "<script type=\"text/javascript\">\n",
       "  var VEGA_DEBUG = (typeof VEGA_DEBUG == \"undefined\") ? {} : VEGA_DEBUG;\n",
       "  (function(spec, embedOpt){\n",
       "    let outputDiv = document.currentScript.previousElementSibling;\n",
       "    if (outputDiv.id !== \"altair-viz-2ab13cee7a044a3dba18c3cd8acabc19\") {\n",
       "      outputDiv = document.getElementById(\"altair-viz-2ab13cee7a044a3dba18c3cd8acabc19\");\n",
       "    }\n",
       "    const paths = {\n",
       "      \"vega\": \"https://cdn.jsdelivr.net/npm//vega@5?noext\",\n",
       "      \"vega-lib\": \"https://cdn.jsdelivr.net/npm//vega-lib?noext\",\n",
       "      \"vega-lite\": \"https://cdn.jsdelivr.net/npm//vega-lite@4.17.0?noext\",\n",
       "      \"vega-embed\": \"https://cdn.jsdelivr.net/npm//vega-embed@6?noext\",\n",
       "    };\n",
       "\n",
       "    function maybeLoadScript(lib, version) {\n",
       "      var key = `${lib.replace(\"-\", \"\")}_version`;\n",
       "      return (VEGA_DEBUG[key] == version) ?\n",
       "        Promise.resolve(paths[lib]) :\n",
       "        new Promise(function(resolve, reject) {\n",
       "          var s = document.createElement('script');\n",
       "          document.getElementsByTagName(\"head\")[0].appendChild(s);\n",
       "          s.async = true;\n",
       "          s.onload = () => {\n",
       "            VEGA_DEBUG[key] = version;\n",
       "            return resolve(paths[lib]);\n",
       "          };\n",
       "          s.onerror = () => reject(`Error loading script: ${paths[lib]}`);\n",
       "          s.src = paths[lib];\n",
       "        });\n",
       "    }\n",
       "\n",
       "    function showError(err) {\n",
       "      outputDiv.innerHTML = `<div class=\"error\" style=\"color:red;\">${err}</div>`;\n",
       "      throw err;\n",
       "    }\n",
       "\n",
       "    function displayChart(vegaEmbed) {\n",
       "      vegaEmbed(outputDiv, spec, embedOpt)\n",
       "        .catch(err => showError(`Javascript Error: ${err.message}<br>This usually means there's a typo in your chart specification. See the javascript console for the full traceback.`));\n",
       "    }\n",
       "\n",
       "    if(typeof define === \"function\" && define.amd) {\n",
       "      requirejs.config({paths});\n",
       "      require([\"vega-embed\"], displayChart, err => showError(`Error loading script: ${err.message}`));\n",
       "    } else {\n",
       "      maybeLoadScript(\"vega\", \"5\")\n",
       "        .then(() => maybeLoadScript(\"vega-lite\", \"4.17.0\"))\n",
       "        .then(() => maybeLoadScript(\"vega-embed\", \"6\"))\n",
       "        .catch(showError)\n",
       "        .then(() => displayChart(vegaEmbed));\n",
       "    }\n",
       "  })({\"config\": {\"view\": {\"continuousWidth\": 400, \"continuousHeight\": 300}}, \"data\": {\"name\": \"data-075c4354f230baf6ecbce9e8fdbdf84c\"}, \"mark\": \"bar\", \"encoding\": {\"x\": {\"field\": \"Country\", \"type\": \"nominal\"}, \"y\": {\"field\": \"total\", \"type\": \"quantitative\"}}, \"$schema\": \"https://vega.github.io/schema/vega-lite/v4.17.0.json\", \"datasets\": {\"data-075c4354f230baf6ecbce9e8fdbdf84c\": [{\"Country\": \"Australia\", \"total\": 137077.27}, {\"Country\": \"Austria\", \"total\": 10154.32}, {\"Country\": \"Bahrain\", \"total\": 548.4}, {\"Country\": \"Belgium\", \"total\": 40910.96}, {\"Country\": \"Brazil\", \"total\": 1143.6}, {\"Country\": \"Canada\", \"total\": 3666.38}, {\"Country\": \"Cyprus\", \"total\": 12946.29}, {\"Country\": \"Czech Republic\", \"total\": 707.72}, {\"Country\": \"Denmark\", \"total\": 18768.14}, {\"Country\": \"Finland\", \"total\": 22326.74}, {\"Country\": \"France\", \"total\": 196712.84}, {\"Country\": \"Germany\", \"total\": 221698.21}, {\"Country\": \"Greece\", \"total\": 4710.52}, {\"Country\": \"Iceland\", \"total\": 4310.0}, {\"Country\": \"Ireland\", \"total\": 250285.22}, {\"Country\": \"Israel\", \"total\": 6994.25}, {\"Country\": \"Italy\", \"total\": 16890.51}, {\"Country\": \"Japan\", \"total\": 35340.62}, {\"Country\": \"Lebanon\", \"total\": 1693.88}, {\"Country\": \"Lithuania\", \"total\": 1661.06}, {\"Country\": \"Malta\", \"total\": 2505.47}, {\"Country\": \"Netherlands\", \"total\": 284661.54}, {\"Country\": \"Norway\", \"total\": 35163.46}, {\"Country\": \"Poland\", \"total\": 7213.14}, {\"Country\": \"Portugal\", \"total\": 29059.81}, {\"Country\": \"Russia\", \"total\": 1002.3100000000001}, {\"Country\": \"Saudi Arabia\", \"total\": 131.17}, {\"Country\": \"Singapore\", \"total\": 9120.39}, {\"Country\": \"Spain\", \"total\": 54774.58}, {\"Country\": \"Sweden\", \"total\": 36595.91}, {\"Country\": \"Switzerland\", \"total\": 55739.4}, {\"Country\": \"United Arab Emirates\", \"total\": 1902.28}, {\"Country\": \"United Kingdom\", \"total\": 6787959.684}, {\"Country\": \"United States\", \"total\": 1730.92}]}}, {\"mode\": \"vega-lite\"});\n",
       "</script>"
      ],
      "text/plain": [
       "alt.Chart(...)"
      ]
     },
     "execution_count": 16,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "import altair as alt\n",
    "\n",
    "df_plot = (\n",
    "    df\n",
    "    .assign(\n",
    "        total=lambda df: df.Quantity * df.UnitPrice\n",
    "    )\n",
    "    .groupby(\"Country\")\n",
    "    .agg({\n",
    "        \"total\": \"sum\"\n",
    "    })\n",
    "    .reset_index()\n",
    ")\n",
    "\n",
    "alt.Chart(df_plot).mark_bar().encode(x=\"Country\", y=\"total\")"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "8431f1d9-a57c-419b-ae94-98075d052d88",
   "metadata": {},
   "source": [
    "Realmente lo que hace esta función es analizar el tipo de datos del argumento y llamar a una función específica de streamlit para renderizarlo. Por ejemplo, para renderizar un dataframe de pandas llama internamente a `st.dataframe`.\n",
    "\n",
    "La ventaja de llamar a las funciones espexíficas directamente es que podemos personalizar mucho más cómo se renderizan los elementos.\n",
    "\n",
    "Por ejemplo, vamos a mostrar a través del siguiente código una tabla que muestra estadísticos por país, resaltanto los valores máximos en gris:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 12,
   "id": "96290e62-e8f9-4176-81fa-42154530032b",
   "metadata": {
    "collapsed": true,
    "jupyter": {
     "outputs_hidden": true
    },
    "tags": []
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<style type=\"text/css\">\n",
       "#T_82170_row27_col2, #T_82170_row32_col0, #T_82170_row32_col1 {\n",
       "  background-color: lightgray;\n",
       "}\n",
       "</style>\n",
       "<table id=\"T_82170\">\n",
       "  <thead>\n",
       "    <tr>\n",
       "      <th class=\"blank level0\" >&nbsp;</th>\n",
       "      <th id=\"T_82170_level0_col0\" class=\"col_heading level0 col0\" >total</th>\n",
       "      <th id=\"T_82170_level0_col1\" class=\"col_heading level0 col1\" >Quantity</th>\n",
       "      <th id=\"T_82170_level0_col2\" class=\"col_heading level0 col2\" >UnitPrice</th>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th class=\"index_name level0\" >Country</th>\n",
       "      <th class=\"blank col0\" >&nbsp;</th>\n",
       "      <th class=\"blank col1\" >&nbsp;</th>\n",
       "      <th class=\"blank col2\" >&nbsp;</th>\n",
       "    </tr>\n",
       "  </thead>\n",
       "  <tbody>\n",
       "    <tr>\n",
       "      <th id=\"T_82170_level0_row0\" class=\"row_heading level0 row0\" >Australia</th>\n",
       "      <td id=\"T_82170_row0_col0\" class=\"data row0 col0\" >137077.270000</td>\n",
       "      <td id=\"T_82170_row0_col1\" class=\"data row0 col1\" >83653</td>\n",
       "      <td id=\"T_82170_row0_col2\" class=\"data row0 col2\" >3.220612</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th id=\"T_82170_level0_row1\" class=\"row_heading level0 row1\" >Austria</th>\n",
       "      <td id=\"T_82170_row1_col0\" class=\"data row1 col0\" >10154.320000</td>\n",
       "      <td id=\"T_82170_row1_col1\" class=\"data row1 col1\" >4827</td>\n",
       "      <td id=\"T_82170_row1_col2\" class=\"data row1 col2\" >4.243192</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th id=\"T_82170_level0_row2\" class=\"row_heading level0 row2\" >Bahrain</th>\n",
       "      <td id=\"T_82170_row2_col0\" class=\"data row2 col0\" >548.400000</td>\n",
       "      <td id=\"T_82170_row2_col1\" class=\"data row2 col1\" >260</td>\n",
       "      <td id=\"T_82170_row2_col2\" class=\"data row2 col2\" >4.644118</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th id=\"T_82170_level0_row3\" class=\"row_heading level0 row3\" >Belgium</th>\n",
       "      <td id=\"T_82170_row3_col0\" class=\"data row3 col0\" >40910.960000</td>\n",
       "      <td id=\"T_82170_row3_col1\" class=\"data row3 col1\" >23152</td>\n",
       "      <td id=\"T_82170_row3_col2\" class=\"data row3 col2\" >3.644335</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th id=\"T_82170_level0_row4\" class=\"row_heading level0 row4\" >Brazil</th>\n",
       "      <td id=\"T_82170_row4_col0\" class=\"data row4 col0\" >1143.600000</td>\n",
       "      <td id=\"T_82170_row4_col1\" class=\"data row4 col1\" >356</td>\n",
       "      <td id=\"T_82170_row4_col2\" class=\"data row4 col2\" >4.456250</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th id=\"T_82170_level0_row5\" class=\"row_heading level0 row5\" >Canada</th>\n",
       "      <td id=\"T_82170_row5_col0\" class=\"data row5 col0\" >3666.380000</td>\n",
       "      <td id=\"T_82170_row5_col1\" class=\"data row5 col1\" >2763</td>\n",
       "      <td id=\"T_82170_row5_col2\" class=\"data row5 col2\" >6.030331</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th id=\"T_82170_level0_row6\" class=\"row_heading level0 row6\" >Cyprus</th>\n",
       "      <td id=\"T_82170_row6_col0\" class=\"data row6 col0\" >12946.290000</td>\n",
       "      <td id=\"T_82170_row6_col1\" class=\"data row6 col1\" >6317</td>\n",
       "      <td id=\"T_82170_row6_col2\" class=\"data row6 col2\" >6.302363</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th id=\"T_82170_level0_row7\" class=\"row_heading level0 row7\" >Czech Republic</th>\n",
       "      <td id=\"T_82170_row7_col0\" class=\"data row7 col0\" >707.720000</td>\n",
       "      <td id=\"T_82170_row7_col1\" class=\"data row7 col1\" >592</td>\n",
       "      <td id=\"T_82170_row7_col2\" class=\"data row7 col2\" >2.938333</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th id=\"T_82170_level0_row8\" class=\"row_heading level0 row8\" >Denmark</th>\n",
       "      <td id=\"T_82170_row8_col0\" class=\"data row8 col0\" >18768.140000</td>\n",
       "      <td id=\"T_82170_row8_col1\" class=\"data row8 col1\" >8188</td>\n",
       "      <td id=\"T_82170_row8_col2\" class=\"data row8 col2\" >3.256941</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th id=\"T_82170_level0_row9\" class=\"row_heading level0 row9\" >Finland</th>\n",
       "      <td id=\"T_82170_row9_col0\" class=\"data row9 col0\" >22326.740000</td>\n",
       "      <td id=\"T_82170_row9_col1\" class=\"data row9 col1\" >10666</td>\n",
       "      <td id=\"T_82170_row9_col2\" class=\"data row9 col2\" >5.448705</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th id=\"T_82170_level0_row10\" class=\"row_heading level0 row10\" >France</th>\n",
       "      <td id=\"T_82170_row10_col0\" class=\"data row10 col0\" >196712.840000</td>\n",
       "      <td id=\"T_82170_row10_col1\" class=\"data row10 col1\" >109848</td>\n",
       "      <td id=\"T_82170_row10_col2\" class=\"data row10 col2\" >5.049021</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th id=\"T_82170_level0_row11\" class=\"row_heading level0 row11\" >Germany</th>\n",
       "      <td id=\"T_82170_row11_col0\" class=\"data row11 col0\" >221698.210000</td>\n",
       "      <td id=\"T_82170_row11_col1\" class=\"data row11 col1\" >117448</td>\n",
       "      <td id=\"T_82170_row11_col2\" class=\"data row11 col2\" >3.966930</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th id=\"T_82170_level0_row12\" class=\"row_heading level0 row12\" >Greece</th>\n",
       "      <td id=\"T_82170_row12_col0\" class=\"data row12 col0\" >4710.520000</td>\n",
       "      <td id=\"T_82170_row12_col1\" class=\"data row12 col1\" >1556</td>\n",
       "      <td id=\"T_82170_row12_col2\" class=\"data row12 col2\" >4.885548</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th id=\"T_82170_level0_row13\" class=\"row_heading level0 row13\" >Iceland</th>\n",
       "      <td id=\"T_82170_row13_col0\" class=\"data row13 col0\" >4310.000000</td>\n",
       "      <td id=\"T_82170_row13_col1\" class=\"data row13 col1\" >2458</td>\n",
       "      <td id=\"T_82170_row13_col2\" class=\"data row13 col2\" >2.644011</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th id=\"T_82170_level0_row14\" class=\"row_heading level0 row14\" >Ireland</th>\n",
       "      <td id=\"T_82170_row14_col0\" class=\"data row14 col0\" >250285.220000</td>\n",
       "      <td id=\"T_82170_row14_col1\" class=\"data row14 col1\" >136329</td>\n",
       "      <td id=\"T_82170_row14_col2\" class=\"data row14 col2\" >5.110699</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th id=\"T_82170_level0_row15\" class=\"row_heading level0 row15\" >Israel</th>\n",
       "      <td id=\"T_82170_row15_col0\" class=\"data row15 col0\" >6994.250000</td>\n",
       "      <td id=\"T_82170_row15_col1\" class=\"data row15 col1\" >3990</td>\n",
       "      <td id=\"T_82170_row15_col2\" class=\"data row15 col2\" >3.650000</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th id=\"T_82170_level0_row16\" class=\"row_heading level0 row16\" >Italy</th>\n",
       "      <td id=\"T_82170_row16_col0\" class=\"data row16 col0\" >16890.510000</td>\n",
       "      <td id=\"T_82170_row16_col1\" class=\"data row16 col1\" >7999</td>\n",
       "      <td id=\"T_82170_row16_col2\" class=\"data row16 col2\" >4.831121</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th id=\"T_82170_level0_row17\" class=\"row_heading level0 row17\" >Japan</th>\n",
       "      <td id=\"T_82170_row17_col0\" class=\"data row17 col0\" >35340.620000</td>\n",
       "      <td id=\"T_82170_row17_col1\" class=\"data row17 col1\" >25218</td>\n",
       "      <td id=\"T_82170_row17_col2\" class=\"data row17 col2\" >2.276145</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th id=\"T_82170_level0_row18\" class=\"row_heading level0 row18\" >Lebanon</th>\n",
       "      <td id=\"T_82170_row18_col0\" class=\"data row18 col0\" >1693.880000</td>\n",
       "      <td id=\"T_82170_row18_col1\" class=\"data row18 col1\" >386</td>\n",
       "      <td id=\"T_82170_row18_col2\" class=\"data row18 col2\" >5.387556</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th id=\"T_82170_level0_row19\" class=\"row_heading level0 row19\" >Lithuania</th>\n",
       "      <td id=\"T_82170_row19_col0\" class=\"data row19 col0\" >1661.060000</td>\n",
       "      <td id=\"T_82170_row19_col1\" class=\"data row19 col1\" >652</td>\n",
       "      <td id=\"T_82170_row19_col2\" class=\"data row19 col2\" >2.841143</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th id=\"T_82170_level0_row20\" class=\"row_heading level0 row20\" >Malta</th>\n",
       "      <td id=\"T_82170_row20_col0\" class=\"data row20 col0\" >2505.470000</td>\n",
       "      <td id=\"T_82170_row20_col1\" class=\"data row20 col1\" >944</td>\n",
       "      <td id=\"T_82170_row20_col2\" class=\"data row20 col2\" >5.244173</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th id=\"T_82170_level0_row21\" class=\"row_heading level0 row21\" >Netherlands</th>\n",
       "      <td id=\"T_82170_row21_col0\" class=\"data row21 col0\" >284661.540000</td>\n",
       "      <td id=\"T_82170_row21_col1\" class=\"data row21 col1\" >200128</td>\n",
       "      <td id=\"T_82170_row21_col2\" class=\"data row21 col2\" >2.738317</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th id=\"T_82170_level0_row22\" class=\"row_heading level0 row22\" >Norway</th>\n",
       "      <td id=\"T_82170_row22_col0\" class=\"data row22 col0\" >35163.460000</td>\n",
       "      <td id=\"T_82170_row22_col1\" class=\"data row22 col1\" >19247</td>\n",
       "      <td id=\"T_82170_row22_col2\" class=\"data row22 col2\" >6.012026</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th id=\"T_82170_level0_row23\" class=\"row_heading level0 row23\" >Poland</th>\n",
       "      <td id=\"T_82170_row23_col0\" class=\"data row23 col0\" >7213.140000</td>\n",
       "      <td id=\"T_82170_row23_col1\" class=\"data row23 col1\" >3653</td>\n",
       "      <td id=\"T_82170_row23_col2\" class=\"data row23 col2\" >4.170880</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th id=\"T_82170_level0_row24\" class=\"row_heading level0 row24\" >Portugal</th>\n",
       "      <td id=\"T_82170_row24_col0\" class=\"data row24 col0\" >29059.810000</td>\n",
       "      <td id=\"T_82170_row24_col1\" class=\"data row24 col1\" >16044</td>\n",
       "      <td id=\"T_82170_row24_col2\" class=\"data row24 col2\" >8.736392</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th id=\"T_82170_level0_row25\" class=\"row_heading level0 row25\" >Russia</th>\n",
       "      <td id=\"T_82170_row25_col0\" class=\"data row25 col0\" >1002.310000</td>\n",
       "      <td id=\"T_82170_row25_col1\" class=\"data row25 col1\" >352</td>\n",
       "      <td id=\"T_82170_row25_col2\" class=\"data row25 col2\" >4.277586</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th id=\"T_82170_level0_row26\" class=\"row_heading level0 row26\" >Saudi Arabia</th>\n",
       "      <td id=\"T_82170_row26_col0\" class=\"data row26 col0\" >131.170000</td>\n",
       "      <td id=\"T_82170_row26_col1\" class=\"data row26 col1\" >75</td>\n",
       "      <td id=\"T_82170_row26_col2\" class=\"data row26 col2\" >2.411000</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th id=\"T_82170_level0_row27\" class=\"row_heading level0 row27\" >Singapore</th>\n",
       "      <td id=\"T_82170_row27_col0\" class=\"data row27 col0\" >9120.390000</td>\n",
       "      <td id=\"T_82170_row27_col1\" class=\"data row27 col1\" >5234</td>\n",
       "      <td id=\"T_82170_row27_col2\" class=\"data row27 col2\" >109.645808</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th id=\"T_82170_level0_row28\" class=\"row_heading level0 row28\" >Spain</th>\n",
       "      <td id=\"T_82170_row28_col0\" class=\"data row28 col0\" >54774.580000</td>\n",
       "      <td id=\"T_82170_row28_col1\" class=\"data row28 col1\" >26824</td>\n",
       "      <td id=\"T_82170_row28_col2\" class=\"data row28 col2\" >4.987544</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th id=\"T_82170_level0_row29\" class=\"row_heading level0 row29\" >Sweden</th>\n",
       "      <td id=\"T_82170_row29_col0\" class=\"data row29 col0\" >36595.910000</td>\n",
       "      <td id=\"T_82170_row29_col1\" class=\"data row29 col1\" >35637</td>\n",
       "      <td id=\"T_82170_row29_col2\" class=\"data row29 col2\" >3.910887</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th id=\"T_82170_level0_row30\" class=\"row_heading level0 row30\" >Switzerland</th>\n",
       "      <td id=\"T_82170_row30_col0\" class=\"data row30 col0\" >55739.400000</td>\n",
       "      <td id=\"T_82170_row30_col1\" class=\"data row30 col1\" >29778</td>\n",
       "      <td id=\"T_82170_row30_col2\" class=\"data row30 col2\" >3.499521</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th id=\"T_82170_level0_row31\" class=\"row_heading level0 row31\" >United Arab Emirates</th>\n",
       "      <td id=\"T_82170_row31_col0\" class=\"data row31 col0\" >1902.280000</td>\n",
       "      <td id=\"T_82170_row31_col1\" class=\"data row31 col1\" >982</td>\n",
       "      <td id=\"T_82170_row31_col2\" class=\"data row31 col2\" >3.380735</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th id=\"T_82170_level0_row32\" class=\"row_heading level0 row32\" >United Kingdom</th>\n",
       "      <td id=\"T_82170_row32_col0\" class=\"data row32 col0\" >6787959.684000</td>\n",
       "      <td id=\"T_82170_row32_col1\" class=\"data row32 col1\" >4018012</td>\n",
       "      <td id=\"T_82170_row32_col2\" class=\"data row32 col2\" >3.259510</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th id=\"T_82170_level0_row33\" class=\"row_heading level0 row33\" >United States</th>\n",
       "      <td id=\"T_82170_row33_col0\" class=\"data row33 col0\" >1730.920000</td>\n",
       "      <td id=\"T_82170_row33_col1\" class=\"data row33 col1\" >1034</td>\n",
       "      <td id=\"T_82170_row33_col2\" class=\"data row33 col2\" >2.216426</td>\n",
       "    </tr>\n",
       "  </tbody>\n",
       "</table>\n"
      ],
      "text/plain": [
       "<pandas.io.formats.style.Styler at 0x105c21e80>"
      ]
     },
     "execution_count": 12,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "df_table = (\n",
    "    df\n",
    "    .assign(\n",
    "        total=lambda df: df.Quantity * df.UnitPrice\n",
    "    )\n",
    "    .groupby(\"Country\")\n",
    "    .agg({\n",
    "        \"total\": \"sum\",\n",
    "        \"Quantity\": \"sum\",\n",
    "        \"UnitPrice\": \"mean\"\n",
    "    })\n",
    ")\n",
    "\n",
    "df_table.style.highlight_max(color=\"lightgray\")"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "bf90c6d9-6fc0-4b8c-af48-7a195e7bfd58",
   "metadata": {},
   "source": [
    "Si en lugar de usar `st.write` usamos `st.dataframe` podemos limitar la anchura y altura máxima:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 97,
   "id": "5fc2c7c4-647b-45c4-8bf7-5ed9bffc73b2",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "DeltaGenerator(_root_container=0, _provided_cursor=None, _parent=None, _block_type=None, _form_data=None)"
      ]
     },
     "execution_count": 97,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "st.dataframe(df_table.style.highlight_max(color=\"lightgray\"), height=200)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "6842c8f1-28cc-47ee-b388-4e496fc2ff5d",
   "metadata": {},
   "source": [
    "Si no queremos que la tabla sea interactiva, por ejemplo podemos ordenar de acuerdo a una columna y generar una tabla estática con `st.table`:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 98,
   "id": "8bcf5527-efff-4569-896a-ec1a395b2b32",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "DeltaGenerator(_root_container=0, _provided_cursor=None, _parent=None, _block_type=None, _form_data=None)"
      ]
     },
     "execution_count": 98,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "st.table(df_table.sort_values(\"total\", ascending=False).head())"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 14,
   "id": "c1fb4de9-15d0-4c3a-a215-46b23357eea7",
   "metadata": {},
   "outputs": [
    {
     "name": "stderr",
     "output_type": "stream",
     "text": [
      "2022-05-31 20:02:32.270 \n",
      "  \u001b[33m\u001b[1mWarning:\u001b[0m to view this Streamlit app on a browser, run it with the following\n",
      "  command:\n",
      "\n",
      "    streamlit run /Users/jcozar/dev/Docencia/MBIT/2022-05-Webinar-Streamlit/venv/lib/python3.9/site-packages/ipykernel_launcher.py [ARGUMENTS]\n"
     ]
    },
    {
     "data": {
      "text/plain": [
       "'United Kingdom'"
      ]
     },
     "execution_count": 14,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "all_countries = df.Country.unique()\n",
    "st.selectbox(\"Select a country\", options=all_countries)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "428902a8-8b36-4ff9-a1e1-bebbcc5fe2aa",
   "metadata": {},
   "source": [
    "En la documentación podemos encontrar multitud de [elementos](https://docs.streamlit.io/library/api-reference) a renderizar en una aplicación de Streamlit! Vamos a explorar algunos de ellos:\n",
    "\n",
    "- Title\n",
    "- Markdown\n",
    "- Code\n",
    "- Metrics\n",
    "- Matplotlib\n",
    "\n",
    "¡También podemos interactuar con nuestra aplicación! Para ello disponemos de elementos como listas desplegables, sliders, text inputs, o incluso selectores de fechas."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "4a49eca5-7ccd-4daf-889e-ceb844e87cd7",
   "metadata": {},
   "source": [
    "### ejemplo 1 - elementos visuales en Streamlit"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "bd4f13b2-66ff-4b21-a559-3376e26d16f9",
   "metadata": {},
   "outputs": [],
   "source": [
    "import streamlit as st\n",
    "import pandas as pd\n",
    "import seaborn as sns\n",
    "\n",
    "\n",
    "st.title(\"Cómo crear aplicaciones visuales para interactuar con tus datos\")\n",
    "\n",
    "st.markdown(\"La columna `total` refleja `Quantity` $\\cdot$ `UnitPrice`. Para construirla con Python se ha usado el siguiente código:\")\n",
    "\n",
    "st.code(\"\"\"\n",
    "(\n",
    "    df\n",
    "    .assign(\n",
    "        total=lambda df: df.Quantity * df.UnitPrice\n",
    "    )\n",
    ")\n",
    "\"\"\")\n",
    "\n",
    "df = pd.read_parquet(\"ecommerce.parquet\")               \n",
    "               \n",
    "df_table = (\n",
    "    df\n",
    "    .assign(\n",
    "        total=lambda df: df.Quantity * df.UnitPrice\n",
    "    )\n",
    "    .groupby(\"Country\")\n",
    "    .agg({\n",
    "        \"total\": \"sum\",\n",
    "        \"Quantity\": \"sum\",\n",
    "        \"UnitPrice\": \"mean\"\n",
    "    })\n",
    ")\n",
    "\n",
    "fg = sns.catplot(data=df_table.reset_index(), kind=\"bar\", y=\"Country\", x=\"total\", aspect=3)\n",
    "st.pyplot(fg.fig)\n",
    "\n",
    "all_countries = sorted(df.Country.unique())\n",
    "selected_country = st.selectbox(\"Selected countries\", options=all_countries)\n",
    "\n",
    "st.table(df_table.loc[selected_country])\n",
    "\n",
    "q = df_table.loc[selected_country].Quantity\n",
    "\n",
    "st.metric(f\"{selected_country} quantity\", q, delta=q-df_table.Quantity.mean())\n"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "5b01affd-8ac3-492a-887c-c71b425df1e1",
   "metadata": {},
   "source": [
    "### ejemplo 2 - interactuando con inputs"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "01d9ddb2-70d7-4dd1-aa79-8c2de2b014d1",
   "metadata": {},
   "outputs": [],
   "source": [
    "import streamlit as st\n",
    "import pandas as pd\n",
    "import altair as alt\n",
    "from vega_datasets import data\n",
    "\n",
    "\n",
    "st.title(\"Cómo crear aplicaciones visuales para interactuar con tus datos\")\n",
    "\n",
    "df = (\n",
    "    pd.read_parquet(\"ecommerce.parquet\")               \n",
    "    .assign(\n",
    "        InvoiceDate=lambda df: pd.to_datetime(df.InvoiceDate)\n",
    "    )\n",
    ")\n",
    "               \n",
    "min_date = df.InvoiceDate.min()\n",
    "max_date = df.InvoiceDate.max()\n",
    "min_date_input = st.date_input(\"Minimum date for invoices\", min_date, min_value=min_date, max_value=max_date)\n",
    "max_date_input = st.date_input(\"Maximum date for invoices\", max_date, min_value=min_date, max_value=max_date)\n",
    "\n",
    "min_date_input = min_date_input.strftime(\"%Y-%m-%d\")\n",
    "max_date_input = max_date_input.strftime(\"%Y-%m-%d\")\n",
    "\n",
    "df_show = (\n",
    "    df\n",
    "    .loc[lambda df: (df.InvoiceDate >= min_date_input) & (df.InvoiceDate <= max_date_input)]\n",
    ")\n",
    "\n",
    "q = st.slider(\"Minimum quantity\", min_value=0, max_value=int(df_show.Quantity.max()))\n",
    "\n",
    "df_show = (\n",
    "    df_show.loc[lambda df: (df.Quantity >= q)]\n",
    ")\n",
    "\n",
    "st.dataframe(df_show)\n",
    "\n",
    "\n",
    "# Map plot\n",
    "df_plot = (\n",
    "    df_show\n",
    "    .assign(\n",
    "        total=lambda df: df.Quantity * df.UnitPrice\n",
    "    )\n",
    "    .groupby(\"Country\")\n",
    "    .agg({\n",
    "        \"total\": \"sum\",\n",
    "        \"latitude\": \"first\",\n",
    "        \"longitude\": \"first\"\n",
    "    })\n",
    "    .reset_index()\n",
    ")\n",
    "\n",
    "\n",
    "source = alt.topo_feature(data.world_110m.url, \"countries\")\n",
    "base_map = (\n",
    "    alt.Chart(source)\n",
    "    .mark_geoshape(fill=\"white\", stroke=\"gray\")\n",
    "    .properties(width=900, height=500)\n",
    "    .project(\"naturalEarth1\")\n",
    ")\n",
    "\n",
    "points = (\n",
    "    alt.Chart(df_plot)\n",
    "    .mark_point()\n",
    "    .encode(\n",
    "        latitude=\"latitude\",\n",
    "        longitude=\"longitude\",\n",
    "        fill=alt.value(\"red\"),\n",
    "        size=alt.Size(\"total:Q\", scale=alt.Scale(type='log')),  # linear, log\n",
    "        stroke=alt.value(None),\n",
    "     )\n",
    ")\n",
    "\n",
    "final_map = (\n",
    "    (base_map + points)\n",
    "    .configure_view(strokeWidth=0)\n",
    "    .configure_mark(opacity=0.5,)\n",
    ")\n",
    "\n",
    "st.altair_chart(final_map)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "9f9c8bdc-4b64-4dc2-9ff5-2ecf270ceb5a",
   "metadata": {},
   "source": [
    "## Layouts\n",
    "\n",
    "Una de las principales ventajas de streamlit es que no nos preocupamos del layout, simplemente indico lo que quiero visualizar ¡y ya se encarga el módulo!\n",
    "\n",
    "Pero cuando la aplicación tiene cierta entidad se vuelve indispensable poder **organizar** los elementos. La estrategia de streamlit es muy acertada: **dividir la aplicación en secciones y permitir introducir los elementos en cada una de ellas** mediante funciones concretas. Podemos encontrar la documentación [aquí](https://docs.streamlit.io/library/api-reference/layout).\n",
    "\n",
    "A continuación vamos a usar dos tipos de layout:\n",
    "\n",
    "- sidebar: lo usaremos para situar los filtros de nuestra aplicación\n",
    "- columns: el contenido de nuestra aplicación se renderizará en la zona principal, si necesitamos estructurarlo en varias columnas podemos hacerlo con `st.columns`."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "59a45c03-1597-4fed-a957-588cbe5f1b02",
   "metadata": {},
   "source": [
    "### Sidebar\n",
    "\n",
    "![image](https://docs.streamlit.io/images/api/sidebar.jpg)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "c17f5f3e-3ab6-4a9c-af72-f59808bda481",
   "metadata": {},
   "source": [
    "### Columns\n",
    "\n",
    "![image](https://docs.streamlit.io/images/api/columns.jpg)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "cdbe9043-fffb-4c18-bc40-5cbab41ca071",
   "metadata": {},
   "source": [
    "### ejemplo 3 - ejemplo con layouts"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "15a2e735-4eda-4eae-9ee1-14fdc8ef380b",
   "metadata": {},
   "outputs": [],
   "source": [
    "import streamlit as st\n",
    "import pandas as pd\n",
    "import altair as alt\n",
    "from vega_datasets import data\n",
    "\n",
    "\n",
    "st.title(\"Cómo crear aplicaciones visuales para interactuar con tus datos\")\n",
    "\n",
    "df = (\n",
    "    pd.read_parquet(\"ecommerce.parquet\")               \n",
    "    .assign(\n",
    "        total=lambda df: df.Quantity * df.UnitPrice,\n",
    "        InvoiceDate=lambda df: pd.to_datetime(df.InvoiceDate)\n",
    "    )\n",
    ")\n",
    "\n",
    "st.sidebar.title(\"Filtros para el dataframe\")\n",
    "\n",
    "min_date = df.InvoiceDate.min()\n",
    "max_date = df.InvoiceDate.max()\n",
    "min_date_input = st.sidebar.date_input(\"Minimum date for invoices\", min_date, min_value=min_date, max_value=max_date)\n",
    "max_date_input = st.sidebar.date_input(\"Maximum date for invoices\", max_date, min_value=min_date, max_value=max_date)\n",
    "\n",
    "min_date_input = min_date_input.strftime(\"%Y-%m-%d\")\n",
    "max_date_input = max_date_input.strftime(\"%Y-%m-%d\")\n",
    "\n",
    "df_show = (\n",
    "    df\n",
    "    .loc[lambda df: (df.InvoiceDate >= min_date_input) & (df.InvoiceDate <= max_date_input)]\n",
    ")\n",
    "\n",
    "up = st.sidebar.slider(\"Minimum unit price\", min_value=0, max_value=int(df_show.UnitPrice.max()))\n",
    "\n",
    "df_show = (\n",
    "    df_show.loc[lambda df: (df.UnitPrice >= up)]\n",
    ")\n",
    "\n",
    "\n",
    "q = st.sidebar.slider(\"Minimum quantity\", min_value=0, max_value=int(df_show.Quantity.max()))\n",
    "\n",
    "df_show = (\n",
    "    df_show.loc[lambda df: (df.Quantity >= q)]\n",
    ")\n",
    "\n",
    "st.dataframe(df_show, height=200)\n",
    "\n",
    "\n",
    "# Map plot\n",
    "df_plot = (\n",
    "    df_show\n",
    "    .assign(\n",
    "        total=lambda df: df.Quantity * df.UnitPrice\n",
    "    )\n",
    "    .groupby(\"Country\")\n",
    "    .agg({\n",
    "        \"total\": \"sum\",\n",
    "        \"Quantity\": \"sum\",\n",
    "        \"latitude\": \"first\",\n",
    "        \"longitude\": \"first\"\n",
    "    })\n",
    "    .reset_index()\n",
    ")\n",
    "\n",
    "map_scale = st.sidebar.selectbox(\"Map quantity scale\", [\"log\", \"linear\"])\n",
    "\n",
    "source = alt.topo_feature(data.world_110m.url, \"countries\")\n",
    "base_map = (\n",
    "    alt.Chart(source)\n",
    "    .mark_geoshape(fill=\"white\", stroke=\"gray\")\n",
    "    .properties(width=900, height=500)\n",
    "    .project(\"naturalEarth1\")\n",
    ")\n",
    "\n",
    "points = (\n",
    "    alt.Chart(df_plot)\n",
    "    .mark_point()\n",
    "    .encode(\n",
    "        latitude=\"latitude\",\n",
    "        longitude=\"longitude\",\n",
    "        fill=alt.value(\"red\"),\n",
    "        size=alt.Size(\"total:Q\", scale=alt.Scale(type=map_scale)),\n",
    "        stroke=alt.value(None),\n",
    "     )\n",
    ")\n",
    "\n",
    "final_map = (\n",
    "    (base_map + points)\n",
    "    .configure_view(strokeWidth=0)\n",
    "    .configure_mark(opacity=0.5,)\n",
    ")\n",
    "\n",
    "st.altair_chart(final_map)\n",
    "\n",
    "\n",
    "\n",
    "col1, col2 = st.columns(2)\n",
    "\n",
    "with col1:\n",
    "    st.altair_chart(alt.Chart(df_plot).mark_bar().encode(y=\"Country\", x=\"total\"))\n",
    "\n",
    "with col2:\n",
    "    st.altair_chart(alt.Chart(df_plot).mark_bar().encode(y=\"Country\", x=\"Quantity\"))"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "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.9.8"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}