PyCafe - Dash - Dash Interactive Color Selector

app.py
requirements.txt
app.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
# check out https://dash.plotly.com/ for documentation
# And check out https://py.cafe/maartenbreddels for more examples
from dash import Dash, html, dcc, Input, Output, Patch, clientside_callback, callback
import plotly.express as px
import plotly.io as pio
import dash_bootstrap_components as dbc
# You need to install vizro>=0.1.34
import vizro

from dash_bootstrap_templates import load_figure_template

# Load data and figure templates
gapminder = px.data.gapminder().query("year==2007")
load_figure_template(["vizro", "vizro_dark"])

# Initialize the Dash app
# app = Dash(__name__, external_stylesheets=[vizro.bootstrap, dbc.icons.FONT_AWESOME])

# Alternatively, you could do:
vizro_bootstrap = "https://cdn.jsdelivr.net/gh/mckinsey/vizro@main/vizro-core/src/vizro/static/css/vizro-bootstrap.min.css"
app = Dash(__name__, external_stylesheets=[vizro_bootstrap, dbc.icons.FONT_AWESOME])

# Create components for the dashboard
color_mode_switch = html.Span(
    [
        dbc.Label(className="fa fa-moon", html_for="switch"),
        dbc.Switch(id="switch", value=False, className="d-inline-block ms-1"),
        dbc.Label(className="fa fa-sun", html_for="switch"),
    ]
)
scatter = dcc.Graph(
    id="scatter", figure=px.scatter(gapminder, x="gdpPercap", y="lifeExp", size="pop", size_max=60, color="continent")
)
box = dcc.Graph(id="box", figure=px.box(gapminder, x="continent", y="lifeExp", color="continent"))


tabs = dbc.Tabs(
    [
        dbc.Tab(scatter, label="Scatter Plot"),
        dbc.Tab(box, label="Box Plot"),
    ]
)

# Create app layout
app.layout = dbc.Container(
    [html.H1("Vizro Bootstrap Demo", className="bg-primary p-2 mt-4"), color_mode_switch, tabs],
    fluid=True,
)


# Add callbacks to switch between dark / light
@callback(
    [Output("scatter", "figure"), Output("box", "figure")],
    Input("switch", "value"),
)
def update_figure_template(switch_on):
    """Sync the figure template with the color mode switch on the bootstrap template."""
    template = pio.templates["vizro"] if switch_on else pio.templates["vizro_dark"]
    patched_figure = Patch()
    patched_figure["layout"]["template"] = template

    return patched_figure, patched_figure


clientside_callback(
    """
    (switchOn) => {
       switchOn
         ? document.documentElement.setAttribute('data-bs-theme', 'light')
         : document.documentElement.setAttribute('data-bs-theme', 'dark')
       return window.dash_clientside.no_update
    }
    """,
    Output("switch", "id"),
    Input("switch", "value"),
)


app.run()
Py.Cafe

dash-bootstrap-vizro

Dash Interactive Color Selector
