myapp_4_interactive.py

# 4.1 switch between pages. Each callback is connected to the function below
@app.callback(Output("page-content", "children"), # returns the page content of the clicked page
              [Input("url", "pathname")]) # get the pathname from the url click as input
def render_page_content(pathname): # function input the the Input() parameter from the callback decorator
    if pathname == "/":
        return page1_content
    elif pathname == "/page2_url":
        return page2_content
    # If the user tries to reach a different page, return an error message
    return html.Div(
        [
            html.H1("Page not found", className="text-danger"),
            html.Hr(),
            html.P(f"The pathname {pathname} was not recognised..."),
        ],
        className="p-3 bg-light rounded-3",
    )

# 4.2 change image when switching to page2
@app.callback(Output(component_id="add_imgx", component_property="src"),            
              [Input("url", "pathname")])
def change_werbung(pathname): # function input the the Input() parameter from the callback decorator
    if pathname == "/page2_url":
        add = random.choice(["RR1", "RR2", "RR3"]) # return a random image from these three options
        return f"assets/{add}.jpg"
    else:
        return None

# 4.3 word trends page
@app.callback(
    # the function below must also have 4 outputs
    [Output("total_count_chart", "figure"), # updates top graph
     Output("month_count_chart", "figure"), # updates month/middle graph
     Output("year_count_chart", "figure"), # updates year/bottom graph
     Output(component_id='total_word_count', component_property="children")
     # last output updates the number counting the hits
     ],
    [
        Input("word-filter", "value"), # input is the selected word from the dropdown
    ],
)
def update_charts(the_word):# function input the the Input() parameter from the callback decorator
    
    # graph 1 on page 1
    # filter df by selected word
    wc_date_filtered_df = wc_date_df.loc[wc_date_df["word"]==the_word]
    total_word_count = wc_date_filtered_df["word_cnt_page"].sum()

    # create a plotly figure using plotly express (higher level plotly api)
    wc_date_figure = px.line(x=wc_date_filtered_df["date"], 
                             y=wc_date_filtered_df["word_cnt_page"],
                             title="Wordcount / Magazine",
                             markers=True,
                             template="plotly_white", #https://plotly.com/python/templates/
                             )
    # change hoverformats, colors, layout...
    wc_date_figure.update_xaxes(title=None, hoverformat="%Y-%m-%d")
    wc_date_figure.update_yaxes(title=None)
    wc_date_figure.update_traces(line_color='#a12232',
                                 line_width=2,
                                 hovertemplate="%{y}", #"(%{x|%Y-%m-%d})", #https://github.com/d3/d3-3.x-api-reference/blob/master/Time-Formatting.md#format
                                 )
    wc_date_figure.update_layout(hovermode="x", 
                                 hoverlabel={'bgcolor':"white"},
                                 margin=dict(l=40, r=20, t=80, b=50), # graph size within "card"
                                 )
    
    # SECOND / THIRD GRAPH IN ALTERNATE DICT WAY TO CREATE -> LESS FLEXIBLE (COULDNT GET HOVERLABELS TO WORK WITH THIS)
    # graph 2 on page 1
    wc_month_filtered_df = wc_month_df.loc[wc_month_df["word"]==the_word]
    wc_month_figure = {
        "data": [
            {
                "x": wc_month_filtered_df["month"],
                "y": wc_month_filtered_df["avg. occurences per magazine"],
                "type": "lines",
            },
        ],
        "layout": {
            "title": {
                "text": "Ø Words per Magazine per Month",
                "x": 0.05,
                "xanchor": "left",
            },
            "colorway": ["#a12232"],
            "margin":dict(l=40, r=20, t=80, b=50)
        },
    }
    
    # graph 3 on page 1
    wc_year_filtered_df = wc_year_df.loc[wc_year_df["word"]==the_word]
    wc_year_figure = {
        "data": [
            {
                "x": wc_year_filtered_df["year"],
                "y": wc_year_filtered_df["avg. occurences per magazine"],
                "type": "lines",
            },
        ],
        "layout": {
            "title": {
                "text": "Ø Words per Magazine per Year",
                "x": 0.05,
                "xanchor": "left",
            },
            "colorway": ['#a12232'],
            "margin":dict(l=40, r=20, t=80, b=50)
        },
    }
    return wc_date_figure, wc_month_figure, wc_year_figure, f'{total_word_count} Hits'