PyCafe - Dash - demo of mantine themed plotly figure templates

assets/
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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112


from dash import Dash, dcc, Input, Output, State, callback, _dash_renderer
import plotly.express as px
import dash_mantine_components as dmc
from dash_iconify import DashIconify
_dash_renderer._set_react_version("18.2.0")

df = px.data.gapminder()

app = Dash(__name__)

theme_toggle = dmc.Affix(
    dmc.ActionIcon(
        [
            dmc.Paper(DashIconify(icon="radix-icons:sun", width=25), darkHidden=True),
            dmc.Paper(DashIconify(icon="radix-icons:moon", width=25), lightHidden=True),
        ],
        variant="transparent",
        color="yellow",
        id="color-scheme-toggle",
        size="lg",
        ms="auto",
    ),
    position={"top": 10, "right": 10}
)

sample_controls = dmc.Box([
    dmc.Button("sample button"),
    dmc.Button("sample red button", color="red"),
    dmc.Button("sample yellow button", color="yellow"),
    dmc.Slider(value=25, my="lg"),
], w=600)

layout = dmc.Box(
    [
        theme_toggle,
        dmc.Title("Figure Template Demo", ta="center"),
        dmc.Text("Change theme to see 'mantine_light' and 'mantine_dark' figure templates", ta="center"),
        sample_controls,
        dcc.Loading(dmc.Box(id="output-container"), delay_hide=1000),
    ],
    p="lg"
)

app.layout=dmc.MantineProvider(
    layout,
    forceColorScheme="light",
    id="mantine-provider"
)


@callback(Output("output-container", "children"), Input("mantine-provider", "forceColorScheme"))
def update(color_scheme):
    template = "mantine_light" if color_scheme == "light" else "mantine_dark"

    line_fig = px.line(
        df.query("1952 <= year <= 1982 & continent != 'Asia'"),
        x="year",
        y="gdpPercap",
        color="continent",
        line_group="country",
        template=template,
    )

    dff = df[df.year == 2007]
    scatter_fig = px.scatter(
        dff,
        x="gdpPercap",
        y="lifeExp",
        size="pop",
        color="continent",
        log_x=True,
        size_max=60,
        template=template,
        title=f"2007 GDP per Capita vs Life Expectancy, Sized by Population ",
    )


    avg_lifeExp = (dff["lifeExp"] * dff["pop"]).sum() / dff["pop"].sum()
    map_fig = px.choropleth(
        dff,
        locations="iso_alpha",
        color="lifeExp",
        template=template,
        title="%.0f World Average Life Expectancy was %.1f years" % (2007, avg_lifeExp),
    )

    hist_fig = px.histogram(dff, x='lifeExp', title='2007 Distribution of Life Expectancy', template=template)

    return dmc.Grid(
            [
                dmc.GridCol(dcc.Graph(figure=hist_fig), span={"base": 12, "md":6}),
                dmc.GridCol(dcc.Graph(figure=scatter_fig), span={"base": 12, "md":6}),
                dmc.GridCol(dcc.Graph(figure=line_fig), span={"base": 12, "md":6}),
                dmc.GridCol(dcc.Graph(figure=map_fig), span={"base": 12, "md":6}),
            ],
            gutter="xl",
        )

@callback(
    Output("mantine-provider", "forceColorScheme"),
    Input("color-scheme-toggle", "n_clicks"),
    State("mantine-provider", "forceColorScheme"),
    prevent_initial_call=True,
)
def switch_theme(_, theme):
    return "dark" if theme == "light" else "light"


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

mantine-plotly-figure-templates

demo of mantine themed plotly figure templates
