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:
2026-01-11 16:20:01 -05:00
parent b7907e68e4
commit 077e426d34
10 changed files with 1298 additions and 0 deletions

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",
)