myapp_3_layout.py

# 3.1 PAGE 1

# store ALL of the following html in a variable page1_content. This is called when switching pages
# wrap everything in an out Div
page1_content = html.Div(
    children=[
        
        #header, this is a child of the outer div. All header information is then 
        # wrapped in its own Div
        html.Div(
            children=[
                html.P(
                    children="🥦", className="header-emoji",
                        ),
                # if children are set to only text, this text will be displayed
                html.H1(children="Word Analytics", className="header-title", 
                        ),
                html.P(children="A super sophisticated dashboard example",
                       className="header-description",
                       ),
                ],
            className="header", # optional css style defined in the style.css in /assets
            style={"background-color": "#b11226"} # css style that overwrites className arguments
            ),
        
        # add some space between header and content
        html.Div(children="\n  ", 
                 style ={'min-height':"5px"}), # if no min-height is specified, empty strings don't work
        
        # menu
        html.Div(   
            children=[               
            html.Div(    
                children=[                    
                    html.Div(children="Choose Word", 
                             style = {'display': 'inline-block', 'margin': '5px 5px 5px 5px', 'font-size':'20px'}),#className="menu-title"),   
                    
                    # this adds a little [?] box that only displays some text on hover
                    html.Div(title=("This is just a simple and easy way to add some explanations" 
                                    "Will show exactly this message when hovering over the [?] with your mouse"),
                             children="[?]",
                             style = {'display': 'inline-block', 'border-bottom': '1px dotted black'}),
                    
                    # the actual dropdown menu to select a word to display graphs for
                    dcc.Dropdown(    
                        id="word-filter",    #id of this graph element. e.g. works as a reference for callbacks
                        options=[    # all values in the dropdown menu
                            {"label": word, "value": word}    
                            for word in words    
                            ],    
                        value="sunken", #  default value
                        clearable=True,    
                        className="dropdown",  
                        style = {'width':'98%','display': 'inline-block', 'margin': '0 5px auto'}
                    ),
                    
                ]    
            ), # these brackets and what they belong to can get confusing fast
            ], # probably nest them clearer than I did!
            style={"display": 'inline-block', 'width':'49%'},
            className="card",
            ),
        
        # display number of found words
        html.Div(id='total_word_count', 
                 style = {'width':'24%', 'display': 'inline-block'}), 
        
        # main/top graph
        html.Div(   # wrap the graph in its own div
            children=[  
                html.Div(
                    children=dcc.Graph(
                        id="total_count_chart", # give it its own recognizable id
                        config={"displayModeBar": False},
                        style={"height":"29vh"} # height of the graph element, means 29% of viewport
                        ),
                    className="card", # css style defined in style.css in /assets
                    ),                
                ]
            ),
        
        # month/middle graph
        html.Div(   # wrap the graph in its own div
            children=[  
                html.Div(
                    children=dcc.Graph(
                        id="month_count_chart", # give it its own recognizable id
                        config={"displayModeBar": False},
                        style={"height":"22vh"} # height of the graph element, means 22% of viewport
                        ),
                    className="card", # css style defined in style.css in /assets
                    ),                
                ]
            ),
        
        # year/bottom graph
        html.Div(   # wrap the graph in its own div
            children=[  
                html.Div(
                    children=dcc.Graph(
                        id="year_count_chart", # give it its own recognizable id
                        config={"displayModeBar": False},
                        style={"height":"22vh"} # height of the graph element, means 22% of viewport
                        ),
                    className="card", # css style defined in style.css in /assets
                    ),
                
                ]
            ),                
    ],    
)


# -----------------------------------------------------------------------------
# 3.2 Page2 content
page2_content = html.Div(children=[
    
    html.Img(id="add_imgx",
             src="assets/RR1.jpg",
             className="center",
             
             # styling large images can be tricky when watched on diffrent screen sizes
             # use this to have a fixes height and resize images width depending on 
             # screen/window size
             style={'display':'block','height':'90vh', 'width':'auto', 
                    'max-width': '100%', 'max-height': '100%', 
                    "object-fit": "cover"}
             ),        
    
    html.P(
        children="👍", # as you saw above, you can use emojis as text as well
        className="header-emoji",
            )    
    ])

# -----------------------------------------------------------------------------
# 3.3 bring it all together. Tell the app how to display all the elements
# content or pages on the right side will be changed when clicking on the sidebar links
# while the sidebar itself stays as it is

# the styles for the main content position it to the right of the sidebar and
# add some padding.
CONTENT_STYLE = {
    "margin-left": "18rem",
    "margin-right": "2rem",
    "padding": "2rem 1rem",
}

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