Hello,
using the example of the well-known Bootstrap theme.
But I can’t find out how do I add a download-button to recieve the results of the three selections.
Maybe a we have to use State with derived_virtual_data, but I had no success trying around…
Many thanks for any help in advance!
Source: (https://hellodash.pythonanywhere.com/)
""" ****** Important! ******* If you run this app locally, un-comment line 113 to add the ThemeChangerAIO component to the layout """ from dash import Dash, dcc, html, dash_table, Input, Output, callback import plotly.express as px import dash_bootstrap_components as dbc from dash_bootstrap_templates import ThemeChangerAIO, template_from_url df = px.data.gapminder() years = df.year.unique() continents = df.continent.unique() # stylesheet with the .dbc class dbc_css = "https://cdn.jsdelivr.net/gh/AnnMarieW/dash-bootstrap-templates/dbc.min.css" app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP, dbc_css]) header = html.H4( "Theme Explorer Sample App", className="bg-primary text-white p-2 mb-2 text-center" ) table = html.Div( dash_table.DataTable( id="table", columns=[{"name": i, "id": i, "deletable": True} for i in df.columns], data=df.to_dict("records"), page_size=10, editable=True, cell_selectable=True, filter_action="native", sort_action="native", style_table={"overflowX": "auto"}, row_selectable="multi", ), className="dbc-row-selectable", ) dropdown = html.Div( [ dbc.Label("Select indicator (y-axis)"), dcc.Dropdown( ["gdpPercap", "lifeExp", "pop"], "pop", id="indicator", clearable=False, ), ], className="mb-4", ) checklist = html.Div( [ dbc.Label("Select Continents"), dbc.Checklist( id="continents", options=[{"label": i, "value": i} for i in continents], value=continents, inline=True, ), ], className="mb-4", ) slider = html.Div( [ dbc.Label("Select Years"), dcc.RangeSlider( years[0], years[-1], 5, id="years", marks=None, tooltip={"placement": "bottom", "always_visible": True}, value=[years[2], years[-2]], className="p-0", ), ], className="mb-4", ) theme_colors = [ "primary", "secondary", "success", "warning", "danger", "info", "light", "dark", "link", ] colors = html.Div( [dbc.Button(f"{color}", color=f"{color}", size="sm") for color in theme_colors] ) colors = html.Div(["Theme Colors:", colors], className="mt-2") controls = dbc.Card( [dropdown, checklist, slider], body=True, ) tab1 = dbc.Tab([dcc.Graph(id="line-chart")], label="Line Chart") tab2 = dbc.Tab([dcc.Graph(id="scatter-chart")], label="Scatter Chart") tab3 = dbc.Tab([table], label="Table", className="p-4") tabs = dbc.Card(dbc.Tabs([tab1, tab2, tab3])) app.layout = dbc.Container( [ header, dbc.Row( [ dbc.Col( [ controls, # !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! # When running this app locally, un-comment this line: # ThemeChangerAIO(aio_id="theme") ], width=4, ), dbc.Col([tabs, colors], width=8), ] ), ], fluid=True, className="dbc", ) @callback( Output("line-chart", "figure"), Output("scatter-chart", "figure"), Output("table", "data"), Input("indicator", "value"), Input("continents", "value"), Input("years", "value"), Input(ThemeChangerAIO.ids.radio("theme"), "value"), ) def update_line_chart(indicator, continent, yrs, theme): if continent == [] or indicator is None: return {}, {}, [] dff = df[df.year.between(yrs[0], yrs[1])] dff = dff[dff.continent.isin(continent)] data = dff.to_dict("records") fig = px.line( dff, x="year", y=indicator, color="continent", line_group="country", template=template_from_url(theme), ) fig_scatter = px.scatter( df.query(f"year=={yrs[1]} & continent=={continent}"), x="gdpPercap", y="lifeExp", size="pop", color="continent", log_x=True, size_max=60, template=template_from_url(theme), title="Gapminder %s: %s theme" % (yrs[1], template_from_url(theme)), ) return fig, fig_scatter, data if __name__ == "__main__": app.run_server(debug=True)