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

style: increase map zoom and use flat brand color for visited countries with outline hover effect

Browse Source
This commit is contained in:
Usman Baig
2026-01-16 21:30:56 +01:00
parent cb0e985f65
commit f5938aaf49
1 changed files with 12 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
components/dashboard/WorldMap.tsx
View File

@@ -2,7 +2,6 @@
import React, { memo, useMemo, useState } from 'react' import React, { memo, useMemo, useState } from 'react'
import { ComposableMap, Geographies, Geography } from 'react-simple-maps' import { ComposableMap, Geographies, Geography } from 'react-simple-maps'
import { scaleLinear } from 'd3-scale'
import countries from 'i18n-iso-countries' import countries from 'i18n-iso-countries'
import enLocale from 'i18n-iso-countries/langs/en.json' import enLocale from 'i18n-iso-countries/langs/en.json'
import { useTheme } from 'next-themes' import { useTheme } from 'next-themes'
@@ -34,21 +33,18 @@ const WorldMap = ({ data }: WorldMapProps) => {
return { map, max } return { map, max }
}, [data]) }, [data])
const colorScale = scaleLinear<string>()
.domain([0, processedData.max || 1])
.range(["#fed7aa", "#FD5E0F"]) // standard choropleth: darker = more visitors
// Plausible-like colors based on provided SVG snippet // Plausible-like colors based on provided SVG snippet
const isDark = resolvedTheme === 'dark' const isDark = resolvedTheme === 'dark'
const defaultFill = isDark ? "#2d2d2d" : "#F2F2F2" // Approx gray-750 / gray-150 const defaultFill = isDark ? "#2d2d2d" : "#F2F2F2" // Approx gray-750 / gray-150
const defaultStroke = isDark ? "#171717" : "#FFFFFF" // gray-900 / white const defaultStroke = isDark ? "#171717" : "#FFFFFF" // gray-900 / white
const brandOrange = "#FD5E0F"
return ( return (
<div className="relative w-full"> <div className="relative w-full">
<ComposableMap <ComposableMap
width={800} width={800}
height={400} height={400}
projectionConfig={{ rotate: [-10, 0, 0], scale: 145, center: [0, 0] }} projectionConfig={{ rotate: [-10, 0, 0], scale: 155, center: [0, 0] }}
className="w-full h-auto" className="w-full h-auto"
> >
<Geographies geography={geoUrl}> <Geographies geography={geoUrl}>
@@ -58,17 +54,25 @@ const WorldMap = ({ data }: WorldMapProps) => {
.map((geo) => { .map((geo) => {
const id = String(geo.id).padStart(3, '0') const id = String(geo.id).padStart(3, '0')
const count = processedData.map.get(id) || 0 const count = processedData.map.get(id) || 0
const fillColor = count > 0 ? brandOrange : defaultFill
return ( return (
<Geography <Geography
key={geo.rsmKey} key={geo.rsmKey}
geography={geo} geography={geo}
fill={count > 0 ? colorScale(count) : defaultFill} fill={fillColor}
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: fillColor,
stroke: brandOrange,
strokeWidth: 2,
outline: "none",
cursor: 'pointer',
zIndex: 100 // Bring border to front
},
pressed: { outline: "none" }, pressed: { outline: "none" },
}} }}
onMouseEnter={(evt) => { onMouseEnter={(evt) => {