Agent skill
dash-5-multi-page-applications
Sub-skill of dash: 5. Multi-Page Applications.
Install this agent skill to your Project
npx add-skill https://github.com/vamseeachanta/workspace-hub/tree/main/.claude/skills/_archive/data/analysis/dash/5-multi-page-applications
SKILL.md
5. Multi-Page Applications
5. Multi-Page Applications
Project Structure:
my_dash_app/
├── app.py # Main entry point
├── pages/
│ ├── __init__.py
│ ├── home.py
│ ├── analytics.py
│ └── settings.py
├── components/
│ ├── __init__.py
│ ├── navbar.py
│ └── footer.py
├── utils/
│ ├── __init__.py
│ └── data.py
└── assets/
├── style.css
└── logo.png
Main App (app.py):
from dash import Dash, html, dcc, page_container
import dash_bootstrap_components as dbc
app = Dash(
__name__,
use_pages=True,
external_stylesheets=[dbc.themes.BOOTSTRAP]
)
# Navbar
navbar = dbc.NavbarSimple(
children=[
dbc.NavItem(dbc.NavLink("Home", href="/")),
dbc.NavItem(dbc.NavLink("Analytics", href="/analytics")),
dbc.NavItem(dbc.NavLink("Settings", href="/settings")),
],
brand="My Dashboard",
brand_href="/",
color="primary",
dark=True,
)
# Layout with navigation and page container
app.layout = html.Div([
navbar,
dbc.Container([
page_container
], fluid=True, className="mt-4")
])
if __name__ == "__main__":
app.run(debug=True)
Home Page (pages/home.py):
from dash import html, register_page
import dash_bootstrap_components as dbc
register_page(__name__, path="/", name="Home")
layout = dbc.Container([
dbc.Row([
dbc.Col([
html.H1("Welcome to the Dashboard"),
html.P("Select a page from the navigation bar to get started."),
dbc.Card([
dbc.CardBody([
html.H4("Quick Links"),
dbc.ListGroup([
dbc.ListGroupItem("Analytics", href="/analytics"),
dbc.ListGroupItem("Settings", href="/settings")
])
])
])
])
])
])
Analytics Page (pages/analytics.py):
from dash import html, dcc, callback, Output, Input, register_page
import dash_bootstrap_components as dbc
import plotly.express as px
import pandas as pd
register_page(__name__, path="/analytics", name="Analytics")
# Generate sample data
df = pd.DataFrame({
"date": pd.date_range("2025-01-01", periods=365),
"value": [100 + i + (i % 30) * 5 for i in range(365)]
})
layout = dbc.Container([
html.H1("Analytics"),
dbc.Row([
dbc.Col([
dbc.Label("Chart Type"),
dcc.Dropdown(
id="chart-type",
options=[
{"label": "Line", "value": "line"},
{"label": "Bar", "value": "bar"},
{"label": "Area", "value": "area"}
],
value="line"
)
], md=4)
], className="mb-4"),
dcc.Graph(id="analytics-chart")
])
@callback(
Output("analytics-chart", "figure"),
Input("chart-type", "value")
)
def update_chart(chart_type):
if chart_type == "line":
fig = px.line(df, x="date", y="value")
elif chart_type == "bar":
monthly = df.resample("M", on="date")["value"].sum().reset_index()
fig = px.bar(monthly, x="date", y="value")
else:
fig = px.area(df, x="date", y="value")
return fig
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
gsd-complete-milestone
Archive completed milestone and prepare for next version
gsd-reapply-patches
Reapply local modifications after a GSD update
gsd-verify-work
Validate built features through conversational UAT
gsd-thread
Manage persistent context threads for cross-session work
clinical-trial-protocol
Generate clinical trial protocols for medical devices or drugs through a modular, waypoint-based architecture with research-only and full protocol modes.
single-cell-rna-qc
Performs quality control on single-cell RNA-seq data (.h5ad or .h5 files) using scverse best practices with MAD-based filtering and comprehensive visualizations.
Didn't find tool you were looking for?