docs/notebooks/demo-build-multiindex-dataframe-html.ipynb

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [],
   "source": [
    "import os\n",
    "import numpy as np\n",
    "import pandas as pd\n",
    "import jinja2 as jj\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "<class 'pandas.core.frame.DataFrame'>\n",
      "MultiIndex: 64 entries, ('A0', 'B0', 'C0', 'D0') to ('A3', 'B1', 'C3', 'D1')\n",
      "Data columns (total 9 columns):\n",
      " #   Column         Non-Null Count  Dtype  \n",
      "---  ------         --------------  -----  \n",
      " 0   (a, bar, zap)  64 non-null     float64\n",
      " 1   (a, bar, zip)  64 non-null     float64\n",
      " 2   (a, foo, zap)  64 non-null     float64\n",
      " 3   (a, foo, zip)  64 non-null     float64\n",
      " 4   (b, bah, zap)  64 non-null     float64\n",
      " 5   (b, bah, zep)  64 non-null     float64\n",
      " 6   (b, bah, zyp)  64 non-null     float64\n",
      " 7   (b, foo, zap)  64 non-null     float64\n",
      " 8   (b, foo, zep)  64 non-null     float64\n",
      "dtypes: float64(9)\n",
      "memory usage: 5.6+ KB\n",
      "<class 'pandas.core.frame.DataFrame'>\n",
      "MultiIndex: 64 entries, ('A0', 'B0', 'C0', 'D0') to ('A3', 'B1', 'C3', 'D1')\n",
      "Data columns (total 9 columns):\n",
      " #   Column     Non-Null Count  Dtype  \n",
      "---  ------     --------------  -----  \n",
      " 0   a-bar-zap  64 non-null     float64\n",
      " 1   a-bar-zip  64 non-null     float64\n",
      " 2   a-foo-zap  64 non-null     float64\n",
      " 3   a-foo-zip  64 non-null     float64\n",
      " 4   b-bah-zap  64 non-null     float64\n",
      " 5   b-bah-zep  64 non-null     float64\n",
      " 6   b-bah-zyp  64 non-null     float64\n",
      " 7   b-foo-zap  64 non-null     float64\n",
      " 8   b-foo-zep  64 non-null     float64\n",
      "dtypes: float64(9)\n",
      "memory usage: 5.6+ KB\n",
      "<class 'pandas.core.frame.DataFrame'>\n",
      "Index: 64 entries, A0-B0-C0-D0 to A3-B1-C3-D1\n",
      "Data columns (total 9 columns):\n",
      " #   Column         Non-Null Count  Dtype  \n",
      "---  ------         --------------  -----  \n",
      " 0   (a, bar, zap)  64 non-null     float64\n",
      " 1   (a, bar, zip)  64 non-null     float64\n",
      " 2   (a, foo, zap)  64 non-null     float64\n",
      " 3   (a, foo, zip)  64 non-null     float64\n",
      " 4   (b, bah, zap)  64 non-null     float64\n",
      " 5   (b, bah, zep)  64 non-null     float64\n",
      " 6   (b, bah, zyp)  64 non-null     float64\n",
      " 7   (b, foo, zap)  64 non-null     float64\n",
      " 8   (b, foo, zep)  64 non-null     float64\n",
      "dtypes: float64(9)\n",
      "memory usage: 5.0+ KB\n",
      "<class 'pandas.core.frame.DataFrame'>\n",
      "Index: 64 entries, A0-B0-C0-D0 to A3-B1-C3-D1\n",
      "Data columns (total 9 columns):\n",
      " #   Column     Non-Null Count  Dtype  \n",
      "---  ------     --------------  -----  \n",
      " 0   a-foo-zap  64 non-null     float64\n",
      " 1   a-foo-zip  64 non-null     float64\n",
      " 2   a-bar-zap  64 non-null     float64\n",
      " 3   a-bar-zip  64 non-null     float64\n",
      " 4   b-foo-zap  64 non-null     float64\n",
      " 5   b-foo-zep  64 non-null     float64\n",
      " 6   b-bah-zep  64 non-null     float64\n",
      " 7   b-bah-zyp  64 non-null     float64\n",
      " 8   b-bah-zap  64 non-null     float64\n",
      "dtypes: float64(9)\n",
      "memory usage: 5.0+ KB\n"
     ]
    },
    {
     "name": "stderr",
     "output_type": "stream",
     "text": [
      "/var/folders/wq/sl9cqpsj3w76ywvkf3nbp24c0000gn/T/ipykernel_53910/2942104012.py:22: DeprecationWarning: `np.float` is a deprecated alias for the builtin `float`. To silence this warning, use `float` by itself. Doing this will not modify any behavior and is safe. If you specifically wanted the numpy scalar type, use `np.float64` here.\n",
      "Deprecated in NumPy 1.20; for more details and guidance: https://numpy.org/devdocs/release/1.20.0-notes.html#deprecations\n",
      "  data = np.arange(len(miindex) * len(micolumns), dtype=np.float).reshape((len(miindex),len(micolumns)))\n"
     ]
    }
   ],
   "source": [
    "def mklbl(prefix, n):\n",
    "    return [\"%s%s\" % (prefix, i) for i in range(n)]\n",
    "\n",
    "miindex = pd.MultiIndex.from_product([mklbl('A', 4),\n",
    "                                      mklbl('B', 2),\n",
    "                                      mklbl('C', 4),\n",
    "                                      mklbl('D', 2)],\n",
    "                                    names=['RowIdx-1', 'RowIdx-2', 'RowIdx-3', 'RowIdx-4'])\n",
    "index  =['-'.join(col).strip() for col in miindex.values]\n",
    "micolumns = pd.MultiIndex.from_tuples([('a', 'foo', 'zap'),\n",
    "                                       ('a', 'foo', 'zip'),\n",
    "                                       ('a', 'bar', 'zap'),\n",
    "                                       ('a', 'bar', 'zip'),\n",
    "                                       ('b', 'foo', 'zap'),\n",
    "                                       ('b', 'foo', 'zep'),\n",
    "                                       ('b', 'bah', 'zep'),\n",
    "                                       ('b', 'bah', 'zyp'),\n",
    "                                       ('b', 'bah', 'zap'),\n",
    "                                      ],\n",
    "                                      names=['ColIdx-{}'.format(i) for i in range(1, 4)])\n",
    "cols  =['-'.join(col).strip() for col in micolumns.values]\n",
    "data = np.arange(len(miindex) * len(micolumns), dtype=np.float).reshape((len(miindex),len(micolumns)))\n",
    "data = data.tolist()\n",
    "\n",
    "\n",
    "dfrc = pd.DataFrame(data, index=miindex, columns=micolumns).sort_index().sort_index(axis=1)\n",
    "\n",
    "dfr  = pd.DataFrame(data, index=miindex, columns=cols).sort_index().sort_index(axis=1)\n",
    "dfr.columns.name = 'UniqueCol'\n",
    "\n",
    "dfc  = pd.DataFrame(data, index=index, columns=micolumns).sort_index().sort_index(axis=1)\n",
    "dfc.index.name = 'UniqueRow'\n",
    "\n",
    "df  = pd.DataFrame(data, index=index, columns=cols).sort_index()\n",
    "df.index.name = 'UniqueRow'\n",
    "df.columns.name = 'UniqueCol'\n",
    "\n",
    "dfrc.info()\n",
    "dfr.info()\n",
    "dfc.info()\n",
    "df.info()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "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 tr th {\n",
       "        text-align: left;\n",
       "    }\n",
       "\n",
       "    .dataframe thead tr:last-of-type th {\n",
       "        text-align: right;\n",
       "    }\n",
       "</style>\n",
       "<table border=\"1\" class=\"dataframe\">\n",
       "  <thead>\n",
       "    <tr>\n",
       "      <th></th>\n",
       "      <th></th>\n",
       "      <th></th>\n",
       "      <th>ColIdx-1</th>\n",
       "      <th colspan=\"4\" halign=\"left\">a</th>\n",
       "      <th colspan=\"5\" halign=\"left\">b</th>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th></th>\n",
       "      <th></th>\n",
       "      <th></th>\n",
       "      <th>ColIdx-2</th>\n",
       "      <th colspan=\"2\" halign=\"left\">bar</th>\n",
       "      <th colspan=\"2\" halign=\"left\">foo</th>\n",
       "      <th colspan=\"3\" halign=\"left\">bah</th>\n",
       "      <th colspan=\"2\" halign=\"left\">foo</th>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th></th>\n",
       "      <th></th>\n",
       "      <th></th>\n",
       "      <th>ColIdx-3</th>\n",
       "      <th>zap</th>\n",
       "      <th>zip</th>\n",
       "      <th>zap</th>\n",
       "      <th>zip</th>\n",
       "      <th>zap</th>\n",
       "      <th>zep</th>\n",
       "      <th>zyp</th>\n",
       "      <th>zap</th>\n",
       "      <th>zep</th>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>RowIdx-1</th>\n",
       "      <th>RowIdx-2</th>\n",
       "      <th>RowIdx-3</th>\n",
       "      <th>RowIdx-4</th>\n",
       "      <th></th>\n",
       "      <th></th>\n",
       "      <th></th>\n",
       "      <th></th>\n",
       "      <th></th>\n",
       "      <th></th>\n",
       "      <th></th>\n",
       "      <th></th>\n",
       "      <th></th>\n",
       "    </tr>\n",
       "  </thead>\n",
       "  <tbody>\n",
       "    <tr>\n",
       "      <th rowspan=\"5\" valign=\"top\">A0</th>\n",
       "      <th rowspan=\"5\" valign=\"top\">B0</th>\n",
       "      <th rowspan=\"2\" valign=\"top\">C0</th>\n",
       "      <th>D0</th>\n",
       "      <td>2.0</td>\n",
       "      <td>3.0</td>\n",
       "      <td>0.0</td>\n",
       "      <td>1.0</td>\n",
       "      <td>8.0</td>\n",
       "      <td>6.0</td>\n",
       "      <td>7.0</td>\n",
       "      <td>4.0</td>\n",
       "      <td>5.0</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>D1</th>\n",
       "      <td>11.0</td>\n",
       "      <td>12.0</td>\n",
       "      <td>9.0</td>\n",
       "      <td>10.0</td>\n",
       "      <td>17.0</td>\n",
       "      <td>15.0</td>\n",
       "      <td>16.0</td>\n",
       "      <td>13.0</td>\n",
       "      <td>14.0</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th rowspan=\"2\" valign=\"top\">C1</th>\n",
       "      <th>D0</th>\n",
       "      <td>20.0</td>\n",
       "      <td>21.0</td>\n",
       "      <td>18.0</td>\n",
       "      <td>19.0</td>\n",
       "      <td>26.0</td>\n",
       "      <td>24.0</td>\n",
       "      <td>25.0</td>\n",
       "      <td>22.0</td>\n",
       "      <td>23.0</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>D1</th>\n",
       "      <td>29.0</td>\n",
       "      <td>30.0</td>\n",
       "      <td>27.0</td>\n",
       "      <td>28.0</td>\n",
       "      <td>35.0</td>\n",
       "      <td>33.0</td>\n",
       "      <td>34.0</td>\n",
       "      <td>31.0</td>\n",
       "      <td>32.0</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>C2</th>\n",
       "      <th>D0</th>\n",
       "      <td>38.0</td>\n",
       "      <td>39.0</td>\n",
       "      <td>36.0</td>\n",
       "      <td>37.0</td>\n",
       "      <td>44.0</td>\n",
       "      <td>42.0</td>\n",
       "      <td>43.0</td>\n",
       "      <td>40.0</td>\n",
       "      <td>41.0</td>\n",
       "    </tr>\n",
       "  </tbody>\n",
       "</table>\n",
       "</div>"
      ],
      "text/plain": [
       "ColIdx-1                                a                       b              \\\n",
       "ColIdx-2                              bar         foo         bah               \n",
       "ColIdx-3                              zap   zip   zap   zip   zap   zep   zyp   \n",
       "RowIdx-1 RowIdx-2 RowIdx-3 RowIdx-4                                             \n",
       "A0       B0       C0       D0         2.0   3.0   0.0   1.0   8.0   6.0   7.0   \n",
       "                           D1        11.0  12.0   9.0  10.0  17.0  15.0  16.0   \n",
       "                  C1       D0        20.0  21.0  18.0  19.0  26.0  24.0  25.0   \n",
       "                           D1        29.0  30.0  27.0  28.0  35.0  33.0  34.0   \n",
       "                  C2       D0        38.0  39.0  36.0  37.0  44.0  42.0  43.0   \n",
       "\n",
       "ColIdx-1                                         \n",
       "ColIdx-2                              foo        \n",
       "ColIdx-3                              zap   zep  \n",
       "RowIdx-1 RowIdx-2 RowIdx-3 RowIdx-4              \n",
       "A0       B0       C0       D0         4.0   5.0  \n",
       "                           D1        13.0  14.0  \n",
       "                  C1       D0        22.0  23.0  \n",
       "                           D1        31.0  32.0  \n",
       "                  C2       D0        40.0  41.0  "
      ]
     },
     "execution_count": 3,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "dfrc.head()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Save df html\n",
    "Must:\n",
    "+ use notebook.css\n",
    "+ wrap dataframe.html in specific classes - like in notebook\n",
    "Result can be iframed in any doc\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Overwriting templates/index.tpl.html\n"
     ]
    }
   ],
   "source": [
    "%%writefile templates/index.tpl.html\n",
    "\n",
    "<!DOCTYPE html>\n",
    "<html>\n",
    "\n",
    "<head>\n",
    "    <meta charset=\"utf-8\" />\n",
    "    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n",
    "    <title>dataframe</title>\n",
    "    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n",
    "    <link rel=\"stylesheet\" href=\"https://cdn.jupyter.org/notebook/5.6.0/style/style.min.css\">\n",
    "</head>\n",
    "\n",
    "<body>\n",
    "\n",
    "\n",
    "    <div class=\"output_are\">\n",
    "        <div class=\"output_subarea output_html rendered_html output_result\">\n",
    "\n",
    "            __$data.df_html$__\n",
    "\n",
    "        </div>\n",
    "    </div>\n",
    "\n",
    "</body>\n",
    "\n",
    "</html>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "file dump/index.html saved to disk\n"
     ]
    }
   ],
   "source": [
    "dir_template = 'templates'\n",
    "dir_dump = 'dump'\n",
    "\n",
    "loader = jj.FileSystemLoader(dir_template)\n",
    "env = jj.Environment(loader=loader,\n",
    "                     variable_start_string='__$',\n",
    "                     variable_end_string='$__',\n",
    "                     block_start_string='{-%',\n",
    "                     block_end_string='%-}'\n",
    "                     )\n",
    "\n",
    "template = env.get_template('index.tpl.html')\n",
    "# data = {'df_html': dfrc.to_html()}\n",
    "data = {'df_html': dfrc.head(10).to_html()}\n",
    "content = template.render(data=data)\n",
    "\n",
    "if not os.path.exists(dir_dump):\n",
    "    os.makedirs(dir_dump)\n",
    "\n",
    "path = os.path.join(dir_dump, 'index.html')\n",
    "with open(path, 'w') as f:\n",
    "    f.write(content)\n",
    "    print('file {} saved to disk'.format(path))\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "!cd dump && python -m http.server 8080"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "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.7"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}