"""
Dashboard layout definitions.
"""
import plotly.graph_objects as go
from dash import dcc, html
from kaxanuk.attribution_analysis.dashboard.components import create_metric_card
from kaxanuk.attribution_analysis.dashboard.styles import get_tab_style, get_selected_tab_style
[docs]
def create_tab_component(label: str, value: str) -> dcc.Tab:
"""
Build a single styled tab for the dashboard's analysis tab bar.
Parameters
----------
label : str
Display text shown on the tab.
value : str
Identifier used to select this tab in Dash callbacks
(e.g. matched against ``analysis-tabs``'s ``value`` property).
Returns
-------
dash.dcc.Tab
A `Tab` component styled with `get_tab_style` /
`get_selected_tab_style`.
"""
return dcc.Tab(
label=label,
value=value,
style=get_tab_style(),
selected_style=get_selected_tab_style(),
)
[docs]
def create_main_layout(
header_content: list,
metrics: dict,
attribution_summary_chart: go.Figure,
decomposition_bar_chart: go.Figure,
) -> html.Div:
"""
Assemble the dashboard's top-level layout.
Composes the header, key metric cards, main charts row, performance
statistics table placeholder, and analysis tabs into a single
container.
Parameters
----------
header_content : list
Dash HTML components making up the header, as produced by
`kaxanuk.attribution_analysis.dashboard.components.create_header_with_logo`.
metrics : dict
Mapping with keys ``total_return``, ``annualized_return``,
``sharpe_ratio``, ``max_drawdown``, ``annualized_vol``, and
``skewness``, as produced by
`AttributionDashboard._calculate_key_metrics`.
attribution_summary_chart : plotly.graph_objects.Figure
Figure rendered in the "Factor Attribution" chart panel.
decomposition_bar_chart : plotly.graph_objects.Figure
Figure rendered in the "End-of-Period Decomposition" chart panel.
Returns
-------
dash.html.Div
The complete dashboard layout, ready to be assigned to
``dash.Dash.layout``.
"""
return html.Div([
# Header
html.Div(header_content, className="header"),
# Key Metrics Cards
html.Div([
create_metric_card(
"Total Return",
f"{metrics['total_return']:.2%}",
"success",
),
create_metric_card(
"Annualized Return",
f"{metrics['annualized_return']:.2%}",
"info",
),
create_metric_card(
"Sharpe Ratio",
f"{metrics['sharpe_ratio']:.3f}",
"warning",
),
create_metric_card(
"Max Drawdown",
f"{metrics['max_drawdown']:.2%}",
"danger",
),
create_metric_card(
"Annualized Vol",
f"{metrics['annualized_vol']:.2%}",
"warning",
),
create_metric_card(
"Skewness",
f"{metrics['skewness']:.3f}",
"secondary",
),
], className="metrics-row"),
html.Hr(className="section-divider"),
# Main Charts Row
html.Div([
html.Div([
html.H3("Factor Attribution", className="chart-title"),
dcc.Graph(
id='attribution-summary-chart',
figure=attribution_summary_chart,
className="main-chart",
style={'width': '100%', 'height': '100%'},
),
], className="chart-container-large"),
html.Div([
html.H3("End-of-Period Decomposition", className="chart-title"),
dcc.Graph(
id='decomposition-bar-chart',
figure=decomposition_bar_chart,
className="side-chart",
),
], className="chart-container-small"),
], className="charts-row"),
# Performance Statistics Table
html.Div([
html.H3("Performance Statistics", className="section-title"),
html.Div(id="performance-stats-table"),
], className="stats-section"),
# Analysis Tabs
html.Div([
dcc.Tabs(
id="analysis-tabs",
value='factor-attribution-tab',
style={'fontFamily': 'Montserrat', 'height': '44px'},
colors={
"border": "#e2e8f0",
"primary": "#e84328",
"background": "#f8f9fa",
},
children=[
create_tab_component('Factor Attribution', 'factor-attribution-tab'),
create_tab_component('Return Decomposition', 'decomposition-tab'),
create_tab_component('Brinson-Fachler', 'brinson-fachler-tab'),
create_tab_component('Returns Distribution', 'returns-tab'),
create_tab_component('Drawdown Analysis', 'drawdown-tab'),
],
),
html.Div(id='tab-content'),
], className="tabs-section"),
], className="dashboard-container")
