dash-app-bootstrap-side-navbar和dropdowns-need-help-displayingdropdowns-only当某个页面处于活动状态时才显示下拉列表

c2e8gylq  于 2021-07-13  发布在  Java
关注(0)|答案(0)|浏览(186)

数据框的数据可以在这里找到:https://drive.google.com/file/d/19xeipiggi9ti51_gfjurcb9gkv4nr0db/viewi 希望我的下拉列表仅在打开href=“/”时显示,而不是在选择/page-1或任何其他页面时显示。
这就是我想要显示下拉列表的地方
我不想在这里显示下拉列表

import dash
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import plotly.express as px
from dash.dependencies import Input, Output

df = pd.read_csv("intro_bees.csv")
df = df.groupby(['State', 'ANSI', 'Affected by', 'Year', 'state_code'])[['Pct of Colonies Impacted']].mean()
df.reset_index(inplace=True)
colorScales = px.colors.named_colorscales()

years = [{'label': str(y), 'value': y} for y in df.Year.unique()]
affected_by = [{'label': c, 'value': c} for c in df["Affected by"].unique()]

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
SIDEBAR_STYLE = {
    "position": "fixed",
    "top": 0,
    "left": 0,
    "bottom": 0,
    "width": "16rem",
    "padding": "2rem 1rem",
    "background-color": "#f8f9fa",
}

CONTENT_STYLE = {
    "margin-left": "18rem",
    "margin-right": "2rem",
    "padding": "2rem 1rem",
}

sidebar = html.Div(
    [
        html.H2("Eddies Project", className="display-4"),
        html.Hr(),
        html.P(
            "Choose a Project", className="lead"
        ),
        dbc.Nav(
            [
                # I want dropdowns to only be displayed only when href="/" is true
                dbc.NavLink("Bee's Project", href="/", active="exact"),
                dbc.NavLink("Page 1", href="/page-1", active="exact"),
                dbc.NavLink("Page 2", href="/page-2", active="exact"),
            ],
            vertical=True,
            pills=True,
        ),
    ],
    style=SIDEBAR_STYLE,
)

# These are the dropdowns I'm talking about

dropdowns = html.Div([dcc.Dropdown(id="select_year",
                                   options=years,
                                   multi=False,
                                   value=2015,
                                   style={'width': "33.3%", "display": "inline-block", 'text-align': 'center'}
                                   ),
                      dcc.Dropdown(id="select_cause",
                                   options=affected_by,
                                   multi=False,
                                   value="Disease",
                                   style={'width': "33.3%", "display": "inline-block", 'text-align': 'center'}
                                   ),
                      dcc.Dropdown(id='colorScale',
                                   options=[{"value": x, "label": x} for x in colorScales],
                                   multi=False,
                                   value='ylgn',
                                   style={'width': "33.3%", "display": "inline-block", 'text-align': 'center'}
                                   ),

                      ], style=CONTENT_STYLE)

# I'm completely aware that by putting them in this app.layout they will be displayed on every page I just dont know a way around this please help.

content = html.Div(id="page-content", children=[], style=CONTENT_STYLE)
app.layout = html.Div([
    dcc.Location(id="url"),
    sidebar,
    dropdowns,
    content
])

@app.callback(
    Output("page-content", "children"),
    [Input("url", "pathname"),
     Input(component_id="select_year", component_property="value"),
     Input(component_id="select_cause", component_property="value"),
     Input(component_id="colorScale", component_property="value")
     ]
)
def render_page_content(pathname, year_selected, cause_selected, color_scale):
    df_copy = df.copy()
    df_copy = df_copy[df_copy["Year"] == year_selected]
    df_copy = df_copy[df_copy["Affected by"] == cause_selected]

    if pathname == "/":
        return [
            dcc.Graph(id='bargraph',
                      figure=px.choropleth(
                          data_frame=df_copy,
                          locationmode="USA-states",
                          locations="state_code",
                          scope="usa",
                          color="Pct of Colonies Impacted",
                          hover_data=["State", "Pct of Colonies Impacted"],
                          labels={"Pct of Colonies Impacted": "% affected"},
                          template="plotly_dark",
                          color_continuous_scale=color_scale,
                          title=f"Bee Colonies affected by {cause_selected} in the year {year_selected}"
                      ))
        ]
    elif pathname == "/page-1":
        return [
            html.H1('Grad School in Iran',
                    style={'textAlign': 'center'})
        ]
    elif pathname == "/page-2":
        return [
            html.H1('High School in Iran',
                    style={'textAlign': 'center'})]
    return dbc.Jumbotron(
        [
            html.H1("404: Not found", className="text-danger"),
            html.Hr(),
            html.P(f"The pathname {pathname} was not recognised..."),
        ]
    )

if __name__ == '__main__':
    app.run_server(port=4050, debug=True)

暂无答案!

目前还没有任何答案,快来回答吧!

相关问题