fix: area stats query on number columns with empty strings

src/app/map/[id]/components/AreaPopup.tsx

@@ -33,6 +33,7 @@ function WrappedAreaPopup({
 }) {
   const { viewConfig } = useMapViews();
   const choroplethDataSource = useChoroplethDataSource();
+  const [, setHoverArea] = useHoverArea();
 
   const areaStatsQuery = useAreaStats();
   const areaStats = areaStatsQuery.data;
@@ -104,6 +105,7 @@ function WrappedAreaPopup({
       longitude={coordinates[0]}
       latitude={coordinates[1]}
       closeButton={false}
+      onClose={() => setHoverArea(null)}
     >
       <div className="font-sans text-sm flex flex-col gap-2">
         <p className="font-semibold">{name}</p>

src/app/map/[id]/components/Choropleth/index.tsx

@@ -1,8 +1,8 @@
 import { Layer, Source } from "react-map-gl/mapbox";
-import { getMapStyle } from "@/app/map/[id]/context/MapContext";
 import { useChoropleth } from "@/app/map/[id]/hooks/useChoropleth";
 import { useMapViews } from "@/app/map/[id]/hooks/useMapViews";
 import { MapType } from "@/server/models/MapView";
+import { getMapStyle } from "../../utils/map";
 import { useChoroplethAreaStats } from "./useChoroplethAreaStats";
 
 export default function Choropleth() {

src/app/map/[id]/components/Map.tsx

@@ -4,10 +4,6 @@ import * as turf from "@turf/turf";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import MapGL from "react-map-gl/mapbox";
 import { v4 as uuidv4 } from "uuid";
-import {
-  getDataSourceIds,
-  getMapStyle,
-} from "@/app/map/[id]/context/MapContext";
 import { useMapBounds } from "@/app/map/[id]/hooks/useMapBounds";
 import { useMapConfig } from "@/app/map/[id]/hooks/useMapConfig";
 import { useMapViews } from "@/app/map/[id]/hooks/useMapViews";
@@ -26,6 +22,7 @@ import { useMapRef } from "../hooks/useMapCore";
 import { useMapHoverEffect } from "../hooks/useMapHover";
 import { useTurfMutations, useTurfState } from "../hooks/useTurfs";
 import { CONTROL_PANEL_WIDTH, mapColors } from "../styles";
+import { getDataSourceIds, getMapStyle } from "../utils/map";
 import AreaPopup from "./AreaPopup";
 import Choropleth from "./Choropleth";
 import { MAPBOX_SOURCE_IDS } from "./Choropleth/configs";

src/app/map/[id]/components/MapViews.tsx

@@ -20,7 +20,6 @@ import { CSS } from "@dnd-kit/utilities";
 import { Check, Layers, Plus, X } from "lucide-react";
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import { v4 as uuidv4 } from "uuid";
-import { createNewViewConfig } from "@/app/map/[id]/context/MapContext";
 import { useMapViews } from "@/app/map/[id]/hooks/useMapViews";
 import ContextMenuContentWithFocus from "@/components/ContextMenuContentWithFocus";
 import { Button } from "@/shadcn/ui/button";
@@ -35,12 +34,13 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "@/shadcn/ui/tooltip";
 import { cn } from "@/shadcn/utils";
 import { useMapId } from "../hooks/useMapCore";
 import { useDirtyViewIds, useSetViewId } from "../hooks/useMapViews";
+import { createNewViewConfig } from "../utils/mapView";
 import {
   compareByPositionAndId,
   getNewPositionAfter,
   getNewPositionBefore,
   sortByPositionAndId,
-} from "../utils";
+} from "../utils/position";
 import type { View } from "../types";
 import type { DragEndEvent } from "@dnd-kit/core";
 

src/app/map/[id]/components/controls/MarkersControl/MarkersList.tsx

@@ -34,7 +34,7 @@ import {
   getNewPositionAfter,
   getNewPositionBefore,
   sortByPositionAndId,
-} from "@/app/map/[id]/utils";
+} from "@/app/map/[id]/utils/position";
 import { useTRPC } from "@/services/trpc/react";
 import { LayerType } from "@/types";
 import { useMapId } from "../../../hooks/useMapCore";

src/app/map/[id]/components/controls/MarkersControl/SortableFolderItem.tsx

@@ -13,7 +13,7 @@ import {
 } from "lucide-react";
 import { useMemo, useState } from "react";
 
-import { sortByPositionAndId } from "@/app/map/[id]/utils";
+import { sortByPositionAndId } from "@/app/map/[id]/utils/position";
 import { ContextMenu } from "@/shadcn/ui/context-menu";
 import { cn } from "@/shadcn/utils";
 import { LayerType } from "@/types";

src/app/map/[id]/components/controls/MarkersControl/UnassignedFolder.tsx

@@ -4,7 +4,7 @@ import {
   verticalListSortingStrategy,
 } from "@dnd-kit/sortable";
 import { useMemo } from "react";
-import { sortByPositionAndId } from "@/app/map/[id]/utils";
+import { sortByPositionAndId } from "@/app/map/[id]/utils/position";
 import SortableMarkerItem from "./SortableMarkerItem";
 import type { Folder } from "@/server/models/Folder";
 import type { PlacedMarker } from "@/server/models/PlacedMarker";

src/app/map/[id]/components/controls/VisualisationPanel/VisualisationPanel.tsx

@@ -331,6 +331,26 @@ export default function VisualisationPanel({
                 </Select>
               </>
             )}
+
+          {viewConfig.calculationType !== CalculationType.Count &&
+            columnOneIsNumber && (
+              <>
+                <Label
+                  htmlFor="choropleth-empty-zero-switch"
+                  className="text-sm text-muted-foreground font-normal"
+                >
+                  Treat empty values as zero
+                </Label>
+
+                <Switch
+                  id="choropleth-empty-zero-switch"
+                  checked={Boolean(viewConfig.areaDataNullIsZero)}
+                  onCheckedChange={(v) =>
+                    updateViewConfig({ areaDataNullIsZero: v })
+                  }
+                />
+              </>
+            )}
         </div>
         {!viewConfig.areaDataSourceId && (
           <div className="flex items-center gap-2">

src/app/map/[id]/components/inspector/TurfMarkersList.tsx

@@ -1,7 +1,6 @@
 import { useQueries } from "@tanstack/react-query";
 import { useMemo } from "react";
 
-import { getDataSourceIds } from "@/app/map/[id]/context/MapContext";
 import { useDataSources } from "@/app/map/[id]/hooks/useDataSources";
 import { useFoldersQuery } from "@/app/map/[id]/hooks/useFolders";
 import { useInspector } from "@/app/map/[id]/hooks/useInspector";
@@ -11,6 +10,7 @@ import { DataSourceRecordType } from "@/server/models/DataSource";
 import { FilterType } from "@/server/models/MapView";
 import { useTRPC } from "@/services/trpc/react";
 import { buildName } from "@/utils/dataRecord";
+import { getDataSourceIds } from "../../utils/map";
 import {
   getMarkersInsidePolygon,
   groupPlacedMarkersByFolder,

src/app/map/[id]/data.ts

@@ -47,6 +47,7 @@ export const useAreaStats = () => {
     areaDataColumn: column,
     areaDataSecondaryColumn: secondaryColumn,
     areaDataSourceId: dataSourceId,
+    areaDataNullIsZero: nullIsZero,
     areaSetGroupCode,
   } = viewConfig;
 
@@ -106,6 +107,7 @@ export const useAreaStats = () => {
         dataSourceId,
         column: columnOrCount,
         secondaryColumn: secondaryColumn,
+        nullIsZero,
         excludeColumns,
         boundingBox: requiresBoundingBox ? boundingBox : null,
       },
@@ -121,6 +123,7 @@ export const useAreaStats = () => {
     dataSourceId,
     column,
     secondaryColumn,
+    nullIsZero,
     excludeColumns,
   ]);
 

src/app/map/[id]/hooks/useFolders.ts

@@ -5,7 +5,7 @@ import { useIsMutating } from "@tanstack/react-query";
 import { useCallback } from "react";
 import { toast } from "sonner";
 import { useTRPC } from "@/services/trpc/react";
-import { getNewLastPosition } from "../utils";
+import { getNewLastPosition } from "../utils/position";
 import { useMapId } from "./useMapCore";
 import { useMapQuery } from "./useMapQuery";
 import type { Folder } from "@/server/models/Folder";

src/app/map/[id]/hooks/useInitialMapView.ts

@@ -1,9 +1,9 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useEffect, useRef } from "react";
 import { v4 as uuidv4 } from "uuid";
-import { createNewViewConfig } from "@/app/map/[id]/context/MapContext";
 import { useTRPC } from "@/services/trpc/react";
-import { getNewLastPosition } from "../utils";
+import { createNewViewConfig } from "../utils/mapView";
+import { getNewLastPosition } from "../utils/position";
 import { useMapId } from "./useMapCore";
 import { useMapQuery } from "./useMapQuery";
 import { useViewIdAtom } from "./useMapViews";

src/app/map/[id]/hooks/useMapViews.ts

@@ -4,12 +4,12 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useAtom, useAtomValue, useSetAtom } from "jotai";
 import { useCallback, useContext, useMemo } from "react";
 import { toast } from "sonner";
-import { createNewViewConfig } from "@/app/map/[id]/context/MapContext";
 import { AreaSetGroupCode } from "@/server/models/AreaSet";
 import { MapType, type MapViewConfig } from "@/server/models/MapView";
 import { useTRPC } from "@/services/trpc/react";
 import { dirtyViewIdsAtom, viewIdAtom } from "../atoms/mapStateAtoms";
-import { getNewLastPosition } from "../utils";
+import { createNewViewConfig } from "../utils/mapView";
+import { getNewLastPosition } from "../utils/position";
 import { PublicMapContext } from "../view/[viewIdOrHost]/publish/context/PublicMapContext";
 import { useMapId } from "./useMapCore";
 import { useMapQuery } from "./useMapQuery";

src/app/map/[id]/hooks/useMarkerQueries.ts

@@ -2,9 +2,9 @@
 
 import { useQueries } from "@tanstack/react-query";
 import { useContext, useMemo } from "react";
-import { getDataSourceIds } from "@/app/map/[id]/context/MapContext";
 import { useMapConfig } from "@/app/map/[id]/hooks/useMapConfig";
 import { useMapViews } from "@/app/map/[id]/hooks/useMapViews";
+import { getDataSourceIds } from "../utils/map";
 import { PublicMapContext } from "../view/[viewIdOrHost]/publish/context/PublicMapContext";
 import type { MarkerFeatureWithoutDataSourceId } from "@/types";
 

src/app/map/[id]/hooks/usePlacedMarkers.ts

@@ -15,7 +15,7 @@ import {
   searchMarkerAtom,
   selectedPlacedMarkerIdAtom,
 } from "../atoms/markerAtoms";
-import { getNewLastPosition } from "../utils";
+import { getNewLastPosition } from "../utils/position";
 import { useSetPinDropMode } from "./useMapControls";
 import { useMapId, useMapRef } from "./useMapCore";
 import { useMapQuery } from "./useMapQuery";

src/app/map/[id]/utils/map.ts

@@ -0,0 +1,21 @@
+import { MapType } from "@/server/models/MapView";
+import mapStyles, { hexMapStyle } from "../styles";
+import type { MapConfig } from "@/server/models/Map";
+import type { MapViewConfig } from "@/server/models/MapView";
+
+export const getDataSourceIds = (mapConfig: MapConfig) => {
+  return new Set(
+    [mapConfig.membersDataSourceId]
+      .concat(mapConfig.markerDataSourceIds)
+      .filter(Boolean),
+  )
+    .values()
+    .toArray();
+};
+
+export const getMapStyle = (viewConfig: MapViewConfig) => {
+  if (viewConfig.mapType === MapType.Hex) {
+    return hexMapStyle;
+  }
+  return mapStyles[viewConfig.mapStyleName] || Object.values(mapStyles)[0];
+};

src/app/map/[id]/context/MapContext.tsx → src/app/map/[id]/utils/mapView.ts

@@ -2,16 +2,14 @@ import {
   CalculationType,
   ColorScheme,
   MapStyleName,
-  MapType,
 } from "@/server/models/MapView";
-import mapStyles, { hexMapStyle } from "../styles";
-import type { MapConfig } from "@/server/models/Map";
 import type { MapViewConfig } from "@/server/models/MapView";
 
 export const createNewViewConfig = (): MapViewConfig => {
   return {
     areaDataSourceId: "",
     areaDataColumn: "",
+    areaDataNullIsZero: true,
     areaSetGroupCode: null,
     excludeColumnsString: "",
     mapStyleName: MapStyleName.Light,
@@ -25,20 +23,3 @@ export const createNewViewConfig = (): MapViewConfig => {
     reverseColorScheme: false,
   };
 };
-
-export const getDataSourceIds = (mapConfig: MapConfig) => {
-  return new Set(
-    [mapConfig.membersDataSourceId]
-      .concat(mapConfig.markerDataSourceIds)
-      .filter(Boolean),
-  )
-    .values()
-    .toArray();
-};
-
-export const getMapStyle = (viewConfig: MapViewConfig) => {
-  if (viewConfig.mapType === MapType.Hex) {
-    return hexMapStyle;
-  }
-  return mapStyles[viewConfig.mapStyleName] || Object.values(mapStyles)[0];
-};

src/app/map/[id]/view/[viewIdOrHost]/publish/components/DataSourcesSelect.tsx

@@ -1,8 +1,8 @@
 import { Database } from "lucide-react";
 import { useContext } from "react";
-import { getDataSourceIds } from "@/app/map/[id]/context/MapContext";
 import { useDataSources } from "@/app/map/[id]/hooks/useDataSources";
 import { useMapConfig } from "@/app/map/[id]/hooks/useMapConfig";
+import { getDataSourceIds } from "@/app/map/[id]/utils/map";
 import { Button } from "@/shadcn/ui/button";
 import {
   DropdownMenu,

src/app/map/[id]/view/[viewIdOrHost]/publish/providers/PublicMapProvider.tsx

@@ -1,9 +1,9 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import { getDataSourceIds } from "@/app/map/[id]/context/MapContext";
 import { useDataSources } from "@/app/map/[id]/hooks/useDataSources";
 import { useMapConfig } from "@/app/map/[id]/hooks/useMapConfig";
+import { getDataSourceIds } from "@/app/map/[id]/utils/map";
 import { createDataSourceConfig } from "../components/DataSourcesSelect";
 import { PublicMapContext } from "../context/PublicMapContext";
 import type {

src/server/models/MapView.ts

@@ -103,6 +103,7 @@ export const mapViewConfigSchema = z.object({
   areaDataSourceId: z.string(),
   areaDataColumn: z.string(),
   areaDataSecondaryColumn: z.string().optional(),
+  areaDataNullIsZero: z.boolean().optional(),
   areaSetGroupCode: areaSetGroupCode.nullish(),
   choroplethOpacityPct: z.number().optional(),
   excludeColumnsString: z.string(),