Add Venue Filter to Analytics
complete
George Jabbour
## Overview
Add venue filtering to the analytics filter panel so users can analyze their performance at specific venues (LGS, tournaments, online platforms).
Type:
Feature | Priority:
Medium | Complexity:
XS (30-60 min)---
## Technical Context
Backend Status:
COMPLETE - Venue filtering is fully implemented:- AnalyticsFilters dataclass has venue_id field (apps/backend/apps/analytics/services/base.py:29)
- OpenAPI schema includes venue_id parameter (apps/backend/apps/analytics/views/analytics.py:107-112)
- Query filtering applied in _apply_match_filters and _apply_game_filters
Frontend Status:
MISSING - Venue filter not exposed in filter panel despite backend support.---
## Implementation
### Files to Modify
apps/frontend/src/components/analytics/analytics-filters.tsx:
- Add to AnalyticsFiltersState interface:
- venue_id?: string
- Add to AnalyticsApiFilters interface:
- venue_id?: string
- Update toApiFilters() to include venue_id
- Add venue data fetching:
- Use venuesListOptions from hey-api
- staleTime: 300000 (5 min, matches other filters)
- Add Select component for venue (single-select, not multi)
- Label: "Venue"
- Placeholder: "All venues"
- Update activeFilterCount to include venue_id
### Patterns to Follow
- Use Select component (single value) - backend uses venue_id not venue_ids
- Follow format filter implementation pattern
- Position after Format filter in grid
---
## Acceptance Criteria
- Venue filter appears in desktop card view and mobile sheet
- Shows active venues from team
- Filters all analytics endpoints when selected
- Included in active filter count badge
- Clear All and Apply Filters work correctly
- Design system compliant (sharp corners, borders, 150ms transitions)
- TypeScript compiles without errors
---
## Questions
- Multi-venue filtering: Should backend be enhanced to support venue_ids (comma-separated list) like other filters?
- Filter position: After Format, or new row to avoid crowding?
- Venue grouping: Group by type in dropdown or flat alphabetical list?
---
## No Backend Changes Required
All backend infrastructure is complete.
George Jabbour
marked this post as
complete
George Jabbour
marked this post as
in progress
George Jabbour
## Implementation Complete
The venue filter has been added to the analytics filters component.
### Changes Made
**File:
apps/frontend/src/components/analytics/analytics-filters.tsx
**- Added venue_id?: stringtoAnalyticsFiltersStateinterface
- Added venue_id?: stringtoAnalyticsApiFiltersinterface
- Updated toApiFilters()to includevenue_idin API parameters
- Added venue data fetching using venuesListOptionswith 5-minute cache
- Added single-select Selectdropdown for venue (positioned after Format filter)
- Updated activeFilterCountto includevenue_idin badge count
- Added handleVenueChangehandler for the single-select dropdown
### Tests Added
**File:
apps/frontend/src/__tests__/components/analytics/analytics-filters.test.ts
**- 15 unit tests covering toApiFilters()function
- Specific tests for venue_idhandling:
- Passes through venue_id correctly
- Does not include venue_id when undefined (stripUndefined behavior)
- Handles venue_id combined with other filters
### Verification
- TypeScript compiles without errors
- All 15 analytics filter tests pass
- Lint passes on the modified file
- Design system compliant (sharp corners, borders, 150ms transitions)