feat: add Sprint 5 visualization components and Toronto dashboard
- Add figure factories: choropleth, time_series, summary_cards - Add shared components: map_controls, time_slider, metric_card - Create Toronto dashboard page with KPI cards, choropleth maps, and time series - Add dashboard callbacks for interactivity - Placeholder data for demonstration until QGIS boundaries are complete Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
14
portfolio_app/components/__init__.py
Normal file
14
portfolio_app/components/__init__.py
Normal file
@@ -0,0 +1,14 @@
|
||||
"""Shared Dash components for the portfolio application."""
|
||||
|
||||
from .map_controls import create_map_controls, create_metric_selector
|
||||
from .metric_card import MetricCard, create_metric_cards_row
|
||||
from .time_slider import create_time_slider, create_year_selector
|
||||
|
||||
__all__ = [
|
||||
"create_map_controls",
|
||||
"create_metric_selector",
|
||||
"create_time_slider",
|
||||
"create_year_selector",
|
||||
"MetricCard",
|
||||
"create_metric_cards_row",
|
||||
]
|
||||
79
portfolio_app/components/map_controls.py
Normal file
79
portfolio_app/components/map_controls.py
Normal file
@@ -0,0 +1,79 @@
|
||||
"""Map control components for choropleth visualizations."""
|
||||
|
||||
from typing import Any
|
||||
|
||||
import dash_mantine_components as dmc
|
||||
from dash import html
|
||||
|
||||
|
||||
def create_metric_selector(
|
||||
id_prefix: str,
|
||||
options: list[dict[str, str]],
|
||||
default_value: str | None = None,
|
||||
label: str = "Select Metric",
|
||||
) -> dmc.Select:
|
||||
"""Create a metric selector dropdown.
|
||||
|
||||
Args:
|
||||
id_prefix: Prefix for component IDs.
|
||||
options: List of options with 'label' and 'value' keys.
|
||||
default_value: Initial selected value.
|
||||
label: Label text for the selector.
|
||||
|
||||
Returns:
|
||||
Mantine Select component.
|
||||
"""
|
||||
return dmc.Select(
|
||||
id=f"{id_prefix}-metric-selector",
|
||||
label=label,
|
||||
data=options,
|
||||
value=default_value or (options[0]["value"] if options else None),
|
||||
style={"width": "200px"},
|
||||
)
|
||||
|
||||
|
||||
def create_map_controls(
|
||||
id_prefix: str,
|
||||
metric_options: list[dict[str, str]],
|
||||
default_metric: str | None = None,
|
||||
show_layer_toggle: bool = True,
|
||||
) -> dmc.Paper:
|
||||
"""Create a control panel for map visualizations.
|
||||
|
||||
Args:
|
||||
id_prefix: Prefix for component IDs.
|
||||
metric_options: Options for metric selector.
|
||||
default_metric: Default selected metric.
|
||||
show_layer_toggle: Whether to show layer visibility toggle.
|
||||
|
||||
Returns:
|
||||
Mantine Paper component containing controls.
|
||||
"""
|
||||
controls: list[Any] = [
|
||||
create_metric_selector(
|
||||
id_prefix=id_prefix,
|
||||
options=metric_options,
|
||||
default_value=default_metric,
|
||||
label="Display Metric",
|
||||
),
|
||||
]
|
||||
|
||||
if show_layer_toggle:
|
||||
controls.append(
|
||||
dmc.Switch(
|
||||
id=f"{id_prefix}-layer-toggle",
|
||||
label="Show Boundaries",
|
||||
checked=True,
|
||||
style={"marginTop": "10px"},
|
||||
)
|
||||
)
|
||||
|
||||
return dmc.Paper(
|
||||
children=[
|
||||
dmc.Text("Map Controls", fw=500, size="sm", mb="xs"),
|
||||
html.Div(controls),
|
||||
],
|
||||
p="md",
|
||||
radius="sm",
|
||||
withBorder=True,
|
||||
)
|
||||
115
portfolio_app/components/metric_card.py
Normal file
115
portfolio_app/components/metric_card.py
Normal file
@@ -0,0 +1,115 @@
|
||||
"""Metric card components for KPI display."""
|
||||
|
||||
from typing import Any
|
||||
|
||||
import dash_mantine_components as dmc
|
||||
from dash import dcc
|
||||
|
||||
from portfolio_app.figures.summary_cards import create_metric_card_figure
|
||||
|
||||
|
||||
class MetricCard:
|
||||
"""A reusable metric card component."""
|
||||
|
||||
def __init__(
|
||||
self,
|
||||
id_prefix: str,
|
||||
title: str,
|
||||
value: float | int | str = 0,
|
||||
delta: float | None = None,
|
||||
prefix: str = "",
|
||||
suffix: str = "",
|
||||
format_spec: str = ",.0f",
|
||||
positive_is_good: bool = True,
|
||||
):
|
||||
"""Initialize a metric card.
|
||||
|
||||
Args:
|
||||
id_prefix: Prefix for component IDs.
|
||||
title: Card title.
|
||||
value: Main metric value.
|
||||
delta: Change value for delta indicator.
|
||||
prefix: Value prefix (e.g., '$').
|
||||
suffix: Value suffix.
|
||||
format_spec: Python format specification.
|
||||
positive_is_good: Whether positive delta is good.
|
||||
"""
|
||||
self.id_prefix = id_prefix
|
||||
self.title = title
|
||||
self.value = value
|
||||
self.delta = delta
|
||||
self.prefix = prefix
|
||||
self.suffix = suffix
|
||||
self.format_spec = format_spec
|
||||
self.positive_is_good = positive_is_good
|
||||
|
||||
def render(self) -> dmc.Paper:
|
||||
"""Render the metric card component.
|
||||
|
||||
Returns:
|
||||
Mantine Paper component with embedded graph.
|
||||
"""
|
||||
fig = create_metric_card_figure(
|
||||
value=self.value,
|
||||
title=self.title,
|
||||
delta=self.delta,
|
||||
prefix=self.prefix,
|
||||
suffix=self.suffix,
|
||||
format_spec=self.format_spec,
|
||||
positive_is_good=self.positive_is_good,
|
||||
)
|
||||
|
||||
return dmc.Paper(
|
||||
children=[
|
||||
dcc.Graph(
|
||||
id=f"{self.id_prefix}-graph",
|
||||
figure=fig,
|
||||
config={"displayModeBar": False},
|
||||
style={"height": "120px"},
|
||||
)
|
||||
],
|
||||
p="xs",
|
||||
radius="sm",
|
||||
withBorder=True,
|
||||
)
|
||||
|
||||
|
||||
def create_metric_cards_row(
|
||||
metrics: list[dict[str, Any]],
|
||||
id_prefix: str = "metric",
|
||||
) -> dmc.SimpleGrid:
|
||||
"""Create a row of metric cards.
|
||||
|
||||
Args:
|
||||
metrics: List of metric configurations with keys:
|
||||
- title: Card title
|
||||
- value: Metric value
|
||||
- delta: Optional change value
|
||||
- prefix: Optional value prefix
|
||||
- suffix: Optional value suffix
|
||||
- format_spec: Optional format specification
|
||||
- positive_is_good: Optional delta color logic
|
||||
id_prefix: Prefix for component IDs.
|
||||
|
||||
Returns:
|
||||
Mantine SimpleGrid component with metric cards.
|
||||
"""
|
||||
cards = []
|
||||
for i, metric in enumerate(metrics):
|
||||
card = MetricCard(
|
||||
id_prefix=f"{id_prefix}-{i}",
|
||||
title=metric.get("title", ""),
|
||||
value=metric.get("value", 0),
|
||||
delta=metric.get("delta"),
|
||||
prefix=metric.get("prefix", ""),
|
||||
suffix=metric.get("suffix", ""),
|
||||
format_spec=metric.get("format_spec", ",.0f"),
|
||||
positive_is_good=metric.get("positive_is_good", True),
|
||||
)
|
||||
cards.append(card.render())
|
||||
|
||||
return dmc.SimpleGrid(
|
||||
cols={"base": 1, "sm": 2, "md": len(cards)},
|
||||
spacing="md",
|
||||
children=cards,
|
||||
)
|
||||
135
portfolio_app/components/time_slider.py
Normal file
135
portfolio_app/components/time_slider.py
Normal file
@@ -0,0 +1,135 @@
|
||||
"""Time selection components for temporal data filtering."""
|
||||
|
||||
from datetime import date
|
||||
|
||||
import dash_mantine_components as dmc
|
||||
|
||||
|
||||
def create_year_selector(
|
||||
id_prefix: str,
|
||||
min_year: int = 2020,
|
||||
max_year: int | None = None,
|
||||
default_year: int | None = None,
|
||||
label: str = "Select Year",
|
||||
) -> dmc.Select:
|
||||
"""Create a year selector dropdown.
|
||||
|
||||
Args:
|
||||
id_prefix: Prefix for component IDs.
|
||||
min_year: Minimum year option.
|
||||
max_year: Maximum year option (defaults to current year).
|
||||
default_year: Initial selected year.
|
||||
label: Label text for the selector.
|
||||
|
||||
Returns:
|
||||
Mantine Select component.
|
||||
"""
|
||||
if max_year is None:
|
||||
max_year = date.today().year
|
||||
|
||||
if default_year is None:
|
||||
default_year = max_year
|
||||
|
||||
years = list(range(max_year, min_year - 1, -1))
|
||||
options = [{"label": str(year), "value": str(year)} for year in years]
|
||||
|
||||
return dmc.Select(
|
||||
id=f"{id_prefix}-year-selector",
|
||||
label=label,
|
||||
data=options,
|
||||
value=str(default_year),
|
||||
style={"width": "120px"},
|
||||
)
|
||||
|
||||
|
||||
def create_time_slider(
|
||||
id_prefix: str,
|
||||
min_year: int = 2020,
|
||||
max_year: int | None = None,
|
||||
default_range: tuple[int, int] | None = None,
|
||||
label: str = "Time Range",
|
||||
) -> dmc.Paper:
|
||||
"""Create a time range slider component.
|
||||
|
||||
Args:
|
||||
id_prefix: Prefix for component IDs.
|
||||
min_year: Minimum year for the slider.
|
||||
max_year: Maximum year for the slider.
|
||||
default_range: Default (start, end) year range.
|
||||
label: Label text for the slider.
|
||||
|
||||
Returns:
|
||||
Mantine Paper component containing the slider.
|
||||
"""
|
||||
if max_year is None:
|
||||
max_year = date.today().year
|
||||
|
||||
if default_range is None:
|
||||
default_range = (min_year, max_year)
|
||||
|
||||
# Create marks for every year
|
||||
marks = [
|
||||
{"value": year, "label": str(year)} for year in range(min_year, max_year + 1)
|
||||
]
|
||||
|
||||
return dmc.Paper(
|
||||
children=[
|
||||
dmc.Text(label, fw=500, size="sm", mb="xs"),
|
||||
dmc.RangeSlider(
|
||||
id=f"{id_prefix}-time-slider",
|
||||
min=min_year,
|
||||
max=max_year,
|
||||
value=list(default_range),
|
||||
marks=marks,
|
||||
step=1,
|
||||
minRange=1,
|
||||
style={"marginTop": "20px", "marginBottom": "10px"},
|
||||
),
|
||||
],
|
||||
p="md",
|
||||
radius="sm",
|
||||
withBorder=True,
|
||||
)
|
||||
|
||||
|
||||
def create_month_selector(
|
||||
id_prefix: str,
|
||||
default_month: int | None = None,
|
||||
label: str = "Select Month",
|
||||
) -> dmc.Select:
|
||||
"""Create a month selector dropdown.
|
||||
|
||||
Args:
|
||||
id_prefix: Prefix for component IDs.
|
||||
default_month: Initial selected month (1-12).
|
||||
label: Label text for the selector.
|
||||
|
||||
Returns:
|
||||
Mantine Select component.
|
||||
"""
|
||||
months = [
|
||||
"January",
|
||||
"February",
|
||||
"March",
|
||||
"April",
|
||||
"May",
|
||||
"June",
|
||||
"July",
|
||||
"August",
|
||||
"September",
|
||||
"October",
|
||||
"November",
|
||||
"December",
|
||||
]
|
||||
options = [{"label": month, "value": str(i + 1)} for i, month in enumerate(months)]
|
||||
|
||||
if default_month is None:
|
||||
default_month = date.today().month
|
||||
|
||||
return dmc.Select(
|
||||
id=f"{id_prefix}-month-selector",
|
||||
label=label,
|
||||
data=options,
|
||||
value=str(default_month),
|
||||
style={"width": "140px"},
|
||||
)
|
||||
Reference in New Issue
Block a user