personal-projects/personal-portfolio
Template
1
1
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

feat: add Sprint 5 visualization components and Toronto dashboard

Browse Source 
- 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:
Leo Miranda
2026-01-11 16:20:01 -05:00
parent b7907e68e4
commit 077e426d34
10 changed files with 1298 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

281
portfolio_app/pages/toronto/__init__.py
View File

@@ -1 +1,282 @@
"""Toronto Housing Dashboard page."""
import dash
import dash_mantine_components as dmc
from dash import dcc, html
from portfolio_app.components import (
create_map_controls,
create_metric_cards_row,
create_time_slider,
create_year_selector,
)
dash.register_page(__name__, path="/toronto", name="Toronto Housing")
# Metric options for the purchase market
PURCHASE_METRIC_OPTIONS = [
{"label": "Average Price", "value": "avg_price"},
{"label": "Median Price", "value": "median_price"},
{"label": "Sales Volume", "value": "sales_count"},
{"label": "Days on Market", "value": "avg_dom"},
]
# Metric options for the rental market
RENTAL_METRIC_OPTIONS = [
{"label": "Average Rent", "value": "avg_rent"},
{"label": "Vacancy Rate", "value": "vacancy_rate"},
{"label": "Rental Universe", "value": "rental_universe"},
]
# Sample metrics for KPI cards (will be populated by callbacks)
SAMPLE_METRICS = [
{
"title": "Avg. Price",
"value": 1125000,
"delta": 2.3,
"prefix": "$",
"format_spec": ",.0f",
},
{
"title": "Sales Volume",
"value": 4850,
"delta": -5.1,
"format_spec": ",",
},
{
"title": "Avg. DOM",
"value": 18,
"delta": 3,
"suffix": " days",
"positive_is_good": False,
},
{
"title": "Avg. Rent",
"value": 2450,
"delta": 4.2,
"prefix": "$",
"format_spec": ",.0f",
},
]
def create_header() -> dmc.Group:
"""Create the dashboard header with title and controls."""
return dmc.Group(
[
dmc.Stack(
[
dmc.Title("Toronto Housing Dashboard", order=1),
dmc.Text(
"Real estate market analysis for the Greater Toronto Area",
c="dimmed",
),
],
gap="xs",
),
dmc.Group(
[
create_year_selector(
id_prefix="toronto",
min_year=2020,
default_year=2024,
label="Year",
),
],
gap="md",
),
],
justify="space-between",
align="flex-start",
)
def create_kpi_section() -> dmc.Box:
"""Create the KPI metrics row."""
return dmc.Box(
children=[
dmc.Title("Key Metrics", order=3, size="h4", mb="sm"),
html.Div(
id="toronto-kpi-cards",
children=[
create_metric_cards_row(SAMPLE_METRICS, id_prefix="toronto-kpi")
],
),
],
)
def create_purchase_map_section() -> dmc.Grid:
"""Create the purchase market choropleth section."""
return dmc.Grid(
[
dmc.GridCol(
create_map_controls(
id_prefix="purchase-map",
metric_options=PURCHASE_METRIC_OPTIONS,
default_metric="avg_price",
),
span={"base": 12, "md": 3},
),
dmc.GridCol(
dmc.Paper(
children=[
dcc.Graph(
id="purchase-choropleth",
config={"scrollZoom": True},
style={"height": "500px"},
),
],
p="xs",
radius="sm",
withBorder=True,
),
span={"base": 12, "md": 9},
),
],
gutter="md",
)
def create_rental_map_section() -> dmc.Grid:
"""Create the rental market choropleth section."""
return dmc.Grid(
[
dmc.GridCol(
create_map_controls(
id_prefix="rental-map",
metric_options=RENTAL_METRIC_OPTIONS,
default_metric="avg_rent",
),
span={"base": 12, "md": 3},
),
dmc.GridCol(
dmc.Paper(
children=[
dcc.Graph(
id="rental-choropleth",
config={"scrollZoom": True},
style={"height": "500px"},
),
],
p="xs",
radius="sm",
withBorder=True,
),
span={"base": 12, "md": 9},
),
],
gutter="md",
)
def create_time_series_section() -> dmc.Grid:
"""Create the time series charts section."""
return dmc.Grid(
[
dmc.GridCol(
dmc.Paper(
children=[
dmc.Title("Price Trends", order=4, size="h5", mb="sm"),
dcc.Graph(
id="price-time-series",
config={"displayModeBar": False},
style={"height": "350px"},
),
],
p="md",
radius="sm",
withBorder=True,
),
span={"base": 12, "md": 6},
),
dmc.GridCol(
dmc.Paper(
children=[
dmc.Title("Sales Volume", order=4, size="h5", mb="sm"),
dcc.Graph(
id="volume-time-series",
config={"displayModeBar": False},
style={"height": "350px"},
),
],
p="md",
radius="sm",
withBorder=True,
),
span={"base": 12, "md": 6},
),
],
gutter="md",
)
def create_market_comparison_section() -> dmc.Paper:
"""Create the market comparison chart section."""
return dmc.Paper(
children=[
dmc.Group(
[
dmc.Title("Market Indicators", order=4, size="h5"),
create_time_slider(
id_prefix="market-comparison",
min_year=2020,
label="",
),
],
justify="space-between",
align="center",
mb="md",
),
dcc.Graph(
id="market-comparison-chart",
config={"displayModeBar": False},
style={"height": "400px"},
),
],
p="md",
radius="sm",
withBorder=True,
)
def create_data_notice() -> dmc.Alert:
"""Create a notice about data availability."""
return dmc.Alert(
children=[
dmc.Text(
"This dashboard uses TRREB and CMHC data. "
"Geographic boundaries require QGIS digitization to enable choropleth maps. "
"Sample data is shown below.",
size="sm",
),
],
title="Data Notice",
color="blue",
variant="light",
)
# Register callbacks
from portfolio_app.pages.toronto import callbacks # noqa: E402, F401
layout = dmc.Container(
dmc.Stack(
[
create_header(),
create_data_notice(),
create_kpi_section(),
dmc.Divider(my="md", label="Purchase Market", labelPosition="center"),
create_purchase_map_section(),
dmc.Divider(my="md", label="Rental Market", labelPosition="center"),
create_rental_map_section(),
dmc.Divider(my="md", label="Trends", labelPosition="center"),
create_time_series_section(),
create_market_comparison_section(),
dmc.Space(h=40),
],
gap="lg",
),
size="xl",
py="xl",
)

