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:
@@ -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');
|
||||
|
||||
Reference in New Issue
Block a user