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

Rebuild dashboard.py with 5-tab structure #66

New Issue
Closed
opened 2026-01-17 16:08:00 +00:00 by lmiranda · 0 comments
lmiranda commented 2026-01-17 16:08:00 +00:00
Owner
Copy Link

Summary

Replace the current legacy dashboard layout (TRREB-style with purchase/rental sections) with a modern 5-tab structure aligned to the neighbourhood dashboard vision.

Current State

pages/toronto/dashboard.py has:

  • Purchase Market section (legacy TRREB)
  • Rental Market section
  • Time series charts
  • No tab navigation

Target State

New tabbed layout:

  1. Overview - Composite livability score
  2. Housing - Affordability metrics
  3. Safety - Crime statistics
  4. Demographics - Population/income
  5. Amenities - Parks, schools, transit

Files to Modify

File Changes
portfolio_app/pages/toronto/dashboard.py Complete rewrite with tab navigation

Files to Create

File Purpose
portfolio_app/pages/toronto/tabs/__init__.py Package init
portfolio_app/pages/toronto/tabs/overview.py Overview tab layout
portfolio_app/pages/toronto/tabs/housing.py Housing tab layout
portfolio_app/pages/toronto/tabs/safety.py Safety tab layout
portfolio_app/pages/toronto/tabs/demographics.py Demographics tab layout
portfolio_app/pages/toronto/tabs/amenities.py Amenities tab layout

Layout Pattern (All Tabs)

Each tab follows:

  1. Choropleth Map (left, ~60% width) - 158 neighbourhoods
  2. KPI Cards (right, ~40% width) - 3-4 contextual metrics
  3. Supporting Charts (bottom) - Trend + comparison visualizations
  4. Details Panel (collapsible) - All metrics for selected neighbourhood

Acceptance Criteria

  • Tab navigation using dmc.Tabs
  • Each tab loads its own layout module
  • Shared header with year selector
  • URL hash updates with tab selection (/toronto#housing)
  • Responsive layout (mobile-friendly)
  • Dark mode compatible

Technical Notes

  • Use dash-mantine-components v0.14+ Tabs API
  • Tab content should lazy-load for performance
  • Store selected neighbourhood in dcc.Store

Labels: type:feature, component:frontend, priority:critical, tech:python, tech:dash

## Summary Replace the current legacy dashboard layout (TRREB-style with purchase/rental sections) with a modern 5-tab structure aligned to the neighbourhood dashboard vision. ## Current State `pages/toronto/dashboard.py` has: - Purchase Market section (legacy TRREB) - Rental Market section - Time series charts - No tab navigation ## Target State New tabbed layout: 1. **Overview** - Composite livability score 2. **Housing** - Affordability metrics 3. **Safety** - Crime statistics 4. **Demographics** - Population/income 5. **Amenities** - Parks, schools, transit ## Files to Modify | File | Changes | |------|---------| | `portfolio_app/pages/toronto/dashboard.py` | Complete rewrite with tab navigation | ## Files to Create | File | Purpose | |------|---------| | `portfolio_app/pages/toronto/tabs/__init__.py` | Package init | | `portfolio_app/pages/toronto/tabs/overview.py` | Overview tab layout | | `portfolio_app/pages/toronto/tabs/housing.py` | Housing tab layout | | `portfolio_app/pages/toronto/tabs/safety.py` | Safety tab layout | | `portfolio_app/pages/toronto/tabs/demographics.py` | Demographics tab layout | | `portfolio_app/pages/toronto/tabs/amenities.py` | Amenities tab layout | ## Layout Pattern (All Tabs) Each tab follows: 1. **Choropleth Map** (left, ~60% width) - 158 neighbourhoods 2. **KPI Cards** (right, ~40% width) - 3-4 contextual metrics 3. **Supporting Charts** (bottom) - Trend + comparison visualizations 4. **Details Panel** (collapsible) - All metrics for selected neighbourhood ## Acceptance Criteria - [ ] Tab navigation using `dmc.Tabs` - [ ] Each tab loads its own layout module - [ ] Shared header with year selector - [ ] URL hash updates with tab selection (`/toronto#housing`) - [ ] Responsive layout (mobile-friendly) - [ ] Dark mode compatible ## Technical Notes - Use dash-mantine-components v0.14+ Tabs API - Tab content should lazy-load for performance - Store selected neighbourhood in `dcc.Store` **Labels:** type:feature, component:frontend, priority:critical, tech:python, tech:dash
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
Complexity/Complex
High uncertainty or many dependencies
 Complexity/Medium
Some unknowns or dependencies
 Complexity/Simple
Straightforward, well-understood
 Effort/L
3-5 days
 Effort/M
1-2 days
 Effort/S
2-4 hours
 Effort/XL
> 1 week
 Effort/XS
< 2 hours
 Priority/Critical
Immediate attention required
 Priority/High
Important, needs attention soon
 Priority/Low
Nice to have, can wait
 Priority/Medium
Normal priority
 Type/Bug
Something isn't working
 Type/Chore
Maintenance tasks
 Type/Documentation
Documentation improvements
 Type/Feature
New feature or request
 Type/Refactor
Code refactoring without changing behavior
 Type/Test
Testing related
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
lmiranda
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: personal-projects/personal-portfolio#66
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?