From 97d7e022852b8700d8505656f6e30257780b5006 Mon Sep 17 00:00:00 2001
From: Heidi <clippii@protonmail.com>
Date: Sat, 16 May 2026 08:08:33 +0100
Subject: [PATCH] update viewers page

---
 src/App.jsx | 90 +----------------------------------------------------
 1 file changed, 1 insertion(+), 89 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index f778a59..cd8e8bf 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -2609,7 +2609,6 @@ function LocationSignalMap({ countries, locations }) {
       const radius = isCityMarker
         ? scaleMarkerRadius(location.visitors, 5, 14)
         : scaleMarkerRadius(location.visitors, 8, 24)
-      const tooltipPlace = isCityMarker ? location.label : location.label
       L.circleMarker([location.lat, location.lon], {
         color: countryMarkerColor,
         fillColor: countryMarkerColor,
@@ -2617,93 +2616,6 @@ function LocationSignalMap({ countries, locations }) {
         opacity: 0,
         radius,
         stroke: false,
-      })
-        .bindTooltip(`${tooltipPlace}: ${formatNumber(location.visitors)} visitors`, {
-          direction: 'top',
-          opacity: 0.95,
-        })
-        .addTo(layer)
-    })
-  }, [cityMarkers, countryMarkerColor, countryMarkers, maxMarkerVisitors])
-
-  return (
-    <div className="p-5">
-      <div className="relative h-[340px] overflow-hidden rounded-md border border-border bg-surface">
-        <div ref={mapRef} className="h-full w-full" />
-      </div>
-
-      <div className="mt-4 grid gap-2 sm:grid-cols-2">
-        {topLocations.map((location) => (
-          <div className="grid grid-cols-[1fr_auto] gap-3 rounded-md bg-surface px-3 py-2 text-sm" key={`${location.key}-row`}>
-            <div className="min-w-0">
-              <p className="truncate font-semibold">{location.label}</p>
-              <p className="truncate text-xs text-text-soft">{location.detail}</p>
-            </div>
-            <p className="font-semibold text-fury-cyan">{formatNumber(location.visitors)}</p>
-          </div>
-        ))}
-      </div>
-
-      {!countries.length && !locations.length ? (
-        <p className="mt-4 text-sm text-text-soft">
-          No Cloudflare location signals have been shared yet.
-        </p>
-      ) : null}
-    </div>
-  )
-}
-
-function UptimePage({ uptime }) {
-  const [hoveredSnapshot, setHoveredSnapshot] = useState(null)
-  const checks = uptime.checks
-  const history = uptime.history
-  const operationalCount = checks.filter((check) => check.ok).length
-  const allOperational = checks.length > 0 && operationalCount === checks.length
-  const updatedAt = uptime.updatedAt ? dateFormat.format(new Date(uptime.updatedAt)) : 'Not checked yet'
-  const lastIssue = history.find((item) => item.status !== 'operational')
-  const uptimeSummary = uptime.summary || {}
-  const overview = [
-    {
-      label: 'Live checks',
-      value: formatNumber(checks.length),
-      detail: allOperational ? 'all endpoints responding' : `${formatNumber(checks.length - operationalCount)} need attention`,
-    },
-    {
-      label: '7 day uptime',
-      value: `${Math.round(Number(uptimeSummary.uptime_percent_7d || 0))}%`,
-      detail: `${formatNumber(uptimeSummary.samples_7d || 0)} retained probes`,
-    },
-    {
-      label: 'Last issue',
-      value: lastIssue ? shortDateFormat.format(new Date(lastIssue.checked_at)) : 'None',
-      detail: lastIssue ? `${lastIssue.status} on ${lastIssue.target}` : 'no stored incidents',
-    },
-  ]
-      const radius = scaleMarkerRadius(country.visitors, 8, 24)
-      L.circleMarker([country.lat, country.lon], {
-        color: '#e82517',
-        fillColor: '#e82517',
-        fillOpacity: 0.4,
-        opacity: 0,
-        radius,
-        stroke: false,
-      })
-        .bindTooltip(`${country.label}: ${formatNumber(country.visitors)} visitors`, {
-          direction: 'top',
-          opacity: 0.95,
-        })
-        .addTo(layer)
-    })
-
-    cityMarkers.forEach((location) => {
-      const radius = scaleMarkerRadius(location.visitors, 5, 14)
-      L.circleMarker([location.lat, location.lon], {
-        color: '#000000',
-        fillColor: '#000000',
-        fillOpacity: 0.4,
-        opacity: 0,
-        radius,
-        stroke: false,
       })
         .bindTooltip(`${location.label}: ${formatNumber(location.visitors)} visitors`, {
           direction: 'top',
@@ -2711,7 +2623,7 @@ function UptimePage({ uptime }) {
         })
         .addTo(layer)
     })
-  }, [cityMarkers, countryMarkers, maxMarkerVisitors])
+  }, [cityMarkers, countryMarkerColor, countryMarkers, maxMarkerVisitors])
 
   return (
     <div className="p-5">