Dash/Dash_Create_conditional_formatting_on_HTML_element.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "f2814c1e-dc4f-49ea-b333-396ad37cf4f5",
   "metadata": {
    "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": "45d740c2-fb0a-4f61-a5e6-dcd37ebad163",
   "metadata": {
    "papermill": {},
    "tags": []
   },
   "source": [
    "# Dash - Create conditional formatting on HTML element\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+-+Create+conditional+formatting+on+HTML+element:+Error+short+description\">Bug report</a>"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "0dc8f387-e4fd-4ea4-9bd1-89e6b47c08e1",
   "metadata": {
    "papermill": {},
    "tags": []
   },
   "source": [
    "**Tags:** #dash #html #conditional #formatting #element #plotly"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "d13a1a63-07ec-4157-aec3-8659933d745f",
   "metadata": {
    "papermill": {},
    "tags": []
   },
   "source": [
    "**Author:** [Florent Ravenel](https://www.linkedin.com/in/florent-ravenel/)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "fa9be693-d180-48d1-a874-9400cc864786",
   "metadata": {
    "papermill": {},
    "tags": []
   },
   "source": [
    "**Last update:** 2023-05-24 (Created: 2023-05-24)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "38e670f1-a5f4-4a0f-832a-9271b0157139",
   "metadata": {
    "papermill": {},
    "tags": []
   },
   "source": [
    "**Description:** This notebook will show how to create conditional formatting of an HTML element using Dash."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "cd40cc91-a07e-4d67-b5e3-091676ea3fa0",
   "metadata": {
    "papermill": {},
    "tags": []
   },
   "source": [
    "**References:**\n",
    "- https://community.plotly.com/t/conditional-formatting-of-an-html-element/60230/2\n",
    "- https://dash.plotly.com/"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "a1e08311-05fa-4853-940f-4ac042e18a13",
   "metadata": {
    "papermill": {},
    "tags": []
   },
   "source": [
    "## Input"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "7bdcda07-1623-4ca1-91eb-d47ce1132b9c",
   "metadata": {
    "papermill": {},
    "tags": []
   },
   "source": [
    "### Import libraries"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "id": "d88883d7-666f-4d82-bcb1-56d2995d6795",
   "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 html, dcc, Output, Input, State"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "a86822d9-df3d-4138-ab3f-ef3fb02625f6",
   "metadata": {
    "papermill": {},
    "tags": []
   },
   "source": [
    "### Setup Variables\n",
    "- `DASH_PORT`: specify a port number for Dash"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "id": "3c2fec45-d531-479b-93b0-6d0769411a3e",
   "metadata": {
    "papermill": {},
    "tags": []
   },
   "outputs": [],
   "source": [
    "DASH_PORT = 8050"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "36aeb318-670a-4576-a447-fc89b11bf4f4",
   "metadata": {
    "papermill": {},
    "tags": []
   },
   "source": [
    "## Model"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "88b6f3b2-a922-4fdd-b8ff-df9179ef4054",
   "metadata": {
    "papermill": {},
    "tags": []
   },
   "source": [
    "### Initialize Dash app"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "id": "83f2f67d-d17f-4c9a-80a2-9e8d69793acf",
   "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"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "3433d32c-8fcb-4d5f-98d5-ed522626dca2",
   "metadata": {
    "papermill": {},
    "tags": []
   },
   "source": [
    "### Create app layout"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "id": "adad318f-6f98-4d91-bd3b-90fce150e469",
   "metadata": {
    "papermill": {},
    "tags": []
   },
   "outputs": [],
   "source": [
    "app.title = \"Naas\"\n",
    "app.layout = html.Div(\n",
    "    [\n",
    "        html.H1(\"Enter your color in HEX\"),\n",
    "        dcc.Input(id=\"input\"),\n",
    "        html.H4(id=\"heading\", children=\"A Heading\")\n",
    "    ]\n",
    ")\n",
    "\n",
    "@app.callback(\n",
    "    Output(\"heading\", \"style\"),\n",
    "    Input(\"input\", \"value\")\n",
    ")\n",
    "def update_style(value):\n",
    "    return {\n",
    "        \"color\": value\n",
    "    }"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "66800589-b3d7-4796-aa6b-a879395beab3",
   "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": "617b92c8-5f1c-4792-b9b7-3223b180baba",
   "metadata": {
    "papermill": {},
    "tags": []
   },
   "source": [
    "### Generate URL and show logs"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "id": "39bdca3c-146d-4f39-b58c-b92f2531c203",
   "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": "11986286-9428-41ec-88c6-a0f30ba55773",
   "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": "5d0ec204e1adc070996a900d4212c1d45f5925dc25a522b3e3f45b857e1e6f54",
   "notebook_path": "Dash/Dash_Create_conditional_formatting_on_HTML_element.ipynb"
  },
  "papermill": {
   "default_parameters": {},
   "environment_variables": {},
   "parameters": {},
   "version": "2.4.0"
  },
  "widgets": {
   "application/vnd.jupyter.widget-state+json": {
    "state": {},
    "version_major": 2,
    "version_minor": 0
   }
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}