Dash - Create conditional formatting on number value

Give Feedback | Bug report

Tags: #dash #html #conditional #formatting #element #plotly

Author: Florent Ravenel

Last update: 2023-05-24 (Created: 2023-05-24)

Description: This notebook will show how to create conditional formatting of an HTML element using Dash.

References:

Input

Import libraries

In [ ]:

import os
try:
    import dash
except:
    !pip install dash --user
    import dash
try:
    import dash_bootstrap_components as dbc
except:
    !pip install dash_bootstrap_components --user
    import dash_bootstrap_components as dbc
from dash import html, dcc, Output, Input, State

Setup Variables

DASH_PORT: specify a port number for Dash

In [ ]:

DASH_PORT = 8050

Model

Initialize Dash app

In [ ]:

app = dash.Dash(
    requests_pathname_prefix=f'/user/{os.environ.get("JUPYTERHUB_USER")}/proxy/{DASH_PORT}/',
    external_stylesheets=[dbc.themes.BOOTSTRAP],
    meta_tags=[
        {"name": "viewport", "content": "width=device-width, initial-scale=1.0"}
    ],
)

# app = dash.Dash() if you are not in Naas

Create app layout

In [ ]:

app.title = "Naas"
app.layout = html.Div(
    [
        html.H3("Enter your number value"),
        html.P("If value = 0 then color = orange, if value > 0 then green, if value < 0 then red"),
        dcc.Input(id="input"),
        html.H4(id="value", children="Color")
    ],
    style={
        "padding": "100px"
    }
)

@app.callback(
    Output("value", "style"),
    Input("input", "value")
)
def update_style(value):
    if int(value) < 0:
        color = "#E74C3C"
    elif int(value) == 0:
        color = "#F4D03F"
    elif int(value) > 0:
        color = "#2ECC71"
    return {
        "color": color
    }

Output

Generate URL and show logs

In [ ]:

if __name__ == "__main__":
    app.run_server(proxy=f"http://127.0.0.1:{DASH_PORT}::https://app.naas.ai")

In [ ]: