cleanup and tooltip for stores

uchicago-dsi · May 22, 2024 · 744fc13 · 744fc13
1 parent daba800
commit 744fc13
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 12 deletions.
diff --git a/components/Map/Map.tsx b/components/Map/Map.tsx
@@ -24,6 +24,7 @@ import MapTooltip from "components/MapTooltip"
 import { deepCompare2d1d } from "utils/data/compareArrayElements"
 import { MemoryMonitor } from "components/dev/MemoryMonitor"
 import { fetchCentroidById } from "utils/state/thunks"
+import { formatterPresets } from "utils/display/formatValue"
 
 export type MapProps = {
   initialFilter?: string
@@ -141,15 +142,6 @@ export const Map: React.FC<MapProps> = ({ initialFilter, simpleMap = false, onCl
         return color
       }
   const layers = [
-    new ScatterplotLayer({
-      id: "stores-locations-layer",
-      data: storesHaveGeo ? storeData : [],
-      getRadius: 5,
-      radiusUnits: "pixels",
-      getPosition: (d: any) => [d.STORE_LON, d.STORE_LAT],
-      getFillColor: [0, 255, 120],
-      pickable: false,
-    }),
     new GeoJsonLayer({
       // @ts-ignore
       data: JSON.parse(clickedGeo?.geometry || "[]"),
@@ -207,6 +199,66 @@ export const Map: React.FC<MapProps> = ({ initialFilter, simpleMap = false, onCl
       beforeId: "water",
       pickable: true,
     }),
+
+    new ScatterplotLayer({
+      id: "stores-locations-layer",
+      data: storesHaveGeo ? storeData : [],
+      getRadius: 5,
+      radiusUnits: "pixels",
+      getPosition: (d: any) => [d.STORE_LON, d.STORE_LAT],
+      getFillColor: [0, 255, 120],
+      onHover: (info: any, event: any) => {
+        if (info?.object) {
+          const x = event?.srcEvent?.clientX
+          const y = event?.srcEvent?.clientY
+          const id = info.object?.GEOID
+          const data = [{
+            section: "Store Info",
+            columns: [
+              {
+                label: "Store",
+                data: info.object?.COMPANY,
+                col: "" 
+              },
+              {
+                label: "Address",
+                data: info.object?.['ADDRESS LINE 1'],
+                col: ""
+              },
+              {
+                label: "City",
+                data: info.object?.CITY,
+                col: ""
+              },
+              {
+                label: "State",
+                data: info.object?.STATE,
+                col: ""
+              },
+              {
+                label: "Zipcode",
+                data: info.object?.ZIPCODE,
+                col: ""
+              },
+              {
+                label: "Parent Company",
+                data: info.object?.["PARENT COMPANY"],
+                col: ""
+              },
+              {
+                label: "Percent of area sales",
+                data: formatterPresets.percent(info.object?.["PCT OF TRACT SALES"]),
+                col: ""
+              }
+            ]
+          }]
+          dispatch(setTooltipInfo({ x, y, id, data  }))
+        } else {
+          dispatch(setTooltipInfo(null))
+        }
+      },
+      pickable: true,
+    }),
   ]
   const mapRef = useRef(null)
   // const year = useAppSelector((state) => state.map.year)

diff --git a/components/ReportLayout/ReportLayout.tsx b/components/ReportLayout/ReportLayout.tsx
@@ -53,7 +53,6 @@ export const ReportLayout: React.FC<ReportLayoutProps> = async ({
     statText,
     id
   )
-  console.log(raceData)
 
   return (
     <div className="min-h-[100vh] bg-theme-canvas-500 p-4">

diff --git a/utils/state/map.ts b/utils/state/map.ts
@@ -57,10 +57,12 @@ export const mapSlice = createSlice({
     setTimeSeriesLoaded: (state, action: PayloadAction<keyof typeof timeSeriesConfig>) => {
       state.timeseriesDatasets.push(action.payload)
     },
-    setTooltipInfo: (state, action: PayloadAction<{ x: number; y: number; id: string } | null>) => {
+    setTooltipInfo: (state, action: PayloadAction<MapState['tooltip'] | null>) => {
       state.tooltip = action.payload
       const id = action.payload?.id
-      if (!!id && !globals?.globalDs?.tooltipResults[id]) {
+      if (action.payload?.data) {
+        // chill
+      } else if (!!id && !globals?.globalDs?.tooltipResults[id]) {
         state.tooltipStatus = 'pending'
       } else {
         state.tooltipStatus = 'ready'