refactor: optimize crime analytics hook and improve filtering logic

This commit is contained in:
vergiLgood1 2025-05-15 12:35:47 +07:00
parent 4590e21c39
commit c3eeb4051e
3 changed files with 25 additions and 13 deletions

View File

@ -30,9 +30,8 @@ export function useCrimeAnalytics(crimes: ICrimes[]) {
availableMonths: [] as string[], availableMonths: [] as string[],
}; };
let filteredCrimes = [...crimes]; // Use the already filtered crimes directly, don't filter them again
const crimeIncidents = crimes.flatMap((crime: ICrimes) =>
const crimeIncidents = filteredCrimes.flatMap((crime: ICrimes) =>
crime.crime_incidents.map((incident) => ({ crime.crime_incidents.map((incident) => ({
id: incident.id, id: incident.id,
timestamp: incident.timestamp, timestamp: incident.timestamp,
@ -43,6 +42,8 @@ export function useCrimeAnalytics(crimes: ICrimes[]) {
address: incident.locations.address, address: incident.locations.address,
latitude: incident.locations.latitude, latitude: incident.locations.latitude,
longitude: incident.locations.longitude, longitude: incident.locations.longitude,
district_id: crime.district_id,
district_name: crime.districts?.name || 'Unknown'
})) }))
); );
@ -86,11 +87,12 @@ export function useCrimeAnalytics(crimes: ICrimes[]) {
{} as Record<string, number> {} as Record<string, number>
); );
const districts = filteredCrimes.reduce( // Count by district name from the incidents, not from crimes anymore
(acc: Record<string, number>, crime: ICrimes) => { // since crimes are already filtered
const districtName = crime.districts.name || 'Unknown'; const districts = crimeIncidents.reduce(
acc[districtName] = (acc: Record<string, number>, incident) => {
(acc[districtName] || 0) + (crime.number_of_crime || 0); const districtName = incident.district_name || 'Unknown';
acc[districtName] = (acc[districtName] || 0) + 1;
return acc; return acc;
}, },
{} as Record<string, number> {} as Record<string, number>

View File

@ -1,6 +1,6 @@
"use client"; "use client";
import React, { useEffect, useState } from "react"; import React, { useEffect, useMemo, useState } from "react";
import { import {
AlertTriangle, AlertTriangle,
Calendar, Calendar,

View File

@ -151,7 +151,7 @@ export default function CrimeMap() {
}, [crimes, selectedSourceType]); }, [crimes, selectedSourceType]);
const filteredByYearAndMonth = useMemo(() => { const filteredByYearAndMonth = useMemo(() => {
if (!crimesBySourceType) return []; if (!crimesBySourceType || crimesBySourceType.length === 0) return [];
if (useAllYears) { if (useAllYears) {
if (useAllMonths) { if (useAllMonths) {
@ -183,7 +183,8 @@ export default function CrimeMap() {
]); ]);
const filteredCrimes = useMemo(() => { const filteredCrimes = useMemo(() => {
if (!filteredByYearAndMonth) return []; if (!filteredByYearAndMonth || filteredByYearAndMonth.length === 0)
return [];
if (selectedCategory === "all") return filteredByYearAndMonth; if (selectedCategory === "all") return filteredByYearAndMonth;
return filteredByYearAndMonth.map((crime) => { return filteredByYearAndMonth.map((crime) => {
@ -345,7 +346,16 @@ export default function CrimeMap() {
setShowEWS(true); setShowEWS(true);
}; };
// const showTimelineLayer = activeControl === "timeline"; useEffect(() => {
console.log(`Current source type: ${selectedSourceType}`);
console.log(`Total crimes before filtering: ${crimes?.length || 0}`);
console.log(
`Total crimes after source type filtering: ${crimesBySourceType.length}`,
);
console.log(
`Total crimes after all filtering: ${filteredCrimes.length}`,
);
}, [crimes, crimesBySourceType, filteredCrimes, selectedSourceType]);
return ( return (
<Card className="w-full p-0 border-none shadow-none h-96"> <Card className="w-full p-0 border-none shadow-none h-96">
@ -475,7 +485,7 @@ export default function CrimeMap() {
selectedCategory={selectedCategory} selectedCategory={selectedCategory}
selectedYear={selectedYear} selectedYear={selectedYear}
selectedMonth={selectedMonth} selectedMonth={selectedMonth}
sourceType={selectedSourceType} // Pass the sourceType sourceType={selectedSourceType}
/> />
<div className="absolute bottom-20 right-0 z-20 p-2"> <div className="absolute bottom-20 right-0 z-20 p-2">