Dash/Dash_Upload_mutiples_CSV_Excel.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "latin-packing",
   "metadata": {
    "execution": {
     "iopub.execute_input": "2021-02-23T14:22:16.610471Z",
     "iopub.status.busy": "2021-02-23T14:22:16.610129Z",
     "iopub.status.idle": "2021-02-23T14:22:16.627784Z",
     "shell.execute_reply": "2021-02-23T14:22:16.626866Z",
     "shell.execute_reply.started": "2021-02-23T14:22:16.610384Z"
    },
    "papermill": {},
    "tags": []
   },
   "source": [
    "<img width=\"8%\" alt=\"Dash.png\" src=\"https://raw.githubusercontent.com/jupyter-naas/awesome-notebooks/master/.github/assets/logos/Dash.png\" style=\"border-radius: 15%\">"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "compressed-wilson",
   "metadata": {
    "papermill": {},
    "tags": []
   },
   "source": [
    "# Dash - Upload mutiples CSV Excel\n",
    "<a href=\"https://bit.ly/3JyWIk6\">Give Feedback</a> | <a href=\"https://github.com/jupyter-naas/awesome-notebooks/issues/new?assignees=&labels=bug&template=bug_report.md&title=Dash+-+Upload+mutiples+CSV+Excel:+Error+short+description\">Bug report</a>"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "religious-programmer",
   "metadata": {
    "papermill": {},
    "tags": []
   },
   "source": [
    "**Tags:** #dashboard #plotly #dash #naas #upload #csv"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "1fe9f56e-561c-4f52-aef8-b861c9462107",
   "metadata": {
    "papermill": {},
    "tags": []
   },
   "source": [
    "**Author:** [Florent Ravenel](https://www.linkedin.com/in/florent-ravenel/)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "c3db3bad-404c-481b-ade6-eb45f293da1f",
   "metadata": {
    "papermill": {},
    "tags": []
   },
   "source": [
    "**Last update:** 2023-04-12 (Created: 2022-11-22)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "naas-description",
   "metadata": {
    "papermill": {},
    "tags": [
     "description"
    ]
   },
   "source": [
    "**Description:** This notebook allows users to upload multiple CSV and Excel files to create interactive visualizations with Dash."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "distinguished-truth",
   "metadata": {
    "papermill": {},
    "tags": []
   },
   "source": [
    "## Input"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "numeric-mediterranean",
   "metadata": {
    "papermill": {},
    "tags": []
   },
   "source": [
    "### Import libraries"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "68ed1f03-e836-4410-aca9-63114fcd8b9f",
   "metadata": {
    "papermill": {},
    "tags": []
   },
   "outputs": [],
   "source": [
    "import os\n",
    "try:\n",
    "    import dash\n",
    "except:\n",
    "    !pip install dash --user\n",
    "    import dash\n",
    "try:\n",
    "    import dash_bootstrap_components as dbc\n",
    "except:\n",
    "    !pip install dash_bootstrap_components --user\n",
    "    import dash_bootstrap_components as dbc\n",
    "from dash import Dash, dcc, html, Input, Output, State\n",
    "import pandas as pd\n",
    "import base64\n",
    "import datetime\n",
    "import io\n",
    "from dash import dcc, html, dash_table"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "aggressive-trustee",
   "metadata": {
    "papermill": {},
    "tags": []
   },
   "source": [
    "### Setup Variables"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "continuous-melbourne",
   "metadata": {
    "papermill": {},
    "tags": []
   },
   "outputs": [],
   "source": [
    "DASH_PORT = 8050\n",
    "PLOTLY_LOGO = \"https://images.plot.ly/logo/new-branding/plotly-logomark.png\""
   ]
  },
  {
   "cell_type": "markdown",
   "id": "registered-showcase",
   "metadata": {
    "papermill": {},
    "tags": []
   },
   "source": [
    "## Model"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "ef111a16-1970-4cfe-b1e6-6df270668d65",
   "metadata": {
    "papermill": {},
    "tags": []
   },
   "source": [
    "### Create Navbar"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "e375949d-542e-4b52-8c22-89792bd604a0",
   "metadata": {
    "papermill": {},
    "tags": []
   },
   "outputs": [],
   "source": [
    "# this example that adds a logo to the navbar brand\n",
    "logo = dbc.Navbar(\n",
    "    dbc.Container(\n",
    "        [\n",
    "            html.A(\n",
    "                # Use row and col to control vertical alignment of logo / brand\n",
    "                dbc.Row(\n",
    "                    [\n",
    "                        dbc.Col(html.Img(src=PLOTLY_LOGO, height=\"30px\")),\n",
    "                        dbc.Col(dbc.NavbarBrand(\"Dash App\", className=\"ms-2\")),\n",
    "                    ],\n",
    "                    align=\"center\",\n",
    "                    className=\"g-0\",\n",
    "                ),\n",
    "                href=\"https://plotly.com\",\n",
    "                style={\"textDecoration\": \"none\"},\n",
    "            )\n",
    "        ],\n",
    "    ),\n",
    "    color=\"dark\",\n",
    "    dark=True,\n",
    "    className=\"mb-5\",\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "d7bcce05-c843-464f-9ffb-b2bdaad0cb61",
   "metadata": {
    "papermill": {},
    "tags": []
   },
   "source": [
    "### Create app layout"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "522d0fe1-d19a-4f97-bc63-085e31b7b2e5",
   "metadata": {
    "papermill": {},
    "tags": []
   },
   "outputs": [],
   "source": [
    "app = dash.Dash(\n",
    "    requests_pathname_prefix=f'/user/{os.environ.get(\"JUPYTERHUB_USER\")}/proxy/{DASH_PORT}/',\n",
    "    external_stylesheets=[dbc.themes.BOOTSTRAP],\n",
    "    meta_tags=[\n",
    "        {\"name\": \"viewport\", \"content\": \"width=device-width, initial-scale=1.0\"}\n",
    "    ],\n",
    ")\n",
    "\n",
    "# app = dash.Dash() if you are not in Naas\n",
    "\n",
    "# App title\n",
    "app.title = \"Naas - Dash Plotly\"\n",
    "\n",
    "app.layout = html.Div(\n",
    "    [\n",
    "        logo,\n",
    "        dcc.Upload(\n",
    "            id=\"upload-data\",\n",
    "            children=dbc.Button(\n",
    "                [\n",
    "                    \"Drag and Drop or \",\n",
    "                    html.A(\"Select Files\"),\n",
    "                ],\n",
    "                style={\"padding\": \"10px\"},\n",
    "                className=\"d-grid gap-2 col-6 mx-auto\",\n",
    "            ),\n",
    "            # Allow multiple files to be uploaded\n",
    "            multiple=True,\n",
    "        ),\n",
    "        html.Div(id=\"output-data-upload\"),\n",
    "    ]\n",
    ")\n",
    "\n",
    "\n",
    "def parse_contents(contents, filename, date):\n",
    "    content_type, content_string = contents.split(\",\")\n",
    "\n",
    "    decoded = base64.b64decode(content_string)\n",
    "    try:\n",
    "        if \"csv\" in filename:\n",
    "            # Assume that the user uploaded a CSV file\n",
    "            df = pd.read_csv(io.StringIO(decoded.decode(\"utf-8\")))\n",
    "        elif \"xls\" in filename or \"xlsx\" in filename:\n",
    "            # Assume that the user uploaded an excel file\n",
    "            df = pd.read_excel(io.BytesIO(decoded))\n",
    "    except Exception as e:\n",
    "        print(e)\n",
    "        return html.Div([\"There was an error processing this file.\"])\n",
    "\n",
    "    return html.Div(\n",
    "        [\n",
    "            html.H5(f\"✅ {filename} updated in Dash\"),\n",
    "            html.H6(datetime.datetime.fromtimestamp(date)),\n",
    "            dash_table.DataTable(\n",
    "                df.to_dict(\"records\"), [{\"name\": i, \"id\": i} for i in df.columns]\n",
    "            ),\n",
    "            html.Hr(),  # horizontal line\n",
    "            # For debugging, display the raw contents provided by the web browser\n",
    "            html.Div(\"Raw Content\"),\n",
    "            html.Pre(\n",
    "                contents[0:200] + \"...\",\n",
    "                style={\"whiteSpace\": \"pre-wrap\", \"wordBreak\": \"break-all\"},\n",
    "            ),\n",
    "        ],\n",
    "        style={\"padding\": \"30px\"},\n",
    "    )\n",
    "\n",
    "\n",
    "@app.callback(\n",
    "    Output(\"output-data-upload\", \"children\"),\n",
    "    Input(\"upload-data\", \"contents\"),\n",
    "    State(\"upload-data\", \"filename\"),\n",
    "    State(\"upload-data\", \"last_modified\"),\n",
    ")\n",
    "def update_output(list_of_contents, list_of_names, list_of_dates):\n",
    "    if list_of_contents is not None:\n",
    "        children = [\n",
    "            parse_contents(c, n, d)\n",
    "            for c, n, d in zip(list_of_contents, list_of_names, list_of_dates)\n",
    "        ]\n",
    "        return children"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "lonely-pacific",
   "metadata": {
    "execution": {
     "iopub.execute_input": "2021-07-02T23:32:10.789097Z",
     "iopub.status.busy": "2021-07-02T23:32:10.788829Z",
     "iopub.status.idle": "2021-07-02T23:32:10.796900Z",
     "shell.execute_reply": "2021-07-02T23:32:10.796358Z",
     "shell.execute_reply.started": "2021-07-02T23:32:10.789033Z"
    },
    "papermill": {},
    "tags": []
   },
   "source": [
    "## Output"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "890f7c86-b7bb-4f5d-9a1b-e492dd9580fd",
   "metadata": {
    "papermill": {},
    "tags": []
   },
   "source": [
    "### Generate URL and show logs"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "9c4e3b7b-6440-4844-8054-265f1aec65eb",
   "metadata": {
    "papermill": {},
    "tags": []
   },
   "outputs": [],
   "source": [
    "if __name__ == \"__main__\":\n",
    "    app.run_server(proxy=f\"http://127.0.0.1:{DASH_PORT}::https://app.naas.ai\")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "b161e87f-48db-4b78-88a1-3c2b9e0de93d",
   "metadata": {
    "papermill": {},
    "tags": []
   },
   "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.9.6"
  },
  "naas": {
   "notebook_id": "506d501ebff0f9b3a6ab229a88a2464ece6c09bfdd29e7b5ce5d43731c3a3c5d",
   "notebook_path": "Dash/Dash_Upload_mutiples_CSV_Excel.ipynb"
  },
  "papermill": {
   "default_parameters": {},
   "environment_variables": {},
   "parameters": {},
   "version": "2.3.3"
  },
  "widgets": {
   "application/vnd.jupyter.widget-state+json": {
    "state": {},
    "version_major": 2,
    "version_minor": 0
   }
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}