I am tying to display pandas styled dataframe table. It do display exactly as I want, but it disappear immediately by auto page refreshing and then page goes back to original empty page.
Here is what I do:
- convert panda's style dataframe into html file and save under asset folder
def create_regime_subindustries_df_heatmap_html(regime_df,regime_cols):
groupby_cols = ['score'] + regime_cols
sort_key = ['GICS Sector','GICS Sub-Industry']
regime_df_styled=regime_df.groupby(sort_key)[groupby_cols].mean().sort_values(
by= ['GICS Sector','score']).style.background_gradient(
subset= groupby_cols,cmap= 'RdYlGn').format('{:.1g}')
regime_df_subindustries_styled_html=regime_df_styled.to_html()
html_filename_regime_subindustries_sorted_sector_styled='assets/subindustries_sorted_sector_styled.html'
html_file=open(html_filename_regime_subindustries_sorted_sector_styled,'w')
html_file.write(regime_df_subindustries_styled_html)
return html_filename_regime_subindustries_sorted_sector_styled
- define a tab to hold html.Div() where html will be loaded
def create_right_tt_sector_subindustries_tab(graph_kwargs):
tt_subindustries_sorted_sector_html_div=html.Div(id='tt-subindustries-sorted-sector-plot-html-div')
tt_subindustries_sorted_sector_html_div_loading=dcc.Loading(
id='loading-tt-subindustries-sorted-sector-plot-html-div',
type='default',
children=tt_subindustries_sorted_sector_html_div # wrap contour in loading's children
)
markdown_text='Turtle Trader Sector'
tt_sector_subindustries_markdown = dcc.Markdown(id="tt-sector-subindustries-markdown",children=markdown_text)
tt_sector_subindustries_graph_tab = create_tab_right_2items([
# tt_sector_subindustries_graph_loading,
tt_subindustries_sorted_sector_html_div_loading,
tt_sector_subindustries_markdown],
"Sub-Indusctries", "sub-indusctries")
return tt_sector_subindustries_graph_tab
- in callback, read html filename and wrapp it using html.Iframe(src=filelocation) as output
@app.callback(
[
Output("tt-subindustries-sorted-sector-plot-html-div", "children"),
Output("tt-sector-subindustries-markdown", "children"),
],
[
Input('plot-tt-sector-score','n_clicks')
],
prevent_initial_call=True, # disable output in the first load
)
def change_turtle_trader_plot(n_clicks):
html_filename_regime_subindustries_sorted_sector_styled=create_regime_subindustries_df_heatmap_html(regime_df,regime_cols)
fig_subindustries_sorted_sector_heatmap_html_frame=html.Iframe(src=html_filename_regime_subindustries_sorted_sector_styled,
style={"height": "1067px", "width": "100%"})
tt_subindustries_markdown='Subindustries Heatmap Turtle Trader'
return (fig_subindustries_sorted_sector_heatmap_html_frame,tt_subindustries_markdown)
The table display exactly what I wanted at the begining, however, the page is automatically refreshing itself and the html disappear then page become empty. After displaying, I can see page showes updating? why page is refreshing itself? something to do with html file loading? I have no experience in html loading before.
please help! Thank you so much.
Here is original styled pandas dataframe which I want to show in dashboard.
I am
