SRETSS/tssbot.web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update viewers page

Browse Source
This commit is contained in:
Heidi
2026-05-16 07:53:16 +01:00
parent fddddadd48
commit 68b44ea8da
2 changed files with 86 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.jsx
+26 -2
View File
@@ -2060,6 +2060,7 @@ function MiniLineChart({ accent = 'text-fury-cyan', data, label, metric, stroke
const height = 112
const padding = 12
const maxValue = Math.max(1, ...data.map((item) => Number(item[metric] || 0)))
const midValue = Math.round(maxValue / 2)
const points = data.map((item, index) => {
const x = padding + (index / Math.max(1, data.length - 1)) * (width - padding * 2)
const y = height - padding - (Number(item[metric] || 0) / maxValue) * (height - padding * 2)
@@ -2080,8 +2081,16 @@ function MiniLineChart({ accent = 'text-fury-cyan', data, label, metric, stroke
<p className={`text-sm font-semibold ${accent}`}>{formatNumber(latest)}</p>
</div>
<svg className="mt-3 h-28 w-full overflow-visible" viewBox={`0 0 ${width} ${height}`} role="img" aria-label={`${label} line chart`}>
<div className="relative mt-3">
<div className="absolute left-0 top-0 flex h-28 w-8 flex-col justify-between text-[10px] font-semibold text-text-muted">
<span>{formatNumber(maxValue)}</span>
<span>{formatNumber(midValue)}</span>
<span>0</span>
</div>
<svg className="ml-8 h-28 w-[calc(100%-2rem)] overflow-visible" viewBox={`0 0 ${width} ${height}`} role="img" aria-label={`${label} line chart`}>
<path d={`M ${padding} ${height - padding} H ${width - padding}`} fill="none" stroke="#fee5cd" strokeWidth="1" />
<path d={`M ${padding} ${padding} H ${width - padding}`} fill="none" stroke="#fee5cd" strokeDasharray="4 5" strokeWidth="1" />
<path d={`M ${padding} ${height / 2} H ${width - padding}`} fill="none" stroke="#fee5cd" strokeDasharray="4 5" strokeWidth="1" />
<path d={pathData} fill="none" stroke={stroke} strokeLinecap="round" strokeLinejoin="round" strokeWidth="3" />
{points.map((point) => (
<circle
@@ -2097,7 +2106,8 @@ function MiniLineChart({ accent = 'text-fury-cyan', data, label, metric, stroke
tabIndex="0"
/>
))}
</svg>
</svg>
</div>
{hoveredPoint ? (
<div
@@ -2112,6 +2122,20 @@ function MiniLineChart({ accent = 'text-fury-cyan', data, label, metric, stroke
<span className="block font-normal text-bg/80">
{formatNumber(hoveredPoint.visitors || 0)} visitors
</span>
{metric === 'clients' && hoveredPoint.client_labels?.length ? (
<span className="mt-1 block max-w-56 whitespace-normal font-normal text-bg/80">
{hoveredPoint.client_labels
.map((client) => `${client.label}: ${formatNumber(client.visitors)} visitors`)
.join(', ')}
</span>
) : null}
{metric === 'locations' && hoveredPoint.location_labels?.length ? (
<span className="mt-1 block max-w-48 whitespace-normal font-normal text-bg/80">
{hoveredPoint.location_labels
.map((location) => `${location.label} (${formatNumber(location.visitors)})`)
.join(', ')}
</span>
) : null}
</div>
) : null}
</div>