171
portfolio_app/pages/toronto/callbacks/__init__.py
View File

@@ -1 +1,172 @@
"""Toronto dashboard callbacks."""
import plotly.graph_objects as go
from dash import Input, Output, callback
from portfolio_app.figures.choropleth import create_choropleth_figure
from portfolio_app.figures.time_series import (
create_market_comparison_chart,
create_price_time_series,
create_volume_time_series,
)
# Sample data for demonstration (will be replaced with database queries)
SAMPLE_PURCHASE_DATA = [
{
"district_code": "C01",
"district_name": "Downtown Toronto",
"avg_price": 1250000,
"median_price": 1100000,
"sales_count": 450,
"avg_dom": 15,
},
{
"district_code": "C02",
"district_name": "Annex/Yorkville",
"avg_price": 1850000,
"median_price": 1650000,
"sales_count": 280,
"avg_dom": 12,
},
{
"district_code": "E01",
"district_name": "East York",
"avg_price": 980000,
"median_price": 920000,
"sales_count": 320,
"avg_dom": 18,
},
{
"district_code": "W01",
"district_name": "Etobicoke South",
"avg_price": 875000,
"median_price": 825000,
"sales_count": 410,
"avg_dom": 20,
},
]
SAMPLE_RENTAL_DATA = [
{
"zone_code": "Z01",
"zone_name": "Toronto Core",
"avg_rent": 2650,
"vacancy_rate": 2.1,
"rental_universe": 125000,
},
{
"zone_code": "Z02",
"zone_name": "North York",
"avg_rent": 2200,
"vacancy_rate": 2.8,
"rental_universe": 85000,
},
{
"zone_code": "Z03",
"zone_name": "Scarborough",
"avg_rent": 1950,
"vacancy_rate": 3.2,
"rental_universe": 72000,
},
]
SAMPLE_TIME_SERIES_DATA = [
{"full_date": "2023-01-01", "avg_price": 1050000, "sales_count": 3200},
{"full_date": "2023-02-01", "avg_price": 1080000, "sales_count": 3400},
{"full_date": "2023-03-01", "avg_price": 1120000, "sales_count": 4100},
{"full_date": "2023-04-01", "avg_price": 1150000, "sales_count": 4500},
{"full_date": "2023-05-01", "avg_price": 1180000, "sales_count": 4800},
{"full_date": "2023-06-01", "avg_price": 1160000, "sales_count": 4600},
{"full_date": "2023-07-01", "avg_price": 1140000, "sales_count": 4200},
{"full_date": "2023-08-01", "avg_price": 1130000, "sales_count": 4000},
{"full_date": "2023-09-01", "avg_price": 1125000, "sales_count": 3800},
{"full_date": "2023-10-01", "avg_price": 1110000, "sales_count": 3600},
{"full_date": "2023-11-01", "avg_price": 1100000, "sales_count": 3400},
{"full_date": "2023-12-01", "avg_price": 1090000, "sales_count": 3000},
{"full_date": "2024-01-01", "avg_price": 1095000, "sales_count": 3100},
{"full_date": "2024-02-01", "avg_price": 1105000, "sales_count": 3300},
{"full_date": "2024-03-01", "avg_price": 1125000, "sales_count": 4000},
{"full_date": "2024-04-01", "avg_price": 1140000, "sales_count": 4400},
{"full_date": "2024-05-01", "avg_price": 1155000, "sales_count": 4700},
{"full_date": "2024-06-01", "avg_price": 1145000, "sales_count": 4500},
]
@callback( # type: ignore[misc]
Output("purchase-choropleth", "figure"),
Input("purchase-map-metric-selector", "value"),
Input("toronto-year-selector", "value"),
)
def update_purchase_choropleth(metric: str, year: str) -> go.Figure:
"""Update the purchase market choropleth map."""
# In production, this would query the database
# For now, return a placeholder map without geojson
return create_choropleth_figure(
geojson=None, # Will be populated when QGIS digitization is complete
data=SAMPLE_PURCHASE_DATA,
location_key="district_code",
color_column=metric or "avg_price",
hover_data=["district_name", "sales_count"],
title=f"Purchase Market - {metric.replace('_', ' ').title() if metric else 'Average Price'}",
)
@callback( # type: ignore[misc]
Output("rental-choropleth", "figure"),
Input("rental-map-metric-selector", "value"),
Input("toronto-year-selector", "value"),
)
def update_rental_choropleth(metric: str, year: str) -> go.Figure:
"""Update the rental market choropleth map."""
return create_choropleth_figure(
geojson=None, # Will be populated when QGIS digitization is complete
data=SAMPLE_RENTAL_DATA,
location_key="zone_code",
color_column=metric or "avg_rent",
hover_data=["zone_name", "vacancy_rate"],
color_scale="Oranges",
title=f"Rental Market - {metric.replace('_', ' ').title() if metric else 'Average Rent'}",
)
@callback( # type: ignore[misc]
Output("price-time-series", "figure"),
Input("toronto-year-selector", "value"),
)
def update_price_time_series(year: str) -> go.Figure:
"""Update the price time series chart."""
return create_price_time_series(
data=SAMPLE_TIME_SERIES_DATA,
date_column="full_date",
price_column="avg_price",
title="Average Price Trend",
)
@callback( # type: ignore[misc]
Output("volume-time-series", "figure"),
Input("toronto-year-selector", "value"),
)
def update_volume_time_series(year: str) -> go.Figure:
"""Update the volume time series chart."""
return create_volume_time_series(
data=SAMPLE_TIME_SERIES_DATA,
date_column="full_date",
volume_column="sales_count",
title="Sales Volume Trend",
chart_type="bar",
)
@callback( # type: ignore[misc]
Output("market-comparison-chart", "figure"),
Input("market-comparison-time-slider", "value"),
)
def update_market_comparison(time_range: list[int]) -> go.Figure:
"""Update the market comparison chart."""
return create_market_comparison_chart(
data=SAMPLE_TIME_SERIES_DATA,
date_column="full_date",
metrics=["avg_price", "sales_count"],
title="Market Indicators Comparison",
)