diff --git a/src/components/StatisticsFilterMap.tsx b/src/components/StatisticsFilterMap.tsx new file mode 100644 index 0000000..d6e9981 --- /dev/null +++ b/src/components/StatisticsFilterMap.tsx @@ -0,0 +1,94 @@ +import { LatLngBoundsLiteral, LatLngTuple } from 'leaflet' +import { MapContainer, TileLayer, useMap } from 'react-leaflet' +import ZoomControl from '@/components/controls/ZoomControl' +import IncidentLayer from '@/components/layers/IncidentLayer' +import { DB, Incident, MarkerFilters } from '@/types' +import { useLocation } from 'react-router-dom' +import { useEffect } from 'react' +import { INITIAL_BOUNDS, INITIAL_ZOOM } from '@/constants' + +interface StatisticsFilterMapProps { + data: DB + incidents: [string, Incident][] +} + +function SetInitialBounds() { + const location = useLocation() + const map = useMap() + const coordinates = location.state?.coord + useEffect(() => { + if (coordinates) { + // If coordinates are provided, zoom to that location + const coords: LatLngTuple = [coordinates.lat, coordinates.lng] + map.setView(coords, 15) + } else { + // Otherwise, set to the default + map.setView(INITIAL_BOUNDS, INITIAL_ZOOM) + } + }, [coordinates]) + return null +} + +export default function StatisticsFilterMap({ data, incidents }: StatisticsFilterMapProps) { + const apiKey = import.meta.env.VITE_STADIA_KEY + const maxBounds: LatLngBoundsLiteral = [ + // Southwest coordinate + [-90, -180], + // Northeast coordinate + [90, 180], + ] + const filters: MarkerFilters = { + hideCategories: [], + hideTypes: [], + startYear: null, + endYear: null, + hideCountries: [], + hideDepartments: [], + hideMunicipalities: [], + } + + // Create a shallow copy of the database and inject filtered incidents into it + const filteredData: DB = { Types: {}, Categories: {}, Incidents: {}, filterBounds: { minYear: 0, maxYear: 0, locations: {} } } + Object.assign(filteredData, data) + filteredData.Incidents = Object.fromEntries(incidents) + + // HACK: The height modifier is a little ugly to prevent the map from overflowing the screen at the bottom. Is there a better way to do this? + return ( +
+ + + {}} + ref={null} + isAdmin={false} + tmpLocation={null} + setTmpLocation={() => {}} + tmpSelected={false} + filters={filters} + editID={null} + /> + {}} /> + + +
+ ) +} diff --git a/src/pages/StatsDashboard.tsx b/src/pages/StatsDashboard.tsx index 31b2234..1b3c10c 100644 --- a/src/pages/StatsDashboard.tsx +++ b/src/pages/StatsDashboard.tsx @@ -1,10 +1,11 @@ // StatsDashboard.tsx import { DB, Incident } from 'types' -import React, { useMemo, useReducer } from 'react' +import React, { useMemo, useReducer, useState } from 'react' import IncidentTable from '@/components/IncidentTable' import StatisticsFilterBar from '@/components/StatisticsFilterBar' import { calculateBounds } from '@/utils' import DummyGraph from '@/components/graphs/DummyGraph' +import StatisticsFilterMap from '@/components/StatisticsFilterMap' export type filterDispatchType = { type: 'ADD_FILTER' | 'REMOVE_FILTER' | 'UPDATE_FILTER'; payload: Partial } @@ -61,6 +62,7 @@ const filterReducer = (state: filterState, action: filterDispatchType) => { } const StatsDashboard: React.FC = ({ data }) => { + const [isShowingMap, setIsShowingMap] = useState(false) const incidents: [string, Incident][] = Object.entries(data.Incidents) const [filters, dispatchFilters] = useReducer(filterReducer, { index: 0, filters: [] }) const filteredIncidents = useMemo(() => { @@ -69,15 +71,26 @@ const StatsDashboard: React.FC = ({ data }) => { const filteredBounds = calculateBounds(Object.fromEntries(filteredIncidents)) return ( -
-

Estadísticas

- -
- - - +
+
+

Estadísticas

+
- + + {isShowingMap ? ( + + ) : ( + <> +
+ + + +
+ + + )}
) }