diff --git a/components/Map/Map.tsx b/components/Map/Map.tsx index 6d1f2c3..01f48eb 100644 --- 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 = ({ 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 = ({ 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 index a436694..8f5467a 100644 --- a/components/ReportLayout/ReportLayout.tsx +++ b/components/ReportLayout/ReportLayout.tsx @@ -53,7 +53,6 @@ export const ReportLayout: React.FC = async ({ statText, id ) - console.log(raceData) return (
diff --git a/utils/state/map.ts b/utils/state/map.ts index 967b15e..283deb6 100644 --- a/utils/state/map.ts +++ b/utils/state/map.ts @@ -57,10 +57,12 @@ export const mapSlice = createSlice({ setTimeSeriesLoaded: (state, action: PayloadAction) => { state.timeseriesDatasets.push(action.payload) }, - setTooltipInfo: (state, action: PayloadAction<{ x: number; y: number; id: string } | null>) => { + setTooltipInfo: (state, action: PayloadAction) => { 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'