Plotly figure templates and Bootstrap themed figure templates

figure_templates.py

from dash import Dash, dcc, html, Input, Output
import plotly.express as px
from dash_bootstrap_templates import load_figure_template
import dash_mantine_components as dmc

app = Dash(__name__)

iris = px.data.iris()
gapminder = px.data.gapminder()
tips = px.data.tips()
carshare = px.data.carshare()

plotly_figure_templates = [
    "plotly",
    "ggplot2",
    "seaborn",
    "simple_white",
    "plotly_white",
    "plotly_dark",
    "presentation",
    "xgridoff",
    "ygridoff",
    "gridon",
    "none",
]

bootstrap_figure_templates_light = [
    "bootstrap",
    "cerulean",
    "cosmo",
    "flatly",
    "journal",
    "litera",
    "lumen",
    "lux",
    "materia",
    "minty",
    "pulse",
    "sandstone",
    "simplex",
    "sketchy",
    "spacelab",
    "united",
    "yeti",
    "superhero",
    "morph",
    "quartz",
    "zephyr",
]
bootstrap_figure_templates_dark = [
    "cyborg",
    "darkly",
    "slate",
    "solar",
    "superhero",
    "vapor",
]
load_figure_template(bootstrap_figure_templates_light + bootstrap_figure_templates_dark)

select_template = html.Div(
    dmc.Select(
        id="template",
        label="Select Figure Template",
        value="plotly",
        maxDropdownHeight=500,
        style={"marginBottom": 10},
        data=[
            {"value": t, "label": t, "group": "Plotly Figure Templates"}
            for t in plotly_figure_templates
        ]
        + [
            {
                "value": t,
                "label": t,
                "group": "Bootstrap Figure Templates - Light Themes",
            }
            for t in bootstrap_figure_templates_light
        ]
        + [
            {
                "value": t,
                "label": t,
                "group": "Bootstrap Figure Templates - Dark Themes",
            }
            for t in bootstrap_figure_templates_dark
        ],
    ),
)


app.layout = dmc.Container(
    [
        html.H1("Plotly Figure Template Demo"),
        html.Div(select_template),
        dmc.SimpleGrid(id="graphs", cols=2),
    ],
    fluid=True,
)


@app.callback(
    Output("graphs", "children"),
    Input("template", "value"),
)
def update_graph_theme(template):
    graph1 = dmc.Paper(
        dcc.Graph(
            figure=px.scatter(
                iris,
                x="sepal_width",
                y="sepal_length",
                color="species",
                title=f"Iris <br>{template} figure template",
                template=template,
            ),
        ),
        shadow="sm",
    )
    graph2 = dmc.Paper(
        dcc.Graph(
            figure=px.scatter(
                gapminder,
                x="gdpPercap",
                y="lifeExp",
                size="pop",
                color="continent",
                hover_name="country",
                animation_frame="year",
                animation_group="country",
                log_x=True,
                size_max=60,
                title=f"Gapminder <br>{template} figure template",
                template=template,
            ),
        ),
        shadow="sm",
    )
    graph3 = dmc.Paper(
        dcc.Graph(
            figure=px.violin(
                tips,
                y="tip",
                x="smoker",
                color="sex",
                box=True,
                points="all",
                hover_data=tips.columns,
                title=f"Tips <br>{template} figure template",
                template=template,
            ),
        ),
        shadow="sm",
    )
    fig4 = px.scatter_mapbox(
        carshare,
        lat="centroid_lat",
        lon="centroid_lon",
        color="peak_hour",
        size="car_hours",
        size_max=15,
        zoom=10,
        mapbox_style="carto-positron",
        title=f"Carshare <br> {template} figure template",
        template=template,
    )
    fig4.update_layout(margin={"l": 30, "b": 30})
    graph4 = dmc.Paper(dcc.Graph(figure=fig4), shadow="sm")

    return [graph1, graph2, graph3, graph4]


if __name__ == "__main__":
    app.run_server(debug=True)