ciphera-net/pulse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 15 Wiki Activity

feat: update default view to map and adjust map zoom/projection

Browse Source
This commit is contained in:
Usman Baig
2026-01-16 20:19:38 +01:00
parent 5c30e53617
commit 7606e9709b
2 changed files with 37 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/dashboard/Countries.tsx
View File

@@ -13,7 +13,7 @@ interface LocationProps {
type Tab = 'map' | 'countries' | 'cities' type Tab = 'map' | 'countries' | 'cities'
export default function Locations({ countries, cities }: LocationProps) { export default function Locations({ countries, cities }: LocationProps) {
const [activeTab, setActiveTab] = useState<Tab>('countries') const [activeTab, setActiveTab] = useState<Tab>('map')
const getFlagComponent = (countryCode: string) => { const getFlagComponent = (countryCode: string) => {
if (!countryCode || countryCode === 'Unknown') return null if (!countryCode || countryCode === 'Unknown') return null

70
components/dashboard/WorldMap.tsx
View File

@@ -45,43 +45,45 @@ const WorldMap = ({ data }: WorldMapProps) => {
return ( return (
<div className="relative w-full h-[300px] bg-neutral-50 dark:bg-neutral-900/50 rounded-lg overflow-hidden border border-neutral-100 dark:border-neutral-800"> <div className="relative w-full h-[300px] bg-neutral-50 dark:bg-neutral-900/50 rounded-lg overflow-hidden border border-neutral-100 dark:border-neutral-800">
<ComposableMap projectionConfig={{ rotate: [-10, 0, 0], scale: 147 }}> <ComposableMap projectionConfig={{ rotate: [-10, 0, 0], scale: 160, center: [0, 15] }}>
<ZoomableGroup> <ZoomableGroup maxZoom={1}>
<Geographies geography={geoUrl}> <Geographies geography={geoUrl}>
{({ geographies }) => {({ geographies }) =>
geographies.map((geo) => { geographies
// Ensure ID is padded to 3 digits as standard ISO numeric .filter(geo => geo.id !== "010") // Remove Antarctica
const id = String(geo.id).padStart(3, '0') .map((geo) => {
const count = processedData.map.get(id) || 0 // Ensure ID is padded to 3 digits as standard ISO numeric
const id = String(geo.id).padStart(3, '0')
const count = processedData.map.get(id) || 0
return ( return (
<Geography <Geography
key={geo.rsmKey} key={geo.rsmKey}
geography={geo} geography={geo}
fill={count > 0 ? colorScale(count) : defaultFill} fill={count > 0 ? colorScale(count) : defaultFill}
stroke={defaultStroke} stroke={defaultStroke}
strokeWidth={0.5} strokeWidth={0.5}
style={{ style={{
default: { outline: "none", transition: "all 250ms" }, default: { outline: "none", transition: "all 250ms" },
hover: { fill: "#FD5E0F", outline: "none", cursor: 'pointer' }, hover: { fill: "#FD5E0F", outline: "none", cursor: 'pointer' },
pressed: { outline: "none" }, pressed: { outline: "none" },
}} }}
onMouseEnter={(evt) => { onMouseEnter={(evt) => {
const { name } = geo.properties const { name } = geo.properties
setTooltipContent({ setTooltipContent({
content: `${name}: ${count} visitors`, content: `${name}: ${count} visitors`,
x: evt.clientX, x: evt.clientX,
y: evt.clientY y: evt.clientY
}) })
}} }}
onMouseLeave={() => { onMouseLeave={() => {
setTooltipContent(null) setTooltipContent(null)
}} }}
onMouseMove={(evt) => { onMouseMove={(evt) => {
setTooltipContent(prev => prev ? { ...prev, x: evt.clientX, y: evt.clientY } : null) setTooltipContent(prev => prev ? { ...prev, x: evt.clientX, y: evt.clientY } : null)
}} }}
/> />
) )
}) })
} }
</Geographies> </Geographies>