fahed/hihala-dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: multi-select filters for events and channels

Browse Source 
- New MultiSelect component with checkbox dropdown
- Event and channel filters now accept multiple selections
- Empty array = all selected (no filter applied)
- URL params store selections as comma-separated values
- District and quarter remain single-select

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
fahed
2026-03-31 14:53:23 +03:00
parent fba72692ee
commit aa9813aed4
7 changed files with 230 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
src/components/Dashboard.tsx
View File

@@ -1,7 +1,7 @@
import React, { useState, useMemo, useEffect } from 'react';
import { useSearchParams } from 'react-router-dom';
import { Line, Doughnut, Bar } from 'react-chartjs-2';
import { Carousel, EmptyState, FilterControls, StatCard } from './shared';
import { Carousel, EmptyState, FilterControls, MultiSelect, StatCard } from './shared';
import { ExportableChart } from './ChartExport';
import { chartColors, createBaseOptions } from '../config/chartConfig';
import { useLanguage } from '../contexts/LanguageContext';
@@ -27,12 +27,12 @@ import type { DashboardProps, Filters, MuseumRecord } from '../types';
const defaultFilters: Filters = {
year: 'all',
district: 'all',
channel: 'all',
museum: 'all',
channel: [],
museum: [],
quarter: 'all'
};
const filterKeys: (keyof Filters)[] = ['year', 'district', 'channel', 'museum', 'quarter'];
const filterKeys: (keyof Filters)[] = ['year', 'district', 'quarter'];
function Dashboard({ data, showDataLabels, setShowDataLabels, includeVAT, setIncludeVAT }: DashboardProps) {
const { t } = useLanguage();
@@ -45,12 +45,16 @@ function Dashboard({ data, showDataLabels, setShowDataLabels, includeVAT, setInc
}, []);
// Initialize filters from URL or defaults
const [filters, setFiltersState] = useState(() => {
const initial = { ...defaultFilters };
const [filters, setFiltersState] = useState<Filters>(() => {
const initial: Filters = { ...defaultFilters };
filterKeys.forEach(key => {
const value = searchParams.get(key);
if (value) initial[key] = value;
if (value) (initial as Record<string, unknown>)[key] = value;
});
const museumParam = searchParams.get('museum');
if (museumParam) initial.museum = museumParam.split(',').filter(Boolean);
const channelParam = searchParams.get('channel');
if (channelParam) initial.channel = channelParam.split(',').filter(Boolean);
return initial;
});
@@ -61,10 +65,13 @@ function Dashboard({ data, showDataLabels, setShowDataLabels, includeVAT, setInc
const params = new URLSearchParams();
filterKeys.forEach(key => {
if (updated[key] && updated[key] !== 'all') {
params.set(key, updated[key]);
const val = (updated as Record<string, unknown>)[key] as string;
if (val && val !== 'all') {
params.set(key, val);
}
});
if (updated.museum.length > 0) params.set('museum', updated.museum.join(','));
if (updated.channel.length > 0) params.set('channel', updated.channel.join(','));
setSearchParams(params, { replace: true });
};
@@ -89,7 +96,7 @@ function Dashboard({ data, showDataLabels, setShowDataLabels, includeVAT, setInc
// Chart carousel labels
const chartLabels = useMemo(() => {
const labels = [t('charts.revenueTrend'), t('charts.visitors'), t('charts.revenue'), t('charts.quarterly'), t('charts.channel'), t('charts.district'), t('charts.captureRate')];
return filters.museum === 'all' ? labels : labels.filter((_, i) => i !== 1 && i !== 2);
return filters.museum.length === 0 ? labels : labels.filter((_, i) => i !== 1 && i !== 2);
}, [filters.museum, t]);
// Dynamic lists from data
@@ -279,8 +286,8 @@ function Dashboard({ data, showDataLabels, setShowDataLabels, includeVAT, setInc
if (!pilgrims) return;
let qData = data.filter((r: MuseumRecord) => r.year === String(year) && r.quarter === String(q));
if (filters.district !== 'all') qData = qData.filter((r: MuseumRecord) => r.district === filters.district);
if (filters.channel !== 'all') qData = qData.filter((r: MuseumRecord) => r.channel === filters.channel);
if (filters.museum !== 'all') qData = qData.filter((r: MuseumRecord) => r.museum_name === filters.museum);
if (filters.channel.length > 0) qData = qData.filter((r: MuseumRecord) => filters.channel.includes(r.channel));
if (filters.museum.length > 0) qData = qData.filter((r: MuseumRecord) => filters.museum.includes(r.museum_name));
const visitors = qData.reduce((s: number, r: MuseumRecord) => s + parseInt(String(r.visits || 0)), 0);
labels.push(`Q${q} ${year}`);
rates.push((visitors / pilgrims * 100));
@@ -357,13 +364,13 @@ function Dashboard({ data, showDataLabels, setShowDataLabels, includeVAT, setInc
q2024 = q2024.filter((r: MuseumRecord) => r.district === filters.district);
q2025 = q2025.filter((r: MuseumRecord) => r.district === filters.district);
}
if (filters.channel !== 'all') {
q2024 = q2024.filter((r: MuseumRecord) => r.channel === filters.channel);
q2025 = q2025.filter((r: MuseumRecord) => r.channel === filters.channel);
if (filters.channel.length > 0) {
q2024 = q2024.filter((r: MuseumRecord) => filters.channel.includes(r.channel));
q2025 = q2025.filter((r: MuseumRecord) => filters.channel.includes(r.channel));
}
if (filters.museum !== 'all') {
q2024 = q2024.filter((r: MuseumRecord) => r.museum_name === filters.museum);
q2025 = q2025.filter((r: MuseumRecord) => r.museum_name === filters.museum);
if (filters.museum.length > 0) {
q2024 = q2024.filter((r: MuseumRecord) => filters.museum.includes(r.museum_name));
q2025 = q2025.filter((r: MuseumRecord) => filters.museum.includes(r.museum_name));
}
const rev24 = q2024.reduce((s: number, r: MuseumRecord) => s + parseFloat(String(r[revenueField as keyof MuseumRecord] || 0)), 0);
const rev25 = q2025.reduce((s: number, r: MuseumRecord) => s + parseFloat(String(r[revenueField as keyof MuseumRecord] || 0)), 0);
@@ -413,22 +420,26 @@ function Dashboard({ data, showDataLabels, setShowDataLabels, includeVAT, setInc
</select>
</FilterControls.Group>
<FilterControls.Group label={t('filters.district')}>
<select value={filters.district} onChange={e => setFilters({...filters, district: e.target.value, museum: 'all'})}>
<select value={filters.district} onChange={e => setFilters({...filters, district: e.target.value, museum: []})}>
<option value="all">{t('filters.allDistricts')}</option>
{districts.map(d => <option key={d} value={d}>{d}</option>)}
</select>
</FilterControls.Group>
<FilterControls.Group label={t('filters.channel')}>
<select value={filters.channel} onChange={e => setFilters({...filters, channel: e.target.value})}>
<option value="all">{t('filters.allChannels')}</option>
{channels.map(c => <option key={c} value={c}>{c}</option>)}
</select>
<MultiSelect
options={channels}
selected={filters.channel}
onChange={channel => setFilters({...filters, channel})}
allLabel={t('filters.allChannels')}
/>
</FilterControls.Group>
<FilterControls.Group label={t('filters.museum')}>
<select value={filters.museum} onChange={e => setFilters({...filters, museum: e.target.value})}>
<option value="all">{t('filters.allMuseums')}</option>
{availableMuseums.map(m => <option key={m} value={m}>{m}</option>)}
</select>
<MultiSelect
options={availableMuseums}
selected={filters.museum}
onChange={museum => setFilters({...filters, museum})}
allLabel={t('filters.allMuseums')}
/>
</FilterControls.Group>
<FilterControls.Group label={t('filters.quarter')}>
<select value={filters.quarter} onChange={e => setFilters({...filters, quarter: e.target.value})}>
@@ -536,7 +547,7 @@ function Dashboard({ data, showDataLabels, setShowDataLabels, includeVAT, setInc
</ExportableChart>
</div>
{filters.museum === 'all' && (
{filters.museum.length === 0 && (
<div className="chart-card half-width">
<ExportableChart filename="visitors-by-museum" title={t('dashboard.visitorsByMuseum')} className="chart-container">
<Doughnut data={museumData.visitors} options={{...baseOptions, plugins: {...baseOptions.plugins, legend: {display: true, position: 'bottom', labels: {boxWidth: 12, padding: 16, font: {size: 13}}}}}} />
@@ -544,7 +555,7 @@ function Dashboard({ data, showDataLabels, setShowDataLabels, includeVAT, setInc
</div>
)}
{filters.museum === 'all' && (
{filters.museum.length === 0 && (
<div className="chart-card half-width">
<ExportableChart filename="revenue-by-museum" title={t('dashboard.revenueByMuseum')} className="chart-container">
<Bar data={museumData.revenue} options={baseOptions} />
@@ -634,7 +645,7 @@ function Dashboard({ data, showDataLabels, setShowDataLabels, includeVAT, setInc
</div>
</div>
{filters.museum === 'all' && (
{filters.museum.length === 0 && (
<div className="carousel-slide">
<div className="chart-card">
<h2>{t('dashboard.visitorsByMuseum')}</h2>
@@ -645,7 +656,7 @@ function Dashboard({ data, showDataLabels, setShowDataLabels, includeVAT, setInc
</div>
)}
{filters.museum === 'all' && (
{filters.museum.length === 0 && (
<div className="carousel-slide">
<div className="chart-card">
<h2>{t('dashboard.revenueByMuseum')}</h2>