Hello,
I am having trouble adding a map or even a simple "hello" to my application tab. I am using python3 Dash and have all the necessary libraries loaded - no error messages, just having trouble trying to figure out how to put information onto each tab. Below I have copied and pasted my app.py code and my example Tab_1.py. How do I do this so that it works? Would appreciate any help - I'm sure it's something super easy, but I can't see it. Please see below for the code ~QuirkyDataScientist1
app.py file here
# Import Dash Libraries
# _*_ coding: utf-8 _*_
import plotly.graph_objects as go # or plotly.express as px
import plotly.express as px
import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output
import datetime
import time
import dateutil
import pandas as pd
from components import Tab_1
from components import Tab_2
#from flask_caching import Cache
# External JavaScript Files Placeholder
# external_scripts = []
# External CSS stylesheets
#external_stylesheets = []
#start = datetime.datetime.today() - relativedelta(years=20)
#end = datetime.datetime.today()
# Placeholder for importing dictionaries for country lists, etc.
# Read in .csv file(s)
#data_file = 'globalterrorismdb_0919dist8.csv'
#df = pd.read_csv('./input_data/' + data_file)
# Select Data
#df[['iyear', 'imonth', 'iday']]= df[['iyear', 'imonth', 'iday']].apply(pd.to_datetime, format= '%Y-%m-%d')
#df = (df[['eventid', 'related', 'iyear', 'imonth', 'iday', 'nkill', 'country', 'country_txt', 'city', 'location', 'latitude', 'longitude', 'weaptype1', 'weaptype1_txt', 'weapsubtype1', 'weapsubtype1_txt', 'attacktype1', 'attacktype1_txt', 'targtype1', 'targtype1_txt', 'corp1', 'motive', 'summary', 'addnotes' ]])
#df = df[df.imonth != 0]
#df = df[df.iday != 0]
#df = df.fillna('')
#df = df[(df['attacktype1_txt'] == "Assassination") | (df['attacktype1_txt'] == "Armed Assault") | (df['attacktype1_txt'] == "Bombing/Explosion") | (df['attacktype1_txt'] == "Hijacking") | (df['attacktype1_txt'] == "Hostage Taking (Barricade Incident)") | (df['attacktype1_txt'] == "Hostage Taking (Kidnapping)") | (df['attacktype1_txt'] == "Facility/Infrastructure Attack") | (df['attacktype1_txt'] == "Unarmed Assault") | (df['attacktype1_txt'] == "Unknown")]
# Mapbox token for access to Mapbox
mapbox_access_token = 'Add your access token here'
# Create an object for Dash Core Components Options
# Different colors for gname groups if warranted - Placeholder
body = html.Div([
html.Div(
className="app-header",
children=[
html.H1('World Terrorism Attacks', className="app-header--title")
]
),
html.Div(
children=html.Div([
html.H5('Overview', className="app-header--overview"),
html.Div('''
This is an example of a simple Dash app with
local, customized CSS.''', className="app-header--explanation"
)
])
)
])
#
# HTML for navigation bar design - Not sure how to change the navlink color - need to research this, but not that important
navigationbar = dbc.NavbarSimple(
children=[
dbc.NavItem(dbc.NavLink("START>>> Global Terrorism Database (GTD)", href="https://www.start.umd.edu/gtd/", className="navlink")) # Not sure how to change the color of the link - need to research this))
],
brand="", # insert here for title for navbar
className="navbar_top",
brand_href="#", # This is where you would insert the logo for this dashboard
sticky="top",
color = "dark"
)
map_card = dbc.Card(
[
dbc.CardHeader(
dbc.Tabs(
[
dbc.Tab(label="Tab 1", tab_id="Tab_1", labelClassName="text-success", loading_state="is_loading"),
dbc.Tab(label="Tab 2", tab_id="Tab_2", labelClassName="text-success", loading_state="is_loading"), # text-success sets tab labels to theme's color i.e. Darkly
],
id="card_tabs",
card=True,
active_tab="Tab_1",
loading_state="is_loading",
)
),
dbc.CardBody(html.P(id="card_content", className="card_text")),
]
)
#Tab
#df = get_historical_data("", start=start, end=end, output_format="pandas")
#print(df.head()) # use this to ensure dataframe works
# Stylesheets for dash app
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.DARKLY])
# Local Cache Set-Up
#ache = Cache(app.server, config={
# 'CACHE_TYPE': 'filesystem',
# 'CACHE_DIR': 'cache_directory'
#})
# Cache time out
#TIMEOUT = 45
# Cache callback
#@cache.memoize(timeout=TIMEOUT)
# Merging all html elements into the app layout
app.layout = html.Div([navigationbar, body, map_card])
# Uncomment when add stylesheets and external_scripts
#app = dash.Dash(__name__,
# external_scripts=external_scripts,
# external_stylesheets=external_stylesheets)
# App callbacks
#card app callback - Tabs
@app.callback(
Output("card_content", "children"),
[Input("card_tabs", "active_tab")]
)
# Active Tab function with callback for tabs
def tab_content(active_tab):
return "This is {}".format(active_tab)
# Recalculates content when switching between Tabs
def switch_tab(at):
if at == "Tab_1":
return tab1_cardcontent
elif at == "Tab_2":
return tab2_cardcontent
return html.P("This should never ever be displayed...if it is something went wrong!")
if __name__== "__main__": # can change main to another tab or file to run multiple apps, can add external_scripts and external_stylesheets to this
app.run_server(debug=True) #run in debug mode - set debug in production to false in production
Tab_1.py code here
# _*_ coding: utf-8 _*_
# Import Dash Libraries
import plotly.graph_objects as go # or plotly.express as px
import plotly.express as px
import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output
import datetime
import time
import dateutil
import pandas as pd
Tab_1 = html.Div([
html.H1("Hello")
]
)