M2-T09: build data visualization UI (heatmap map as home page)
- self-contained RecordsMap (only module importing leaflet/react-leaflet/ leaflet.heat/leaflet.markercluster); OSM tiles, swappable behind clean props - heatmap layers for location + poo (primary); time-range selector fetches only the window (locations server-filtered; poo client-filtered) - toggleable scatter layer with marker clustering; point-select reuses T10's edit/delete modals + hooks; query-key prefixes refresh map on mutation - pure map logic isolated + unit-tested; leaflet mocked in component tests - responsive layout; typed client only
This commit is contained in:
@@ -0,0 +1,246 @@
|
||||
/**
|
||||
* ScatterLayer unit test — M2-T09 REWORK 1.
|
||||
*
|
||||
* This test exercises the REAL ScatterLayer code path (not a wholesale RecordsMap mock).
|
||||
* It verifies that ScatterLayer uses the imported leaflet namespace (L.markerClusterGroup)
|
||||
* rather than window.L / globalThis.L, which would silently fail in Vite ESM bundles.
|
||||
*
|
||||
* The test:
|
||||
* - mocks react-leaflet's useMap() to return a fake map object
|
||||
* - provides a mock markerClusterGroup spy via the leaflet module mock
|
||||
* - renders ScatterLayer with some points
|
||||
* - asserts that L.markerClusterGroup was called (i.e. the import path is used)
|
||||
* - asserts that addLayer was called for each point
|
||||
* - asserts that clicking a marker invokes onSelectLocation / onSelectPoo
|
||||
*/
|
||||
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest'
|
||||
import { render } from '@testing-library/react'
|
||||
import type { ReactNode } from 'react'
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Use vi.hoisted() to define mocks that are referenced inside vi.mock factories.
|
||||
// vi.mock() factories are hoisted to the top of the file, so any variables they
|
||||
// reference must also be hoisted.
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
const { markerClusterGroupSpy, fakeAddLayer, fakeMapAddLayer, markerClickHandlers } =
|
||||
vi.hoisted(() => {
|
||||
const clickHandlers: Array<() => void> = []
|
||||
const fakeAddLayer = vi.fn()
|
||||
const fakeCluster = {
|
||||
addLayer: fakeAddLayer,
|
||||
addTo: vi.fn(),
|
||||
clearLayers: vi.fn(),
|
||||
}
|
||||
const markerClusterGroupSpy = vi.fn(() => fakeCluster)
|
||||
const fakeMapAddLayer = vi.fn()
|
||||
return { markerClusterGroupSpy, fakeAddLayer, fakeMapAddLayer, markerClickHandlers: clickHandlers }
|
||||
})
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Mock leaflet BEFORE importing ScatterLayer.
|
||||
// We use the hoisted spy so vi.mock factory can reference it safely.
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
vi.mock('leaflet', () => {
|
||||
const markerClusterGroupSpy_ = markerClusterGroupSpy
|
||||
const markerClickHandlers_ = markerClickHandlers
|
||||
|
||||
// Icon must be a real constructor (used as `new Icon(...)`)
|
||||
class FakeIcon {
|
||||
constructor(_opts: unknown) {}
|
||||
static Default = { prototype: {}, mergeOptions: vi.fn() }
|
||||
}
|
||||
|
||||
return {
|
||||
Icon: FakeIcon,
|
||||
DivIcon: vi.fn(function FakeDivIcon(_opts: unknown) { return {} }),
|
||||
heatLayer: vi.fn(() => ({ setLatLngs: vi.fn(), addTo: vi.fn() })),
|
||||
markerClusterGroup: markerClusterGroupSpy_,
|
||||
marker: vi.fn((_latlng: unknown, _opts: unknown) => {
|
||||
return {
|
||||
bindTooltip: vi.fn().mockReturnThis(),
|
||||
on: vi.fn((event: string, handler: () => void) => {
|
||||
if (event === 'click') {
|
||||
markerClickHandlers_.push(handler)
|
||||
}
|
||||
return { bindTooltip: vi.fn().mockReturnThis(), on: vi.fn().mockReturnThis() }
|
||||
}),
|
||||
}
|
||||
}),
|
||||
// `import * as L from 'leaflet'` in RecordsMap.tsx resolves to this module.
|
||||
// Vitest's module mock exposes all named exports as the namespace object,
|
||||
// so markerClusterGroup at the top level IS accessible as L.markerClusterGroup.
|
||||
default: {
|
||||
markerClusterGroup: markerClusterGroupSpy_,
|
||||
},
|
||||
}
|
||||
})
|
||||
|
||||
vi.mock('leaflet.heat', () => ({}))
|
||||
vi.mock('leaflet.markercluster', () => ({}))
|
||||
|
||||
// Mock image imports
|
||||
vi.mock('leaflet/dist/images/marker-icon-2x.png', () => ({ default: 'marker-icon-2x.png' }))
|
||||
vi.mock('leaflet/dist/images/marker-icon.png', () => ({ default: 'marker-icon.png' }))
|
||||
vi.mock('leaflet/dist/images/marker-shadow.png', () => ({ default: 'marker-shadow.png' }))
|
||||
|
||||
// Mock CSS imports
|
||||
vi.mock('leaflet/dist/leaflet.css', () => ({}))
|
||||
vi.mock('leaflet.markercluster/dist/MarkerCluster.css', () => ({}))
|
||||
vi.mock('leaflet.markercluster/dist/MarkerCluster.Default.css', () => ({}))
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Mock react-leaflet: MapContainer renders children, useMap returns fake map.
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
vi.mock('react-leaflet', () => ({
|
||||
MapContainer: ({ children }: { children: ReactNode }) => (
|
||||
<div data-testid="map-container">{children}</div>
|
||||
),
|
||||
TileLayer: () => null,
|
||||
useMap: () => ({
|
||||
addLayer: fakeMapAddLayer,
|
||||
removeLayer: vi.fn(),
|
||||
hasLayer: vi.fn(() => false),
|
||||
}),
|
||||
}))
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Import ScatterLayer AFTER mocks are set up.
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
import { ScatterLayer } from './RecordsMap'
|
||||
import type { LocationMapPoint, PooMapPoint } from './mapUtils'
|
||||
import type { LocationRecord, PooRecord } from '../records'
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Test data
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
const locationRecord: LocationRecord = {
|
||||
person: 'alice',
|
||||
datetime: '2026-01-15T10:00:00Z',
|
||||
latitude: 39.9,
|
||||
longitude: 116.4,
|
||||
altitude: null,
|
||||
}
|
||||
const locationPoints: LocationMapPoint[] = [
|
||||
{ lat: 39.9, lng: 116.4, record: locationRecord },
|
||||
]
|
||||
|
||||
const pooRecord: PooRecord = {
|
||||
timestamp: '2026-01-20T09:00:00Z',
|
||||
status: 'done',
|
||||
latitude: 39.91,
|
||||
longitude: 116.41,
|
||||
}
|
||||
const pooPoints: PooMapPoint[] = [
|
||||
{ lat: 39.91, lng: 116.41, record: pooRecord },
|
||||
]
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Tests
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
describe('ScatterLayer (real code path — not mocked RecordsMap)', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks()
|
||||
markerClickHandlers.length = 0
|
||||
})
|
||||
|
||||
it('calls L.markerClusterGroup (imported namespace) when showScatter=true', () => {
|
||||
render(
|
||||
<ScatterLayer
|
||||
locationScatterPoints={locationPoints}
|
||||
pooScatterPoints={[]}
|
||||
showScatter={true}
|
||||
onSelectLocation={vi.fn()}
|
||||
onSelectPoo={vi.fn()}
|
||||
/>,
|
||||
)
|
||||
|
||||
// KEY assertion: markerClusterGroup was called via the IMPORTED namespace.
|
||||
// With the old window.L / globalThis.L approach, this spy would never be
|
||||
// invoked because window.L is undefined in Vite ESM bundles.
|
||||
expect(markerClusterGroupSpy).toHaveBeenCalledOnce()
|
||||
expect(markerClusterGroupSpy).toHaveBeenCalledWith({
|
||||
maxClusterRadius: 50,
|
||||
showCoverageOnHover: false,
|
||||
})
|
||||
})
|
||||
|
||||
it('calls cluster group addLayer for each location and poo scatter point', () => {
|
||||
render(
|
||||
<ScatterLayer
|
||||
locationScatterPoints={locationPoints}
|
||||
pooScatterPoints={pooPoints}
|
||||
showScatter={true}
|
||||
onSelectLocation={vi.fn()}
|
||||
onSelectPoo={vi.fn()}
|
||||
/>,
|
||||
)
|
||||
|
||||
// One addLayer call per point (1 location + 1 poo = 2).
|
||||
expect(fakeAddLayer).toHaveBeenCalledTimes(2)
|
||||
// The cluster group itself must be added to the map.
|
||||
const fakeCluster = markerClusterGroupSpy.mock.results[0]?.value
|
||||
expect(fakeMapAddLayer).toHaveBeenCalledWith(fakeCluster)
|
||||
})
|
||||
|
||||
it('does NOT create cluster group when showScatter=false', () => {
|
||||
render(
|
||||
<ScatterLayer
|
||||
locationScatterPoints={locationPoints}
|
||||
pooScatterPoints={pooPoints}
|
||||
showScatter={false}
|
||||
onSelectLocation={vi.fn()}
|
||||
onSelectPoo={vi.fn()}
|
||||
/>,
|
||||
)
|
||||
|
||||
expect(markerClusterGroupSpy).not.toHaveBeenCalled()
|
||||
expect(fakeAddLayer).not.toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('invokes onSelectLocation when a location marker is clicked', () => {
|
||||
const onSelectLocation = vi.fn()
|
||||
|
||||
render(
|
||||
<ScatterLayer
|
||||
locationScatterPoints={locationPoints}
|
||||
pooScatterPoints={[]}
|
||||
showScatter={true}
|
||||
onSelectLocation={onSelectLocation}
|
||||
onSelectPoo={vi.fn()}
|
||||
/>,
|
||||
)
|
||||
|
||||
// At least one marker click handler should have been registered.
|
||||
expect(markerClickHandlers.length).toBeGreaterThan(0)
|
||||
// Simulate click on the first (location) marker.
|
||||
markerClickHandlers[0]()
|
||||
expect(onSelectLocation).toHaveBeenCalledOnce()
|
||||
expect(onSelectLocation).toHaveBeenCalledWith(locationRecord)
|
||||
})
|
||||
|
||||
it('invokes onSelectPoo when a poo marker is clicked', () => {
|
||||
const onSelectPoo = vi.fn()
|
||||
|
||||
render(
|
||||
<ScatterLayer
|
||||
locationScatterPoints={[]}
|
||||
pooScatterPoints={pooPoints}
|
||||
showScatter={true}
|
||||
onSelectLocation={vi.fn()}
|
||||
onSelectPoo={onSelectPoo}
|
||||
/>,
|
||||
)
|
||||
|
||||
expect(markerClickHandlers.length).toBeGreaterThan(0)
|
||||
markerClickHandlers[0]()
|
||||
expect(onSelectPoo).toHaveBeenCalledOnce()
|
||||
expect(onSelectPoo).toHaveBeenCalledWith(pooRecord)
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,263 @@
|
||||
/**
|
||||
* RecordsMap — self-contained Leaflet map component (M2-T09).
|
||||
*
|
||||
* THIS IS THE ONLY MODULE IN THE APP THAT IMPORTS LEAFLET / REACT-LEAFLET.
|
||||
* All data fetching and state lives outside; this component receives typed props.
|
||||
*/
|
||||
|
||||
import { useEffect, useRef, useCallback } from 'react'
|
||||
import { MapContainer, TileLayer, useMap } from 'react-leaflet'
|
||||
import * as L from 'leaflet'
|
||||
import {
|
||||
Icon,
|
||||
DivIcon,
|
||||
marker as leafletMarker,
|
||||
heatLayer as leafletHeatLayer,
|
||||
type HeatLayer,
|
||||
} from 'leaflet'
|
||||
|
||||
// Leaflet CSS — must be imported once; this component is the single place.
|
||||
import 'leaflet/dist/leaflet.css'
|
||||
import 'leaflet.markercluster/dist/MarkerCluster.css'
|
||||
import 'leaflet.markercluster/dist/MarkerCluster.Default.css'
|
||||
|
||||
// Side-effect imports (augment L with heatLayer and markerClusterGroup)
|
||||
import 'leaflet.heat'
|
||||
import 'leaflet.markercluster'
|
||||
|
||||
import type { HeatPoint, LocationMapPoint, PooMapPoint } from './mapUtils'
|
||||
import type { LocationRecord, PooRecord } from '../records'
|
||||
|
||||
// Fix default Leaflet marker icon paths broken by Vite asset handling.
|
||||
import markerIcon2x from 'leaflet/dist/images/marker-icon-2x.png'
|
||||
import markerIcon from 'leaflet/dist/images/marker-icon.png'
|
||||
import markerShadow from 'leaflet/dist/images/marker-shadow.png'
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
delete (Icon.Default.prototype as any)._getIconUrl
|
||||
Icon.Default.mergeOptions({
|
||||
iconRetinaUrl: markerIcon2x,
|
||||
iconUrl: markerIcon,
|
||||
shadowUrl: markerShadow,
|
||||
})
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Props
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export interface RecordsMapProps {
|
||||
locationHeatPoints: HeatPoint[]
|
||||
pooHeatPoints: HeatPoint[]
|
||||
locationScatterPoints: LocationMapPoint[]
|
||||
pooScatterPoints: PooMapPoint[]
|
||||
|
||||
showLocationHeat: boolean
|
||||
showPooHeat: boolean
|
||||
showScatter: boolean
|
||||
|
||||
onSelectLocation?: (record: LocationRecord) => void
|
||||
onSelectPoo?: (record: PooRecord) => void
|
||||
|
||||
/** Map container height (CSS value). Default: '100%'. */
|
||||
height?: string
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Inner child: Heat layers (uses useMap hook — must be inside MapContainer)
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
interface HeatLayerChildProps {
|
||||
locationHeatPoints: HeatPoint[]
|
||||
pooHeatPoints: HeatPoint[]
|
||||
showLocationHeat: boolean
|
||||
showPooHeat: boolean
|
||||
}
|
||||
|
||||
function HeatLayers({
|
||||
locationHeatPoints,
|
||||
pooHeatPoints,
|
||||
showLocationHeat,
|
||||
showPooHeat,
|
||||
}: HeatLayerChildProps) {
|
||||
const map = useMap()
|
||||
const locationLayerRef = useRef<HeatLayer | null>(null)
|
||||
const pooLayerRef = useRef<HeatLayer | null>(null)
|
||||
|
||||
// Location heat layer
|
||||
useEffect(() => {
|
||||
if (!locationLayerRef.current) {
|
||||
locationLayerRef.current = leafletHeatLayer([], {
|
||||
radius: 20,
|
||||
blur: 15,
|
||||
maxZoom: 17,
|
||||
gradient: { 0.4: 'blue', 0.65: 'lime', 1: 'red' },
|
||||
})
|
||||
}
|
||||
const layer = locationLayerRef.current
|
||||
layer.setLatLngs(locationHeatPoints)
|
||||
if (showLocationHeat) {
|
||||
if (!map.hasLayer(layer)) map.addLayer(layer)
|
||||
} else {
|
||||
if (map.hasLayer(layer)) map.removeLayer(layer)
|
||||
}
|
||||
return () => {
|
||||
if (map.hasLayer(layer)) map.removeLayer(layer)
|
||||
}
|
||||
}, [map, locationHeatPoints, showLocationHeat])
|
||||
|
||||
// Poo heat layer
|
||||
useEffect(() => {
|
||||
if (!pooLayerRef.current) {
|
||||
pooLayerRef.current = leafletHeatLayer([], {
|
||||
radius: 25,
|
||||
blur: 18,
|
||||
maxZoom: 17,
|
||||
gradient: { 0.4: 'yellow', 0.65: 'orange', 1: '#8B4513' },
|
||||
})
|
||||
}
|
||||
const layer = pooLayerRef.current
|
||||
layer.setLatLngs(pooHeatPoints)
|
||||
if (showPooHeat) {
|
||||
if (!map.hasLayer(layer)) map.addLayer(layer)
|
||||
} else {
|
||||
if (map.hasLayer(layer)) map.removeLayer(layer)
|
||||
}
|
||||
return () => {
|
||||
if (map.hasLayer(layer)) map.removeLayer(layer)
|
||||
}
|
||||
}, [map, pooHeatPoints, showPooHeat])
|
||||
|
||||
return null
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Inner child: Scatter / cluster layer
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
interface ScatterLayerChildProps {
|
||||
locationScatterPoints: LocationMapPoint[]
|
||||
pooScatterPoints: PooMapPoint[]
|
||||
showScatter: boolean
|
||||
onSelectLocation?: (record: LocationRecord) => void
|
||||
onSelectPoo?: (record: PooRecord) => void
|
||||
}
|
||||
|
||||
const locationIcon = new Icon({
|
||||
iconUrl: markerIcon,
|
||||
iconRetinaUrl: markerIcon2x,
|
||||
shadowUrl: markerShadow,
|
||||
iconSize: [25, 41],
|
||||
iconAnchor: [12, 41],
|
||||
popupAnchor: [1, -34],
|
||||
shadowSize: [41, 41],
|
||||
})
|
||||
|
||||
const pooIcon = new DivIcon({
|
||||
html: '<div style="font-size:20px;line-height:1;">💩</div>',
|
||||
className: '',
|
||||
iconSize: [24, 24],
|
||||
iconAnchor: [12, 12],
|
||||
})
|
||||
|
||||
export function ScatterLayer({
|
||||
locationScatterPoints,
|
||||
pooScatterPoints,
|
||||
showScatter,
|
||||
onSelectLocation,
|
||||
onSelectPoo,
|
||||
}: ScatterLayerChildProps) {
|
||||
const map = useMap()
|
||||
const clusterGroupRef = useRef<L.MarkerClusterGroup | null>(null)
|
||||
|
||||
const rebuild = useCallback(() => {
|
||||
if (clusterGroupRef.current) {
|
||||
map.removeLayer(clusterGroupRef.current)
|
||||
clusterGroupRef.current = null
|
||||
}
|
||||
if (!showScatter) return
|
||||
|
||||
// markerClusterGroup is augmented onto the imported L namespace by the
|
||||
// leaflet.markercluster side-effect import above. Using the imported
|
||||
// namespace (not window.L) is what works in Vite ESM bundles.
|
||||
const group = L.markerClusterGroup({ maxClusterRadius: 50, showCoverageOnHover: false })
|
||||
|
||||
for (const pt of locationScatterPoints) {
|
||||
const m = leafletMarker([pt.lat, pt.lng], { icon: locationIcon })
|
||||
m.bindTooltip(`${pt.record.person}<br/>${pt.record.datetime}`, { sticky: true })
|
||||
if (onSelectLocation) m.on('click', () => onSelectLocation(pt.record))
|
||||
group.addLayer(m)
|
||||
}
|
||||
|
||||
for (const pt of pooScatterPoints) {
|
||||
const m = leafletMarker([pt.lat, pt.lng], { icon: pooIcon })
|
||||
m.bindTooltip(`${pt.record.timestamp}<br/>${pt.record.status}`, { sticky: true })
|
||||
if (onSelectPoo) m.on('click', () => onSelectPoo(pt.record))
|
||||
group.addLayer(m)
|
||||
}
|
||||
|
||||
map.addLayer(group)
|
||||
clusterGroupRef.current = group
|
||||
}, [map, locationScatterPoints, pooScatterPoints, showScatter, onSelectLocation, onSelectPoo])
|
||||
|
||||
useEffect(() => {
|
||||
rebuild()
|
||||
return () => {
|
||||
if (clusterGroupRef.current) {
|
||||
map.removeLayer(clusterGroupRef.current)
|
||||
clusterGroupRef.current = null
|
||||
}
|
||||
}
|
||||
}, [rebuild, map])
|
||||
|
||||
return null
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Public component
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
/** Default map center: Beijing area. */
|
||||
const DEFAULT_CENTER: [number, number] = [39.9, 116.4]
|
||||
const DEFAULT_ZOOM = 11
|
||||
|
||||
export function RecordsMap({
|
||||
locationHeatPoints,
|
||||
pooHeatPoints,
|
||||
locationScatterPoints,
|
||||
pooScatterPoints,
|
||||
showLocationHeat,
|
||||
showPooHeat,
|
||||
showScatter,
|
||||
onSelectLocation,
|
||||
onSelectPoo,
|
||||
height = '100%',
|
||||
}: RecordsMapProps) {
|
||||
return (
|
||||
<MapContainer
|
||||
center={DEFAULT_CENTER}
|
||||
zoom={DEFAULT_ZOOM}
|
||||
style={{ height, width: '100%' }}
|
||||
data-testid="records-map"
|
||||
>
|
||||
<TileLayer
|
||||
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
||||
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
||||
/>
|
||||
|
||||
<HeatLayers
|
||||
locationHeatPoints={locationHeatPoints}
|
||||
pooHeatPoints={pooHeatPoints}
|
||||
showLocationHeat={showLocationHeat}
|
||||
showPooHeat={showPooHeat}
|
||||
/>
|
||||
|
||||
<ScatterLayer
|
||||
locationScatterPoints={locationScatterPoints}
|
||||
pooScatterPoints={pooScatterPoints}
|
||||
showScatter={showScatter}
|
||||
onSelectLocation={onSelectLocation}
|
||||
onSelectPoo={onSelectPoo}
|
||||
/>
|
||||
</MapContainer>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
/**
|
||||
* Public surface of the map module (M2-T09).
|
||||
* Only RecordsMap.tsx imports leaflet — external code should not.
|
||||
*/
|
||||
export { RecordsMap } from './RecordsMap'
|
||||
export type { RecordsMapProps } from './RecordsMap'
|
||||
|
||||
export {
|
||||
locationsToHeatPoints,
|
||||
pooToHeatPoints,
|
||||
locationsToMapPoints,
|
||||
pooToMapPoints,
|
||||
filterPooByTimeWindow,
|
||||
daysAgoISO,
|
||||
nowISO,
|
||||
computeCenter,
|
||||
} from './mapUtils'
|
||||
export type { HeatPoint, LocationMapPoint, PooMapPoint } from './mapUtils'
|
||||
Vendored
+40
@@ -0,0 +1,40 @@
|
||||
/**
|
||||
* Ambient type declarations for leaflet.heat (no @types package available).
|
||||
*
|
||||
* This file must be a MODULE (has a top-level export) so that `declare module 'leaflet'`
|
||||
* is treated as an AUGMENTATION of the existing leaflet types, not a replacement.
|
||||
* Without the export, the `declare module 'leaflet'` block would shadow all of @types/leaflet.
|
||||
*/
|
||||
|
||||
// This empty export makes the file a module, enabling proper augmentation semantics.
|
||||
export {}
|
||||
|
||||
// Augment the 'leaflet' module to add heatLayer and HeatLayer types.
|
||||
declare module 'leaflet' {
|
||||
type HeatLatLngTuple = [number, number] | [number, number, number]
|
||||
|
||||
interface HeatLayerOptions {
|
||||
minOpacity?: number
|
||||
maxZoom?: number
|
||||
max?: number
|
||||
radius?: number
|
||||
blur?: number
|
||||
gradient?: Record<number, string>
|
||||
}
|
||||
|
||||
class HeatLayer extends Layer {
|
||||
setLatLngs(latlngs: HeatLatLngTuple[]): this
|
||||
addLatLng(latlng: HeatLatLngTuple): this
|
||||
setOptions(options: HeatLayerOptions): this
|
||||
redraw(): this
|
||||
}
|
||||
|
||||
function heatLayer(latlngs: HeatLatLngTuple[], options?: HeatLayerOptions): HeatLayer
|
||||
}
|
||||
|
||||
// Declare leaflet.heat as a side-effect-only module.
|
||||
declare module 'leaflet.heat' {
|
||||
// Side-effect: augments the Leaflet global with the heatLayer plugin.
|
||||
const _: undefined
|
||||
export default _
|
||||
}
|
||||
@@ -0,0 +1,196 @@
|
||||
/**
|
||||
* Unit tests for mapUtils.ts — pure logic, no leaflet, runs in jsdom.
|
||||
*/
|
||||
|
||||
import { describe, it, expect } from 'vitest'
|
||||
import {
|
||||
locationsToHeatPoints,
|
||||
pooToHeatPoints,
|
||||
locationsToMapPoints,
|
||||
pooToMapPoints,
|
||||
filterPooByTimeWindow,
|
||||
computeCenter,
|
||||
daysAgoISO,
|
||||
} from './mapUtils'
|
||||
import type { LocationRecord, PooRecord } from '../records'
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Fixtures
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
const loc1: LocationRecord = {
|
||||
person: 'alice',
|
||||
datetime: '2026-01-15T10:00:00Z',
|
||||
latitude: 39.9,
|
||||
longitude: 116.4,
|
||||
altitude: 50,
|
||||
}
|
||||
const loc2: LocationRecord = {
|
||||
person: 'alice',
|
||||
datetime: '2026-01-20T12:00:00Z',
|
||||
latitude: 39.95,
|
||||
longitude: 116.45,
|
||||
altitude: null,
|
||||
}
|
||||
|
||||
const poo1: PooRecord = {
|
||||
timestamp: '2026-01-10T08:00:00Z',
|
||||
status: 'done',
|
||||
latitude: 39.91,
|
||||
longitude: 116.41,
|
||||
}
|
||||
const poo2: PooRecord = {
|
||||
timestamp: '2026-01-20T09:00:00Z',
|
||||
status: 'done',
|
||||
latitude: 39.92,
|
||||
longitude: 116.42,
|
||||
}
|
||||
const poo3: PooRecord = {
|
||||
timestamp: '2026-02-01T09:00:00Z',
|
||||
status: 'done',
|
||||
latitude: 39.93,
|
||||
longitude: 116.43,
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// locationsToHeatPoints
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
describe('locationsToHeatPoints', () => {
|
||||
it('converts records to [lat, lng, 1] tuples', () => {
|
||||
const pts = locationsToHeatPoints([loc1, loc2])
|
||||
expect(pts).toHaveLength(2)
|
||||
expect(pts[0]).toEqual([39.9, 116.4, 1])
|
||||
expect(pts[1]).toEqual([39.95, 116.45, 1])
|
||||
})
|
||||
|
||||
it('returns empty array for empty input', () => {
|
||||
expect(locationsToHeatPoints([])).toEqual([])
|
||||
})
|
||||
})
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// pooToHeatPoints
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
describe('pooToHeatPoints', () => {
|
||||
it('converts poo records to heat points', () => {
|
||||
const pts = pooToHeatPoints([poo1])
|
||||
expect(pts).toHaveLength(1)
|
||||
expect(pts[0]).toEqual([39.91, 116.41, 1])
|
||||
})
|
||||
})
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// locationsToMapPoints
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
describe('locationsToMapPoints', () => {
|
||||
it('attaches original record to each point', () => {
|
||||
const pts = locationsToMapPoints([loc1])
|
||||
expect(pts).toHaveLength(1)
|
||||
expect(pts[0].lat).toBe(39.9)
|
||||
expect(pts[0].lng).toBe(116.4)
|
||||
expect(pts[0].record).toBe(loc1)
|
||||
})
|
||||
})
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// pooToMapPoints
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
describe('pooToMapPoints', () => {
|
||||
it('attaches original poo record to each point', () => {
|
||||
const pts = pooToMapPoints([poo1])
|
||||
expect(pts[0].record).toBe(poo1)
|
||||
})
|
||||
})
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// filterPooByTimeWindow — client-side time filter
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
describe('filterPooByTimeWindow', () => {
|
||||
const records = [poo1, poo2, poo3]
|
||||
// timestamps: 2026-01-10, 2026-01-20, 2026-02-01
|
||||
|
||||
it('returns all records when start and end are both null', () => {
|
||||
expect(filterPooByTimeWindow(records, null, null)).toHaveLength(3)
|
||||
})
|
||||
|
||||
it('filters by start (inclusive)', () => {
|
||||
const result = filterPooByTimeWindow(records, '2026-01-15T00:00:00Z', null)
|
||||
expect(result).toHaveLength(2)
|
||||
expect(result.map((r) => r.timestamp)).toContain('2026-01-20T09:00:00Z')
|
||||
expect(result.map((r) => r.timestamp)).toContain('2026-02-01T09:00:00Z')
|
||||
})
|
||||
|
||||
it('filters by end (inclusive)', () => {
|
||||
const result = filterPooByTimeWindow(records, null, '2026-01-20T09:00:00Z')
|
||||
expect(result).toHaveLength(2)
|
||||
expect(result.map((r) => r.timestamp)).toContain('2026-01-10T08:00:00Z')
|
||||
expect(result.map((r) => r.timestamp)).toContain('2026-01-20T09:00:00Z')
|
||||
})
|
||||
|
||||
it('filters by both start and end', () => {
|
||||
const result = filterPooByTimeWindow(
|
||||
records,
|
||||
'2026-01-15T00:00:00Z',
|
||||
'2026-01-25T00:00:00Z',
|
||||
)
|
||||
expect(result).toHaveLength(1)
|
||||
expect(result[0].timestamp).toBe('2026-01-20T09:00:00Z')
|
||||
})
|
||||
|
||||
it('returns empty when no records match', () => {
|
||||
const result = filterPooByTimeWindow(records, '2027-01-01T00:00:00Z', null)
|
||||
expect(result).toHaveLength(0)
|
||||
})
|
||||
|
||||
it('includes records exactly at start boundary', () => {
|
||||
const result = filterPooByTimeWindow(records, '2026-01-10T08:00:00Z', null)
|
||||
expect(result.map((r) => r.timestamp)).toContain('2026-01-10T08:00:00Z')
|
||||
})
|
||||
|
||||
it('includes records exactly at end boundary', () => {
|
||||
const result = filterPooByTimeWindow(records, null, '2026-02-01T09:00:00Z')
|
||||
expect(result.map((r) => r.timestamp)).toContain('2026-02-01T09:00:00Z')
|
||||
})
|
||||
})
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// computeCenter
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
describe('computeCenter', () => {
|
||||
it('returns null for empty array', () => {
|
||||
expect(computeCenter([])).toBeNull()
|
||||
})
|
||||
|
||||
it('returns the point for a single-element array', () => {
|
||||
const result = computeCenter([{ lat: 10, lng: 20 }])
|
||||
expect(result).toEqual([10, 20])
|
||||
})
|
||||
|
||||
it('returns the average of multiple points', () => {
|
||||
const result = computeCenter([
|
||||
{ lat: 0, lng: 0 },
|
||||
{ lat: 4, lng: 6 },
|
||||
])
|
||||
expect(result).toEqual([2, 3])
|
||||
})
|
||||
})
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// daysAgoISO
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
describe('daysAgoISO', () => {
|
||||
it('returns a valid ISO string in the past', () => {
|
||||
const result = daysAgoISO(7)
|
||||
expect(typeof result).toBe('string')
|
||||
const d = new Date(result)
|
||||
expect(isNaN(d.getTime())).toBe(false)
|
||||
expect(d.getTime()).toBeLessThan(Date.now())
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,104 @@
|
||||
/**
|
||||
* Pure data-transform utilities for the map view (M2-T09).
|
||||
* No leaflet imports — these functions are unit-testable in jsdom.
|
||||
*/
|
||||
|
||||
import type { LocationRecord, PooRecord } from '../records'
|
||||
|
||||
/** A heat point for L.heatLayer: [lat, lng, intensity]. */
|
||||
export type HeatPoint = [number, number, number]
|
||||
|
||||
/** Map point with attached source record for click-to-edit. */
|
||||
export interface LocationMapPoint {
|
||||
lat: number
|
||||
lng: number
|
||||
record: LocationRecord
|
||||
}
|
||||
|
||||
export interface PooMapPoint {
|
||||
lat: number
|
||||
lng: number
|
||||
record: PooRecord
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Transforms
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Convert location records to heat points.
|
||||
* All points get intensity=1; callers can adjust if needed.
|
||||
*/
|
||||
export function locationsToHeatPoints(records: LocationRecord[]): HeatPoint[] {
|
||||
return records.map((r) => [r.latitude, r.longitude, 1])
|
||||
}
|
||||
|
||||
/**
|
||||
* Convert poo records to heat points.
|
||||
*/
|
||||
export function pooToHeatPoints(records: PooRecord[]): HeatPoint[] {
|
||||
return records.map((r) => [r.latitude, r.longitude, 1])
|
||||
}
|
||||
|
||||
/**
|
||||
* Convert location records to map points (for scatter layer).
|
||||
*/
|
||||
export function locationsToMapPoints(records: LocationRecord[]): LocationMapPoint[] {
|
||||
return records.map((r) => ({ lat: r.latitude, lng: r.longitude, record: r }))
|
||||
}
|
||||
|
||||
/**
|
||||
* Convert poo records to map points (for scatter layer).
|
||||
*/
|
||||
export function pooToMapPoints(records: PooRecord[]): PooMapPoint[] {
|
||||
return records.map((r) => ({ lat: r.latitude, lng: r.longitude, record: r }))
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Client-side time-window filter (for poo records — the endpoint has no server filter)
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Filter poo records to those whose timestamp falls within [start, end] (inclusive).
|
||||
* start and end are ISO8601 strings (e.g. "2026-01-01T00:00:00Z").
|
||||
* If start or end is null, that bound is open (no filtering on that side).
|
||||
*/
|
||||
export function filterPooByTimeWindow(
|
||||
records: PooRecord[],
|
||||
start: string | null,
|
||||
end: string | null,
|
||||
): PooRecord[] {
|
||||
if (!start && !end) return records
|
||||
return records.filter((r) => {
|
||||
const ts = r.timestamp
|
||||
if (start && ts < start) return false
|
||||
if (end && ts > end) return false
|
||||
return true
|
||||
})
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Default time window helpers
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
/** Returns ISO8601 string for N days ago from now (UTC). */
|
||||
export function daysAgoISO(days: number): string {
|
||||
const d = new Date()
|
||||
d.setUTCDate(d.getUTCDate() - days)
|
||||
return d.toISOString()
|
||||
}
|
||||
|
||||
/** Returns ISO8601 string for now (UTC). */
|
||||
export function nowISO(): string {
|
||||
return new Date().toISOString()
|
||||
}
|
||||
|
||||
/** Compute a bounding center from an array of lat/lng points. Returns null if empty. */
|
||||
export function computeCenter(
|
||||
points: Array<{ lat: number; lng: number }>,
|
||||
): [number, number] | null {
|
||||
if (points.length === 0) return null
|
||||
const sumLat = points.reduce((s, p) => s + p.lat, 0)
|
||||
const sumLng = points.reduce((s, p) => s + p.lng, 0)
|
||||
return [sumLat / points.length, sumLng / points.length]
|
||||
}
|
||||
Reference in New Issue
Block a user