PyCafe - Dash - Advanced Data Visualization with Dash and Mantine Components

pages/
app.py
requirements.txt
undesa_pd_2024_ims_stock_by_sex_and_destination.xlsx
utils.py
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
import pandas as pd 
from dash import Input, Output, html, callback, _dash_renderer, page_container, Dash
import dash_mantine_components as dmc
import dash

from utils import final_df

_dash_renderer._set_react_version("18.3.1")

app = Dash(external_scripts=dmc.styles.ALL, use_pages=True)


# Navigation links (filter out 404 page)
nav_links = dmc.Group(
    children=[
        dmc.Anchor(
            page["name"],
            href=page["relative_path"],
            style={"textDecoration": "none", "fontWeight": 500}
        )
        for page in dash.page_registry.values()
        if page["module"] != "pages.not_found_404"
    ],
    gap="xl",
    mt=10
)

# Main layout with UN logo
app.layout = dmc.MantineProvider(
    children=[
        dmc.Container(
            fluid=True,
            children=[
                # Header with logo and navigation
                dmc.Grid(
                    children=[
                        # Left-aligned navigation
                        dmc.GridCol(
                            span=10,
                            children=dmc.Paper(
                                nav_links,
                                p="md",
                                shadow="sm",
                                style={"height": "40%"}
                            )
                        ),
                        # Right-aligned UN logo
                        dmc.GridCol(
                            span=2,
                            children=html.Div(
                                html.Img(
                                    src="/assets/un_logo.png",
                                    style={
                                        "height": "60px",
                                        "float": "right",
                                        "padding": "10px",
                                        "objectFit": "contain"
                                    }
                                ),
                                style={"height": "100%", "display": "flex", "alignItems": "center"}
                            )
                        )
                    ],
                    gutter="xl",
                    style={"alignItems": "center"}
                ),
                
                # Page content area
                dmc.Grid(
                    children=[
                        dmc.GridCol(
                            span=12,
                            children=page_container
                        )
                    ],
                    style={"minHeight": "80vh"}
                ),
                
                # Footer
                dmc.Grid(
                    children=[
                        dmc.GridCol(
                            span=12,
                            children=dmc.Text(
                                "© 2024 United Nations Migration Dashboard", 
                                tt="center",
                                c="dimmed"
                            )
                        )
                    ],
                    mt=20
                )
            ],
            style={"padding": "20px"}
        )
    ],
    theme={"colorScheme": "light"}
)




if __name__ == "__main__":
    app.run(debug = True, port = 6070)