Create conditional formatting on number value
Tags: #dash #html #conditional #formatting #element #plotly
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:
- https://community.plotly.com/t/conditional-formatting-of-an-html-element/60230/2
- https://dash.plotly.com/
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
DASH_PORT: specify a port number for Dash
DASH_PORT = 8050
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
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
}
if __name__ == "__main__":
app.run_server(proxy=f"http://127.0.0.1:{DASH_PORT}::https://app.naas.ai")
Last modified 1mo ago