feat: URL state for shareable filter views

- Dashboard filters (year, district, museum, quarter) sync to URL
- Comparison filters (preset, dates, district, museum) sync to URL
- Users can now share links with specific filter configurations
- Reset filters also clears URL parameters
- Add useUrlState hook (unused but available for future use)
This commit is contained in:
fahed
2026-02-02 13:58:34 +03:00
parent 8a3b6a8d2e
commit c0c36c7904
4 changed files with 154 additions and 17 deletions

View File

@@ -1,4 +1,5 @@
import React, { useState, useMemo } from 'react';
import { useSearchParams } from 'react-router-dom';
import { Line, Doughnut, Bar } from 'react-chartjs-2';
import { Carousel, EmptyState, FilterControls, StatCard } from './shared';
import { chartColors, createBaseOptions } from '../config/chartConfig';
@@ -24,8 +25,35 @@ const defaultFilters = {
quarter: 'all'
};
const filterKeys = ['year', 'district', 'museum', 'quarter'];
function Dashboard({ data, showDataLabels }) {
const [filters, setFilters] = useState(defaultFilters);
const [searchParams, setSearchParams] = useSearchParams();
// Initialize filters from URL or defaults
const [filters, setFiltersState] = useState(() => {
const initial = { ...defaultFilters };
filterKeys.forEach(key => {
const value = searchParams.get(key);
if (value) initial[key] = value;
});
return initial;
});
// Update both state and URL
const setFilters = (newFilters) => {
const updated = typeof newFilters === 'function' ? newFilters(filters) : newFilters;
setFiltersState(updated);
const params = new URLSearchParams();
filterKeys.forEach(key => {
if (updated[key] && updated[key] !== 'all') {
params.set(key, updated[key]);
}
});
setSearchParams(params, { replace: true });
};
const [activeStatCard, setActiveStatCard] = useState(0);
const [activeChart, setActiveChart] = useState(0);
const [trendGranularity, setTrendGranularity] = useState('week');