I already success create dash multipage with 1 file, and multi dropdown too, but it takes 3000 lines, and make my self ‘lazy’ to fix something or try to add some page anymore.
now, I try to build new dashboard, which each page separate in different files.
can somebody review my code? It works no error, can change url
, but the layout wouldn’t change…
my structure file:
+assets
- logo.png
- backgroud.png
- reset.css
+menu
- dashboard1.py
- dashboard2.py
- dashboard3.py
- dashboard4.py
- style.py
app.py
dashboard.py
script:
app.py
import dash
app = dash.Dash(__name__, suppress_callback_exceptions=True,assets_external_path='assets/')
server = app.server
app.scripts.config.serve_locally = True
dashboard.py
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
import pandas as pd
from app import app, server
from menu.dashboard1 import *
from menu.dashboard2 import *
from menu.dashboard3 import *
from menu.dashboard4 import *
app.scripts.config.serve_locally = True
app.config.suppress_callback_exceptions = True
start = server
sdbar = html.Div([])
ctnt = html.Div([])
def isi_sidebar():
sidebar = html.Div([
sdbar
], id='main_sidebar')
return sidebar
def isi_content():
content = html.Div(
[ctnt],
id='page-content'
)
return content
app.layout = html.Div([dcc.Location(id="url"),isi_sidebar(), isi_content()])
@app.callback(
[Output(f"dashboard{i}", "active") for i in range(1, 5)],
[Input("url", "pathname")],
)
def toggle_active_links(pathname):
if pathname == "/" or "/dashboard1":
# Treat page 1 as the homepage / index
return True, False
return [pathname == f"/dashboard{i}" for i in range(1, 5)]
@app.callback(Output('page-content', 'children'),
[Input('url', 'pathname')])
def display_page(pathname):
if pathname == '/' or '/dashboard1':
ctnt = content1
return ctnt
elif pathname == '/dashboard2':
ctnt = content2
return ctnt
elif pathname == '/dashboard3':
ctnt = content3
return ctnt
elif pathname == '/dashboard4':
ctnt = content4
return ctnt
else:
return dbc.Jumbotron(
[
html.H1("404: Link not Found", className="Wrong Page"),
html.Hr(),
html.P(f"Halaman {pathname} belum gw buat bro..."),
]
)
@app.callback(Output('main_sidebar', 'children'),
[Input('url', 'pathname')])
def display_page(pathname):
if pathname in ['/', '/dashboard1']:
sdbar = sidebar1
return sdbar
elif pathname in ['/dashboard2']:
sdbar = sidebar2
return sdbar
elif pathname in ['/dashboard3']:
sdbar = sidebar3
return sdbar
elif pathname in ['/dashboard4']:
sdbar = sidebar4
return sdbar
else:
return ''
if __name__ == '__main__':
app.run_server(debug=True)
#app.run_server()
menu/dashboard1.py
import dash_core_components as dcc
import dash_html_components as html
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output, State
from menu.style import *
from app import app, server
BOX_STYLE1 = KOTAK_UTAMA_STYLE
SIDEBAR_STYLE1 = SIDEBAR_STYLE
#content
kolom_kiri1 = html.Div([])
kolom_tengah1 = html.Div([])
kolom_kanan1 = html.Div([])
kolom_peta1 = html.Div([])
kotak_utama1 = html.Div([
kolom_kiri1,
kolom_tengah1,
kolom_kanan1,
kolom_peta1],id='main box1',
style=BOX_STYLE1
)
#sidebar
sidebar1 = html.Div(
[html.Img(src=app.get_asset_url('logo.png'),style={
'height':'116px',
'width':'138px',
'margin-top': '-9px',
'background-color' : 'rgba(0,0,0,0.03)'}),
#html.Hr(),
html.P([
"TEXT FOR LOGO", html.Br(),"ANOTHER TEXT LINE", html.Br(), "MORE TEXT LINE"], className="lead",
style={
'textAlign': 'center',
'background-color' : 'rgba(0,0,0,0.03)',
'color': '#f1a633',
'fontSize': '8',
'margin-top': '-3px'
}),
html.Hr(),
html.Div(children=[
html.A(html.Button('DASHBOARD I', className='tab-button'),
href='/dashboard1'),
html.Hr(),
html.A(html.Button('DASHBOARD II', className='tab-button'),
href='/dashboard2'),
html.Hr(),
html.A(html.Button('DASHBOARD III', className='tab-button'),
href='/dashboard3'),
html.Hr(),
html.A(html.Button('DASHBOARD IV', className='tab-button'),
href='/dashboard4'),
html.Hr(),
],
),
],
style=SIDEBAR_STYLE1,
)
content1 = html.Div([
html.H1(['TITLE FOR DASHBOARD I'],
style={
'margin-left': '340px',
'margin-top': '20px',
'color': 'rgba(255,255,255,1)',
'fontSize': '18',
}),
kotak_utama1,
],style={
'margin-left': '0px',
'margin-top': '0px',}
)
layout1 = html.Div([dcc.Location(id="url"), sidebar1, content1])
menu/dashboard2.py
import dash_core_components as dcc
import dash_html_components as html
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output, State
from menu.style import *
from app import app, server
BOX_STYLE2 = KOTAK_UTAMA_STYLE
SIDEBAR_STYLE2 = SIDEBAR_STYLE
#content
kolom_kiri2 = html.Div([])
kolom_tengah2 = html.Div([])
kolom_kanan2 = html.Div([])
kolom_peta2 = html.Div([])
mainbox2 = html.Div([
kolom_kiri2,
kolom_tengah2,
kolom_kanan2,
kolom_peta2],id='main box2',
style=BOX_STYLE2
)
#sidebar
sidebar2 = html.Div(
[html.Img(src=app.get_asset_url('logo.png'),style={
'height':'116px',
'width':'138px',
'margin-top': '-9px',
'background-color' : 'rgba(0,0,0,0.03)'}),
#html.Hr(),
html.P([
"TEXT FOR LOGO", html.Br(),"ANOTHER TEXT LINE", html.Br(), "MORE TEXT LINE"], className="lead",
style={
'textAlign': 'center',
'background-color' : 'rgba(0,0,0,0.03)',
'color': '#f1a633',
'fontSize': '8',
'margin-top': '-3px'
}),
html.Hr(),
html.Div(children=[
html.A(html.Button('DASHBOARD I', className='tab-button'),
href='/dashboard1'),
html.Hr(),
html.A(html.Button('DASHBOARD II', className='tab-button'),
href='/dashboard2'),
html.Hr(),
html.A(html.Button('DASHBOARD III', className='tab-button'),
href='/dashboard3'),
html.Hr(),
html.A(html.Button('DASHBOARD IV', className='tab-button'),
href='/dashboard4'),
html.Hr(),
],
),
],
style=SIDEBAR_STYLE2,
)
content2 = html.Div([
html.H1(['TITLE FOR DASHBOARD II'],
style={
'margin-left': '340px',
'margin-top': '20px',
'color': 'rgba(255,255,255,1)',
'fontSize': '18',
}),
mainbox2,
],style={
'margin-left': '0px',
'margin-top': '0px',}
)
layout2 = html.Div([dcc.Location(id="url"), sidebar2, content2])
menu/dashboard3.py
import dash_core_components as dcc
import dash_html_components as html
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output, State
from menu.style import *
from app import app, server
BOX_STYLE3 = KOTAK_UTAMA_STYLE
SIDEBAR_STYLE3 = SIDEBAR_STYLE
#content
kolom_kiri3 = html.Div([])
kolom_tengah3 = html.Div([])
kolom_kanan3 = html.Div([])
kolom_peta3 = html.Div([])
mainbox3 = html.Div([
kolom_kiri3,
kolom_tengah3,
kolom_kanan3,
kolom_peta3],id='main box3',
style=BOX_STYLE3
)
#sidebar
sidebar3 = html.Div(
[html.Img(src=app.get_asset_url('logo.png'),style={
'height':'116px',
'width':'138px',
'margin-top': '-9px',
'background-color' : 'rgba(0,0,0,0.03)'}),
#html.Hr(),
html.P([
"TEXT FOR LOGO", html.Br(),"ANOTHER TEXT LINE", html.Br(), "MORE TEXT LINE"], className="lead",
style={
'textAlign': 'center',
'background-color' : 'rgba(0,0,0,0.03)',
'color': '#f1a633',
'fontSize': '8',
'margin-top': '-3px'
}),
html.Hr(),
html.Div(children=[
html.A(html.Button('DASHBOARD I', className='tab-button'),
href='/dashboard1'),
html.Hr(),
html.A(html.Button('DASHBOARD II', className='tab-button'),
href='/dashboard2'),
html.Hr(),
html.A(html.Button('DASHBOARD III', className='tab-button'),
href='/dashboard3'),
html.Hr(),
html.A(html.Button('DASHBOARD IV', className='tab-button'),
href='/dashboard4'),
html.Hr(),
],
),
],
style=SIDEBAR_STYLE3,
)
content3 = html.Div([
html.H1(['TITLE FOR DASHBOARD III'],
style={
'margin-left': '340px',
'margin-top': '20px',
'color': 'rgba(255,255,255,1)',
'fontSize': '18',
}),
mainbox3,
],style={
'margin-left': '0px',
'margin-top': '0px',}
)
layout3 = html.Div([dcc.Location(id="url"), sidebar3, content3])
menu/dashboard4.py
import dash_core_components as dcc
import dash_html_components as html
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output, State
from menu.style import *
from app import app, server
# Add dashboard specific methods here
BOX_STYLE4 = KOTAK_UTAMA_STYLE
SIDEBAR_STYLE4 = SIDEBAR_STYLE
#content
kolom_kiri4 = html.Div([])
kolom_tengah4 = html.Div([])
kolom_kanan4 = html.Div([])
kolom_peta4 = html.Div([])
mainbox4 = html.Div([
kolom_kiri4,
kolom_tengah4,
kolom_kanan4,
kolom_peta4],id='main box4',
style=BOX_STYLE4
)
#sidebar
sidebar4 = html.Div(
[html.Img(src=app.get_asset_url('logo.png'),style={
'height':'116px',
'width':'138px',
'margin-top': '-9px',
'background-color' : 'rgba(0,0,0,0.03)'}),
#html.Hr(),
html.P([
"TEXT FOR LOGO", html.Br(),"ANOTHER TEXT LINE", html.Br(), "MORE TEXT LINE"], className="lead",
style={
'textAlign': 'center',
'background-color' : 'rgba(0,0,0,0.03)',
'color': '#f1a633',
'fontSize': '8',
'margin-top': '-3px'
}),
html.Hr(),
html.Div(children=[
html.A(html.Button('DASHBOARD I', className='tab-button'),
href='/dashboard1'),
html.Hr(),
html.A(html.Button('DASHBOARD II', className='tab-button'),
href='/dashboard2'),
html.Hr(),
html.A(html.Button('DASHBOARD III', className='tab-button'),
href='/dashboard3'),
html.Hr(),
html.A(html.Button('DASHBOARD IV', className='tab-button'),
href='/dashboard4'),
html.Hr(),
],
),
],
style=SIDEBAR_STYLE4,
)
content4 = html.Div([
html.H1(['TITLE FOR DASHBOARD IV'],
style={
'margin-left': '340px',
'margin-top': '20px',
'color': 'rgba(255,255,255,1)',
'fontSize': '18',
}),
mainbox4,
],style={
'margin-left': '0px',
'margin-top': '0px',}
)
layout4 = html.Div([dcc.Location(id="url"), sidebar4, content4])
menu/style.py
SIDEBAR_STYLE = {
"position": "fixed",
"top": '0',
"left": '0',
"bottom": '0',
"width": "240px",
"padding": "2rem 1rem",
"background-color": "rgba(0, 0, 0, 0.4",
"textAlign": "center"
}
KOTAK_UTAMA_STYLE = {
'margin-top': '30px',
'margin-left': '320px',
'width': '2000px',
'height': '1022px',
'background-color': 'rgba(0, 0, 0, 0.4)'
}
reset.css
html {
height: 100%;}
body{
margin:0;
width:100%;
height:100%;
background-image: url("./backgroud.png");
background-size: cover;
background-position: center;}
the dashboard layout looks like this one:
i already try, run python3 console in that folder, and run:
>> from menu.dashboard1 import *
>> from menu.dashboard2 import *
>> from menu.dashboard3 import *
>> from menu.dashboard4 import *
>>
>> dir() # to view did all variable definition can called or not, and it can, no variable miss.
can somebody tell me, what wrong with my code…
which one, I miss it…