update viewers page

This commit is contained in:
2026-05-16 08:08:33 +01:00
parent 48400bfea6
commit 97d7e02285
+1 -89
View File
@@ -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">