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

fix: remove globe tab from locations, default to countries

Browse Source 
Remove the 3D globe visualization tab and set Countries as the
default tab when visiting the dashboard.
This commit is contained in:
Usman Baig
2026-03-19 12:01:23 +01:00
parent 6b1e6876c6
commit dc7bffdf56
1 changed files with 5 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
components/dashboard/Locations.tsx
View File

@@ -10,7 +10,6 @@ import * as Flags from 'country-flag-icons/react/3x2'
import iso3166 from 'iso-3166-2' import iso3166 from 'iso-3166-2'
const DottedMap = dynamic(() => import('./DottedMap'), { ssr: false }) const DottedMap = dynamic(() => import('./DottedMap'), { ssr: false })
const Globe = dynamic(() => import('./Globe'), { ssr: false })
import Link from 'next/link' import Link from 'next/link'
import { Modal, GlobeIcon, ArrowRightIcon } from '@ciphera-net/ui' import { Modal, GlobeIcon, ArrowRightIcon } from '@ciphera-net/ui'
import { ListSkeleton } from '@/components/skeletons' import { ListSkeleton } from '@/components/skeletons'
@@ -29,14 +28,14 @@ interface LocationProps {
onFilter?: (filter: DimensionFilter) => void onFilter?: (filter: DimensionFilter) => void
} }
type Tab = 'map' | 'globe' | 'countries' | 'regions' | 'cities' type Tab = 'map' | 'countries' | 'regions' | 'cities'
const LIMIT = 7 const LIMIT = 7
const TAB_TO_DIMENSION: Record<string, string> = { countries: 'country', regions: 'region', cities: 'city' } const TAB_TO_DIMENSION: Record<string, string> = { countries: 'country', regions: 'region', cities: 'city' }
export default function Locations({ countries, cities, regions, geoDataLevel = 'full', siteId, dateRange, onFilter }: LocationProps) { export default function Locations({ countries, cities, regions, geoDataLevel = 'full', siteId, dateRange, onFilter }: LocationProps) {
const [activeTab, setActiveTab] = useState<Tab>('map') const [activeTab, setActiveTab] = useState<Tab>('countries')
const handleTabKeyDown = useTabListKeyboard() const handleTabKeyDown = useTabListKeyboard()
const [isModalOpen, setIsModalOpen] = useState(false) const [isModalOpen, setIsModalOpen] = useState(false)
const [modalSearch, setModalSearch] = useState('') const [modalSearch, setModalSearch] = useState('')
@@ -194,7 +193,7 @@ export default function Locations({ countries, cities, regions, geoDataLevel = '
}) })
} }
const isVisualTab = activeTab === 'map' || activeTab === 'globe' const isVisualTab = activeTab === 'map'
const rawData = isVisualTab ? [] : getData() const rawData = isVisualTab ? [] : getData()
const data = filterUnknown(rawData) const data = filterUnknown(rawData)
const totalPageviews = data.reduce((sum, item) => sum + item.pageviews, 0) const totalPageviews = data.reduce((sum, item) => sum + item.pageviews, 0)
@@ -235,7 +234,7 @@ export default function Locations({ countries, cities, regions, geoDataLevel = '
)} )}
</div> </div>
<div className="flex gap-1 overflow-x-auto scrollbar-hide" role="tablist" aria-label="Location view tabs" onKeyDown={handleTabKeyDown}> <div className="flex gap-1 overflow-x-auto scrollbar-hide" role="tablist" aria-label="Location view tabs" onKeyDown={handleTabKeyDown}>
{(['map', 'globe', 'countries', 'regions', 'cities'] as Tab[]).map((tab) => ( {(['map', 'countries', 'regions', 'cities'] as Tab[]).map((tab) => (
<button <button
key={tab} key={tab}
onClick={() => setActiveTab(tab)} onClick={() => setActiveTab(tab)}
@@ -267,9 +266,7 @@ export default function Locations({ countries, cities, regions, geoDataLevel = '
</div> </div>
) : isVisualTab ? ( ) : isVisualTab ? (
hasData ? ( hasData ? (
activeTab === 'globe' inView ? <DottedMap data={filterUnknown(countries) as { country: string; pageviews: number }[]} /> : null
? (inView ? <Globe data={filterUnknown(countries) as { country: string; pageviews: number }[]} /> : null)
: (inView ? <DottedMap data={filterUnknown(countries) as { country: string; pageviews: number }[]} /> : null)
) : ( ) : (
<div className="h-full flex flex-col items-center justify-center text-center px-6 py-8 gap-3"> <div className="h-full flex flex-col items-center justify-center text-center px-6 py-8 gap-3">
<div className="rounded-full bg-neutral-100 dark:bg-neutral-800 p-4"> <div className="rounded-full bg-neutral-100 dark:bg-neutral-800 p-4">