This repository has been archived by the owner on Nov 12, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 2
/
ex_multi_page.py
executable file
·161 lines (117 loc) · 4.48 KB
/
ex_multi_page.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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
"""Example Multi Page Applet."""
import dash_bootstrap_components as dbc
import plotly.express as px
from dash import dcc, html
from implements import implements
from dash_charts.utils_app import AppBase, AppInterface
from dash_charts.utils_app_with_navigation import AppMultiPage
from dash_charts.utils_fig import min_graph
from dash_charts.utils_helpers import parse_dash_cli_args
@implements(AppInterface) # noqa: H601
class StaticPage(AppBase):
"""Simple App without charts or callbacks."""
basic_style = {
'marginLeft': 'auto',
'marginRight': 'auto',
'maxWidth': '1000px',
'paddingTop': '10px',
}
def initialization(self) -> None:
"""Initialize ids with `self.register_uniq_ids([...])` and other one-time actions."""
super().initialization()
self.register_uniq_ids(['N/A'])
def create_elements(self) -> None:
"""Initialize the charts, tables, and other Dash elements.."""
...
def create_callbacks(self) -> None:
"""Register callbacks necessary for this tab."""
...
class PageText(StaticPage):
"""Text page."""
name = 'Text Page'
def return_layout(self) -> dict:
"""Return Dash application layout.
Returns:
dict: Dash HTML object
"""
return html.Div(
style=self.basic_style, children=(
[html.H1(children=f'{self.name} Scrollable Content')]
+ [html.P(children=[str(count) + '-word' * 10]) for count in range(100)]
),
)
class PageChart(StaticPage):
"""Chart page."""
name = 'Chart Page'
def return_layout(self) -> dict:
"""Return Dash application layout.
Returns:
dict: Dash HTML object
"""
return html.Div(
style=self.basic_style, children=[
html.H1(children=self.name),
dcc.Loading(
type='circle',
children=[
min_graph(figure=px.scatter(px.data.iris(), x='sepal_width', y='sepal_length', height=500)),
],
),
],
)
class Page404(StaticPage):
"""404 page."""
name = 'Page 404'
def return_layout(self) -> dict:
"""Return Dash application layout.
Returns:
dict: Dash HTML object
"""
return html.Div(
style=self.basic_style, children=[
html.H1(children='404: Path not found'),
html.Img(src='https://upload.wikimedia.org/wikipedia/commons/2/26/NL_Route_404.svg'),
],
)
# ----------------------------------------------------------------------------------------------------------------------
class MultiPageDemo(AppMultiPage): # noqa: H601
"""Demo application."""
name = 'MultiPageDemo'
navbar_links = [('Home', '/'), ('Chart', '/is-chart'), ('404', '/404')]
"""Base class must create list of tuples `[('Link Name', '/link'), ]` to use default `self.nav_bar()`."""
dropdown_links = [('DBC', 'https://dash-bootstrap-components.opensource.faculty.ai/l/components/nav')]
"""Base class must create list of tuples `[('Link Name', '/link'), ]` to use default `self.nav_bar()`."""
logo = 'https://images.plot.ly/logo/new-branding/plotly-logomark.png'
"""Optional path to logo. If None, no logo will be shown in navbar."""
external_stylesheets = [dbc.themes.FLATLY] # DARKLY, FLATLY, etc. (https://bootswatch.com/)
"""List of external stylesheets. Default is minimal Dash CSS. Only applies if app argument not provided."""
def define_nav_elements(self):
"""Return list of initialized tabs.
Returns:
list: each item is an initialized tab (ex `[AppBase(self.app)]` in the order each tab is rendered
"""
return [
PageText(app=self.app),
PageChart(app=self.app),
Page404(app=self.app),
]
def select_page_name(self, pathname):
"""Return the page name determined based on the pathname.
Args:
pathname: relative pathname from URL
Returns:
str: page name
"""
if pathname == '/':
return PageText.name
elif 'chart' in pathname:
return PageChart.name
else:
return Page404.name
instance = MultiPageDemo
app = instance()
app.create()
if __name__ == '__main__':
app.run(**parse_dash_cli_args())
else:
FLASK_HANDLE = app.get_server()