Hi,
When i start my app (python index.py) several of the charts/graphs i have in several pages open up individually in different urls, 20 seperate url’s… it also does it when i save any page. screen shot below. I have not seen any similar posts here…
My Versions:
Dash 1.20.0
Dcc version 1.16.0
im on mac, cataline 10.15.5
I followed a basic format to build a multi page app… these are the files…
app.py
import dash
import dash_auth
app = dash.Dash(__name__, suppress_callback_exceptions=True,
meta_tags=[{'name': 'viewport',
'content': 'width=device-width, initial-scale=1.0'}],
)
server = app.server
an index.py which is my main file…
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import dash_bootstrap_components as dbc
import pandas as pd
import plotly.express as px
from app import app
from app import server
# Connect to your app pages (add pages here from apps file, py files)
from apps import vgames, global_sales, macro, card, esg, nlp, home, live, alpaca, nlpdial, economic, news, socialdata, energy, data
app = dash.Dash(__name__)
app.layout = html.Div([
dcc.Location(id='url', refresh=False),
dbc.NavbarSimple(
children=[
dbc.NavLink("Home", href="/", active="exact"),
dbc.NavLink("About", href="apps/home", active="exact"),
dbc.DropdownMenu(
[dbc.DropdownMenuItem("DEF",
href="apps/vgames", active="exact"),
dbc.DropdownMenuItem("DEX'S",
href="https://discord.gg/sGtNme",
external_link=False,),
dbc.DropdownMenuItem("Centralized Exchanges",
href="https://www.facebook.com/profile.php?id=100070143875",
external_link=False,),
dbc.DropdownMenuItem("ETH",
href="https://www.facebook.com/profile.php?id=100070143875491",
external_link=False,),
dbc.DropdownMenuItem("Bitcoin",
href="https://www.facebook.com/profile.php?id=1000701438751",
external_link=False,),
dbc.DropdownMenuItem("Binance",
href="https://www.facebook.com/profile.php?id=100070143491",
external_link=False,),
dbc.DropdownMenuItem("Transports",
href="https://www.facebook.com/profile.php?id=100070143871",
external_link=True,),
dbc.DropdownMenuItem("Technology",
href="https://www.facebook.com/profile.php?id=100070143871",
external_link=True,),
dbc.DropdownMenuItem("Telecom",
href="https://www.facebook.com/profile.php?id=1000701438491",
external_link=False,),
],
label="CResearch",
nav=True,),
dbc.DropdownMenu(
[dbc.DropdownMenuItem("Por",
href="apps/global_sales", active="exact"),
dbc.DropdownMenuItem("E",
href="apps/energy", active="exact"),
dbc.DropdownMenuItem("Fin",
href="apps/data", active="exact"),
dbc.DropdownMenuItem("HealthCare",
href="https://www.facebook.com/profile.php?id=100070143875491",
external_link=False,),
dbc.DropdownMenuItem("Consumer",
href="https://www.facebook.com/profile.php?id=100070143875491",
external_link=False,),
dbc.DropdownMenuItem("Materials",
href="https://www.facebook.com/profile.php?id=100070143875491",
external_link=False,),
dbc.DropdownMenuItem("Transports",
href="https://www.facebook.com/profile.php?id=100070143875491",
external_link=True,),
dbc.DropdownMenuItem("Technology",
href="https://www.facebook.com/profile.php?id=100070143875491",
external_link=True,),
dbc.DropdownMenuItem("Telecom",
href="https://www.facebook.com/profile.php?id=100070143875491",
external_link=False,),
],
label="E Research",
nav=True,),
dbc.DropdownMenu(
[dbc.DropdownMenuItem("Data Points",
href="apps/macro", active="exact"),
dbc.DropdownMenuItem("Liq",
href="apps/card", active="exact"),
dbc.DropdownMenuItem("Screener",
href="apps/esg", active="exact"),
dbc.DropdownMenuItem("Daily Notes",
href="https://www.facebook.com/profile.php?id=100070143875491",
external_link=False,),
dbc.DropdownMenuItem("T",
href="apps/economic", active="exact"),
dbc.DropdownMenuItem("China",
href="https://www.facebook.com/profile.php?id=100070143875491",
external_link=False,),
dbc.DropdownMenuItem("High Yeild",
href="https://www.facebook.com/profile.php?id=100070143875491",
external_link=True,),
],
label="Macro Research",
nav=True,),
dbc.DropdownMenu(
[dbc.DropdownMenuItem("Stories",
href="apps/nlp", active="exact"),
dbc.DropdownMenuItem("GUAGES",
href="apps/nlpdial", active="exact"),
dbc.DropdownMenuItem("Calendar",
href="https://www.facebook.com/profile.php?id=100070143875491",
external_link=False,),
],
label="NResearch",
nav=True,),
dbc.NavLink("Crypto Charts", href="apps/live",
active="exact", external_link=True),
dbc.NavLink("Stocks Charts", href="apps/alpaca",
active="exact", external_link=True),
dbc.NavLink("NEWS",
href="apps/news", active="exact"),
dbc.NavLink("Media Data",
href="apps/socialdata", active="exact"),
dbc.DropdownMenu(
[dbc.DropdownMenuItem("Twitter", "External relative",
href="https://twitter.com/bull",
external_link=True,),
dbc.DropdownMenuItem("Discord",
href="https://discord.gg/sGtNe",
external_link=True,),
dbc.DropdownMenuItem("Facebook",
href="https://www.facebook.com/profile.php?id=1000701438",
external_link=True,),
dbc.DropdownMenuItem("Facebook",
href="https://www.facebook.com/profile.php?id=100070143875",
external_link=True,),
dbc.DropdownMenuItem("Facebook",
href="https://www.facebook.com/profile.php?id=1000701438",
external_link=True,),
dbc.DropdownMenuItem("Facebook",
href="https://www.facebook.com/profile.php?id=10007014387",
external_link=True,),
dbc.DropdownMenuItem("Facebook",
href="https://www.facebook.com/profile.php?id=10007014391",
external_link=True,),
dbc.DropdownMenuItem("Facebook",
href="https://www.facebook.com/profile.php?id=10007014387",
external_link=True,),
],
label="Links",
nav=True,)
],
brand="BResearch & Analytics",
color="primary",
dark=True,
),
dbc.Container(id="page-content", className="pt-4"),
# dcc.Interval(id='update', n_intervals=0, interval=1000*5),
@ app.callback(Output(component_id='page-content', component_property='children'),
[Input(component_id='url', component_property='pathname')])
def display_page(pathname):
if pathname == '/apps/vgames':
return vgames.layout
if pathname == '/apps/global_sales':
return global_sales.layout
if pathname == '/apps/macro':
return macro.layout
if pathname == '/apps/card':
return card.layout
if pathname == '/apps/esg':
return esg.layout
if pathname == '/apps/nlp':
return nlp.layout
if pathname == '/apps/home':
return home.layout
if pathname == '/apps/live':
return live.layout
if pathname == '/apps/alpaca':
return alpaca.layout
if pathname == '/apps/nlpdial':
return nlpdial.layout
if pathname == '/apps/economic':
return economic.layout
if pathname == '/apps/news':
return news.layout
if pathname == '/apps/socialdata':
return socialdata.layout
if pathname == '/apps/energy':
return energy.layout
if pathname == '/apps/data':
return data.layout
else:
return home.layout
if __name__ == '__main__':
app.run_server(debug=True)
and this is the file with the charts/graphs that open in 20 different url’s… global_sales.py
from plotly.offline.offline import iplot
import plotly.graph_objects as go
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.express as px
import pandas as pd
import pathlib
from app import app
import dash_bootstrap_components as dbc
import plotly.io as pio
list(pio.templates)
# get relative data folder
PATH = pathlib.Path(__file__).parent
DATA_PATH = PATH.joinpath("../datasets").resolve()
dfg = pd.read_csv(DATA_PATH.joinpath("chart2.csv"))
merged_portfolio_sp_latest_YTD_sp_closing_high = dfg
df1 = pd.read_csv(DATA_PATH.joinpath("chart1.csv"))
merged_portfolio_sp_latest_YTD_sp = df1
CHART_THEME = 'plotly_dark'
trace1 = go.Bar(
x=merged_portfolio_sp_latest_YTD_sp['Ticker'][0:10],
y=merged_portfolio_sp_latest_YTD_sp['Share YTD'][0:10],
name='Ticker YTD')
trace2 = go.Scatter(
x=merged_portfolio_sp_latest_YTD_sp['Ticker'][0:10],
y=merged_portfolio_sp_latest_YTD_sp['SP 500 YTD'][0:10],
name='SP500 YTD')
data = [trace1, trace2]
layout = go.Layout(title='YTD Return vs S&P 500 YTD', barmode='group', yaxis=dict(title='Returns', tickformat=".2%"), xaxis=dict(title='Ticker'), legend=dict(x=.8, y=1)
)
fig = go.Figure(data=data, layout=layout)
fig.layout.template = CHART_THEME
iplot(fig)
CHART_THEME = 'plotly_dark'
trace1 = go.Bar(
x=merged_portfolio_sp_latest_YTD_sp_closing_high['Ticker'][0:10],
y=merged_portfolio_sp_latest_YTD_sp_closing_high['Pct off High'][0:10],
name='Pct off High')
data = [trace1]
layout = go.Layout(title='Adj Close % off of High', barmode='group', yaxis=dict(title='% Below Adj Close High', tickformat=".2%"), xaxis=dict(title='Ticker'), legend=dict(x=.8, y=1)
)
fig1 = go.Figure(data=data, layout=layout)
fig1.layout.template = CHART_THEME
iplot(fig1)
CHART_THEME = 'plotly_dark'
trace1 = go.Bar(
x=merged_portfolio_sp_latest_YTD_sp_closing_high['Ticker'][0:10],
y=merged_portfolio_sp_latest_YTD_sp_closing_high['ticker return'][0:10],
name='Ticker Total Return')
trace2 = go.Scatter(
x=merged_portfolio_sp_latest_YTD_sp_closing_high['Ticker'][0:10],
y=merged_portfolio_sp_latest_YTD_sp_closing_high['SP Return'][0:10],
name='SP500 Total Return')
data = [trace1, trace2]
layout = go.Layout(title='Total Return vs S&P 500', barmode='group', yaxis=dict(title='Returns', tickformat=".2%"), xaxis=dict(title='Ticker', tickformat=".2%"), legend=dict(x=.8, y=1)
)
fig2 = go.Figure(data=data, layout=layout)
fig2.layout.template = CHART_THEME
iplot(fig2)
CHART_THEME = 'plotly_dark'
trace1 = go.Bar(
x=merged_portfolio_sp_latest_YTD_sp_closing_high['Ticker'][0:10],
y=merged_portfolio_sp_latest_YTD_sp_closing_high['Stock Gain / (Loss)'][0:10],
name='Ticker Total Return ($)')
trace2 = go.Bar(
x=merged_portfolio_sp_latest_YTD_sp_closing_high['Ticker'][0:10],
y=merged_portfolio_sp_latest_YTD_sp_closing_high['SP 500 Gain / (Loss)'][0:10],
name='SP 500 Total Return ($)')
trace3 = go.Scatter(
x=merged_portfolio_sp_latest_YTD_sp_closing_high['Ticker'][0:10],
y=merged_portfolio_sp_latest_YTD_sp_closing_high['ticker return'][0:10],
name='Ticker Total Return %',
yaxis='y2')
data = [trace1, trace2, trace3]
layout = go.Layout(title='Gain / (Loss) Total Return vs S&P 500', barmode='group', yaxis=dict(title='Gain / (Loss) ($)'), yaxis2=dict(title='Ticker Return', overlaying='y', side='right', tickformat=".2%"), xaxis=dict(title='Ticker'), legend=dict(x=.75, y=1)
)
fig3 = go.Figure(data=data, layout=layout)
fig3.layout.template = CHART_THEME
iplot(fig3)
CHART_THEME = 'plotly_dark'
trace1 = go.Bar(
x=merged_portfolio_sp_latest_YTD_sp_closing_high['Ticker'],
y=merged_portfolio_sp_latest_YTD_sp_closing_high['Cum Invst'],
# mode = 'lines+markers',
name='Cum Invst')
trace2 = go.Bar(
x=merged_portfolio_sp_latest_YTD_sp_closing_high['Ticker'],
y=merged_portfolio_sp_latest_YTD_sp_closing_high['Cum SP Returns'],
# mode = 'lines+markers',
name='Cum SP500 Returns')
trace3 = go.Bar(
x=merged_portfolio_sp_latest_YTD_sp_closing_high['Ticker'],
y=merged_portfolio_sp_latest_YTD_sp_closing_high['Cum Ticker Returns'],
# mode = 'lines+markers',
name='Cum Ticker Returns')
trace4 = go.Scatter(
x=merged_portfolio_sp_latest_YTD_sp_closing_high['Ticker'],
y=merged_portfolio_sp_latest_YTD_sp_closing_high['Cum Ticker ROI Mult'],
# mode = 'lines+markers',
name='Cum ROI Mult', yaxis='y2')
data = [trace1, trace2, trace3, trace4]
layout = go.Layout(title='Total Cumulative Investments Over Time', barmode='group', yaxis=dict(title='Returns'), xaxis=dict(title='Ticker'), legend=dict(x=.4, y=1), yaxis2=dict(title='Cum ROI Mult', overlaying='y', side='right')
)
CHART_THEME = 'plotly_dark'
fig4 = go.Figure(data=data, layout=layout)
fig4.layout.template = CHART_THEME
iplot(fig4)
layout = html.Div([
html.H1('Equities ', style={"textAlign": "center"}),
html.Div([
dbc.Row(
[
dbc.Col(dcc.Graph(
id='example-graph-2',
figure=fig,
)),
], className='mb-5'),
dbc.Row(
[
dbc.Col(dcc.Graph(
id='example-graph-2',
figure=fig1,
)),
], className='mb-5'),
dbc.Row(
[
dbc.Col(dcc.Graph(
id='example-graph-2',
figure=fig2,
)),
], className='mb-5'),
dbc.Row(
[
dbc.Col(dcc.Graph(
id='example-graph-2',
figure=fig3,
)),
], className='mb-5'),
dbc.Row(
[
dbc.Col(dcc.Graph(
id='example-graph-2',
figure=fig4,
)),
]),
])
])
this is the other file with these kind of charts energy.py (the chart code is the same ) , there is just a table on top of the charts on the page.
from plotly.offline.offline import iplot
import plotly.graph_objects as go
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.express as px
import pandas as pd
import pathlib
from app import app
import dash_bootstrap_components as dbc
import dash_table
import plotly.io as pio
import dash
from dash.dependencies import Input, Output, State
import base64
import datetime
import io
import seaborn as sns
# imported w/import files.upload()
#from plotly import files
list(pio.templates)
# get relative data folder
PATH = pathlib.Path(__file__).parent
DATA_PATH = PATH.joinpath("../datasets").resolve()
dfg = pd.read_csv(DATA_PATH.joinpath("chart2.csv"))
merged_portfolio_sp_latest_YTD_sp_closing_high = dfg
df1 = pd.read_csv(DATA_PATH.joinpath("chart1.csv"))
merged_portfolio_sp_latest_YTD_sp = df1
mkt_returns = pd.read_csv(DATA_PATH.joinpath("market_returns.csv"))
sector_correlations = mkt_returns.corr()
corralations = round(sector_correlations, 2)
CHART_THEME = 'plotly_dark'
trace1 = go.Bar(
x=merged_portfolio_sp_latest_YTD_sp['Ticker'][0:10],
y=merged_portfolio_sp_latest_YTD_sp['Share YTD'][0:10],
name='Ticker YTD')
trace2 = go.Scatter(
x=merged_portfolio_sp_latest_YTD_sp['Ticker'][0:10],
y=merged_portfolio_sp_latest_YTD_sp['SP 500 YTD'][0:10],
name='SP500 YTD')
data = [trace1, trace2]
layout = go.Layout(title='YTD Return vs S&P 500 YTD', barmode='group', yaxis=dict(title='Returns', tickformat=".2%"), xaxis=dict(title='Ticker'), legend=dict(x=.8, y=1)
)
fig = go.Figure(data=data, layout=layout)
fig.layout.template = CHART_THEME
iplot(fig)
CHART_THEME = 'plotly_dark'
trace1 = go.Bar(
x=merged_portfolio_sp_latest_YTD_sp_closing_high['Ticker'][0:10],
y=merged_portfolio_sp_latest_YTD_sp_closing_high['Pct off High'][0:10],
name='Pct off High')
data = [trace1]
layout = go.Layout(title='Adj Close % off of High', barmode='group', yaxis=dict(title='% Below Adj Close High', tickformat=".2%"), xaxis=dict(title='Ticker'), legend=dict(x=.8, y=1)
)
fig1 = go.Figure(data=data, layout=layout)
fig1.layout.template = CHART_THEME
iplot(fig1)
CHART_THEME = 'plotly_dark'
trace1 = go.Bar(
x=merged_portfolio_sp_latest_YTD_sp_closing_high['Ticker'][0:10],
y=merged_portfolio_sp_latest_YTD_sp_closing_high['ticker return'][0:10],
name='Ticker Total Return')
trace2 = go.Scatter(
x=merged_portfolio_sp_latest_YTD_sp_closing_high['Ticker'][0:10],
y=merged_portfolio_sp_latest_YTD_sp_closing_high['SP Return'][0:10],
name='SP500 Total Return')
data = [trace1, trace2]
layout = go.Layout(title='Total Return vs S&P 500', barmode='group', yaxis=dict(title='Returns', tickformat=".2%"), xaxis=dict(title='Ticker', tickformat=".2%"), legend=dict(x=.8, y=1)
)
fig2 = go.Figure(data=data, layout=layout)
fig2.layout.template = CHART_THEME
iplot(fig2)
CHART_THEME = 'plotly_dark'
trace1 = go.Bar(
x=merged_portfolio_sp_latest_YTD_sp_closing_high['Ticker'][0:10],
y=merged_portfolio_sp_latest_YTD_sp_closing_high['Stock Gain / (Loss)'][0:10],
name='Ticker Total Return ($)')
trace2 = go.Bar(
x=merged_portfolio_sp_latest_YTD_sp_closing_high['Ticker'][0:10],
y=merged_portfolio_sp_latest_YTD_sp_closing_high['SP 500 Gain / (Loss)'][0:10],
name='SP 500 Total Return ($)')
trace3 = go.Scatter(
x=merged_portfolio_sp_latest_YTD_sp_closing_high['Ticker'][0:10],
y=merged_portfolio_sp_latest_YTD_sp_closing_high['ticker return'][0:10],
name='Ticker Total Return %',
yaxis='y2')
data = [trace1, trace2, trace3]
layout = go.Layout(title='Gain / (Loss) Total Return vs S&P 500', barmode='group', yaxis=dict(title='Gain / (Loss) ($)'), yaxis2=dict(title='Ticker Return', overlaying='y', side='right', tickformat=".2%"), xaxis=dict(title='Ticker'), legend=dict(x=.75, y=1)
)
fig3 = go.Figure(data=data, layout=layout)
fig3.layout.template = CHART_THEME
iplot(fig3)
CHART_THEME = 'plotly_dark'
trace1 = go.Bar(
x=merged_portfolio_sp_latest_YTD_sp_closing_high['Ticker'],
y=merged_portfolio_sp_latest_YTD_sp_closing_high['Cum Invst'],
# mode = 'lines+markers',
name='Cum Invst')
trace2 = go.Bar(
x=merged_portfolio_sp_latest_YTD_sp_closing_high['Ticker'],
y=merged_portfolio_sp_latest_YTD_sp_closing_high['Cum SP Returns'],
# mode = 'lines+markers',
name='Cum SP500 Returns')
trace3 = go.Bar(
x=merged_portfolio_sp_latest_YTD_sp_closing_high['Ticker'],
y=merged_portfolio_sp_latest_YTD_sp_closing_high['Cum Ticker Returns'],
# mode = 'lines+markers',
name='Cum Ticker Returns')
trace4 = go.Scatter(
x=merged_portfolio_sp_latest_YTD_sp_closing_high['Ticker'],
y=merged_portfolio_sp_latest_YTD_sp_closing_high['Cum Ticker ROI Mult'],
# mode = 'lines+markers',
name='Cum ROI Mult', yaxis='y2')
data = [trace1, trace2, trace3, trace4]
layout = go.Layout(title='Total Cumulative Investments Over Time', barmode='group', yaxis=dict(title='Returns'), xaxis=dict(title='Ticker'), legend=dict(x=.4, y=1), yaxis2=dict(title='Cum ROI Mult', overlaying='y', side='right')
)
CHART_THEME = 'plotly_dark'
fig4 = go.Figure(data=data, layout=layout)
fig4.layout.template = CHART_THEME
iplot(fig4)
layout = html.Div([
html.H1('Port Tracker', style={"textAlign": "center"}),
dcc.Upload(
id='upload-data',
children=html.Div([
'Drag and Drop or ',
html.A('Select Files')
]),
style={
'width': '100%',
'height': '60px',
'lineHeight': '60px',
'borderWidth': '1px',
'borderStyle': 'dashed',
'borderRadius': '5px',
'textAlign': 'center',
'margin': '10px'
},
# Allow multiple files to be uploaded
multiple=True
),
html.Div(id='output-data-upload'),
html.H1('Correlations', style={"textAlign": "center"}),
dbc.Table.from_dataframe(corralations, striped=True,
bordered=True, dark=True, hover=True),
html.Div([
dbc.Row(
[
dbc.Col(dcc.Graph(
id='example-graph-2',
figure=fig,
)),
], className='mb-5'),
dbc.Row(
[
dbc.Col(dcc.Graph(
id='example-graph-2',
figure=fig1,
)),
], className='mb-5'),
dbc.Row(
[
dbc.Col(dcc.Graph(
id='example-graph-2',
figure=fig2,
)),
], className='mb-5'),
dbc.Row(
[
dbc.Col(dcc.Graph(
id='example-graph-2',
figure=fig3,
)),
], className='mb-5'),
dbc.Row(
[
dbc.Col(dcc.Graph(
id='example-graph-2',
figure=fig4,
)),
], className='mb-5'),
])
])
def parse_contents(contents, filename, date):
content_type, content_string = contents.split(',')
decoded = base64.b64decode(content_string)
try:
if 'csv' in filename:
# Assume that the user uploaded a CSV file
df = pd.read_csv(
io.StringIO(decoded.decode('utf-8')))
elif 'xls' in filename:
# Assume that the user uploaded an excel file
df = pd.read_excel(io.BytesIO(decoded))
except Exception as e:
print(e)
return html.Div([
'There was an error processing this file.'
])
return html.Div([
html.H5(filename),
html.H6(datetime.datetime.fromtimestamp(date)),
dash_table.DataTable(
data=df.to_dict('records'),
columns=[{'name': i, 'id': i} for i in df.columns]
),
html.Hr(), # horizontal line
# For debugging, display the raw contents provided by the web browser
html.Div('Raw Content'),
html.Pre(contents[0:200] + '...', style={
'whiteSpace': 'pre-wrap',
'wordBreak': 'break-all'
})
])
@app.callback(Output('output-data-upload', 'children'),
Input('upload-data', 'contents'),
State('upload-data', 'filename'),
State('upload-data', 'last_modified'))
def update_output(list_of_contents, list_of_names, list_of_dates):
if list_of_contents is not None:
children = [
parse_contents(c, n, d) for c, n, d in
zip(list_of_contents, list_of_names, list_of_dates)]
return children
Any help would be appreciated!
1 post - 1 participant